Tuniao UI Uniapp V3

Appearance

12:13

TnActionSheet-操作菜单 ​

ActionSheet操作菜单一般用于弹出提示信息，让用户确认下一步的操作或者提示用户操作结果。

组件位置 ​

typescript
import TnActionSheet from '@tuniao/tnui-vue3-uniapp/components/action-sheet/src/action-sheet.vue'
import TnActionSheet from '@tuniao/tnui-vue3-uniapp/components/action-sheet/src/action-sheet.vue'
typescript
import TnActionSheet from '@/uni_modules/tuniaoui-vue3/components/action-sheet/src/action-sheet.vue'
import TnActionSheet from '@/uni_modules/tuniaoui-vue3/components/action-sheet/src/action-sheet.vue'

平台差异说明 ​

App(vue)H5微信小程序支付宝小程序...
√√√√适配中

基础使用 ​

该组件与其他组件的使用方法不大一样，并不是通过Props参数来进行控制，而是通过TnActionSheet组件的show方法来控制。

其中actions字段中是存放选项数据，通过text设置选项文字，value设置选项值，desc设置选项描述。

vue
<script lang="ts" setup>
import { ref } from 'vue'
import type { TnActionSheetInstance } from '@tuniao/tnui-vue3-uniapp'

const actionSheetRef = ref<TnActionSheetInstance>()

const openActionSheet = () => {
  actionSheetRef.value?.show({
    actions: [
      { text: '选项1', value: '1' },
      { text: '选项2', value: '2', desc: '暂时不能选' },
      { text: '选项3', value: '3' },
    ],
  })
}
</script>

<template>
  <TnButton @click="openActionSheet">显示模态框</TnButton>
  <TnActionSheet ref="actionSheetRef" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TnActionSheetInstance } from '@tuniao/tnui-vue3-uniapp'

const actionSheetRef = ref<TnActionSheetInstance>()

const openActionSheet = () => {
  actionSheetRef.value?.show({
    actions: [
      { text: '选项1', value: '1' },
      { text: '选项2', value: '2', desc: '暂时不能选' },
      { text: '选项3', value: '3' },
    ],
  })
}
</script>

<template>
  <TnButton @click="openActionSheet">显示模态框</TnButton>
  <TnActionSheet ref="actionSheetRef" />
</template>
vue
<script lang="ts" setup>
import { ref } from 'vue'
import type { TnActionSheetInstance } from '@/uni_modules/tuniaoui-vue3'

const actionSheetRef = ref<TnActionSheetInstance>()

const openActionSheet = () => {
  actionSheetRef.value?.show({
    actions: [
      { text: '选项1', value: '1' },
      { text: '选项2', value: '2', desc: '暂时不能选' },
      { text: '选项3', value: '3' },
    ],
  })
}
</script>

<template>
  <tn-button @click="openActionSheet">显示模态框</tn-button>
  <tn-action-sheet ref="actionSheetRef"></tn-action-sheet>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TnActionSheetInstance } from '@/uni_modules/tuniaoui-vue3'

const actionSheetRef = ref<TnActionSheetInstance>()

const openActionSheet = () => {
  actionSheetRef.value?.show({
    actions: [
      { text: '选项1', value: '1' },
      { text: '选项2', value: '2', desc: '暂时不能选' },
      { text: '选项3', value: '3' },
    ],
  })
}
</script>

<template>
  <tn-button @click="openActionSheet">显示模态框</tn-button>
  <tn-action-sheet ref="actionSheetRef"></tn-action-sheet>
</template>

设置操作菜单的标题 ​

通过title设置操作菜单的标题，如果设置为空，则不显示标题

开发者也可以通过title插槽来自定义标题

js
actionSheetRef.value?.show({
  actions: [
    { text: '选项1', value: '1' },
    { text: '选项2', value: '2', desc: '暂时不能选' },
    { text: '选项3', value: '3' },
  ],
  title: '请选择选项'
})
actionSheetRef.value?.show({
  actions: [
    { text: '选项1', value: '1' },
    { text: '选项2', value: '2', desc: '暂时不能选' },
    { text: '选项3', value: '3' },
  ],
  title: '请选择选项'
})

隐藏标题 ​

js
actionSheetRef.value?.show({
  actions: [
    { text: '选项1', value: '1' },
    { text: '选项2', value: '2', desc: '暂时不能选' },
    { text: '选项3', value: '3' },
  ],
  title: ''
})
actionSheetRef.value?.show({
  actions: [
    { text: '选项1', value: '1' },
    { text: '选项2', value: '2', desc: '暂时不能选' },
    { text: '选项3', value: '3' },
  ],
  title: ''
})

自定义标题 ​

vue
<TnActionSheet ref="actionSheetRef">
  <template #title>
    <div class="custom-title">自定义标题</div>
  </template>
</TnActionSheet>
<TnActionSheet ref="actionSheetRef">
  <template #title>
    <div class="custom-title">自定义标题</div>
  </template>
</TnActionSheet>

设置取消按钮 ​

通过cancelText设置取消按钮的文字，如果设置为空，则不显示取消按钮

开发者也可以通过cancel插槽来自定义取消按钮

js
actionSheetRef.value?.show({
  actions: [
    { text: '选项1', value: '1' },
    { text: '选项2', value: '2', desc: '暂时不能选' },
    { text: '选项3', value: '3' },
  ],
  cancelText: '取消'
})
actionSheetRef.value?.show({
  actions: [
    { text: '选项1', value: '1' },
    { text: '选项2', value: '2', desc: '暂时不能选' },
    { text: '选项3', value: '3' },
  ],
  cancelText: '取消'
})

隐藏取消按钮 ​

js
actionSheetRef.value?.show({
  actions: [
    { text: '选项1', value: '1' },
    { text: '选项2', value: '2', desc: '暂时不能选' },
    { text: '选项3', value: '3' },
  ],
  cancelText: ''
})
actionSheetRef.value?.show({
  actions: [
    { text: '选项1', value: '1' },
    { text: '选项2', value: '2', desc: '暂时不能选' },
    { text: '选项3', value: '3' },
  ],
  cancelText: ''
})

自定义取消按钮 ​

vue
<TnActionSheet ref="actionSheetRef">
  <template #cancel>
    <div class="custom-cancel">自定义取消按钮</div>
  </template>
</TnActionSheet>
<TnActionSheet ref="actionSheetRef">
  <template #cancel>
    <div class="custom-cancel">自定义取消按钮</div>
  </template>
</TnActionSheet>

点击选项和取消按钮的回调 ​

通过cancel和select来监听取消和选项的点击事件。

该事件支持返回false 和 Promise且为 reject 来阻止操作菜单的关闭。

js
actionSheetRef.value?.show({
  actions: [
    { text: '选项1', value: '1' },
    { text: '选项2', value: '2', desc: '暂时不能选' },
    { text: '选项3', value: '3' },
  ],
  cancel: () => {
    console.log('取消按钮被点击')
  },
  select: (index: number, value?: string | number) => {
    console.log('选项被点击', index, value)
  }
})
actionSheetRef.value?.show({
  actions: [
    { text: '选项1', value: '1' },
    { text: '选项2', value: '2', desc: '暂时不能选' },
    { text: '选项3', value: '3' },
  ],
  cancel: () => {
    console.log('取消按钮被点击')
  },
  select: (index: number, value?: string | number) => {
    console.log('选项被点击', index, value)
  }
})

拦截菜单关闭 ​

js
actionSheetRef.value?.show({
  actions: [
    { text: '选项1', value: '1' },
    { text: '选项2', value: '2', desc: '暂时不能选' },
    { text: '选项3', value: '3' },
  ],
  cancel: () => {
    console.log('取消按钮被点击')
    return false
  }
})
actionSheetRef.value?.show({
  actions: [
    { text: '选项1', value: '1' },
    { text: '选项2', value: '2', desc: '暂时不能选' },
    { text: '选项3', value: '3' },
  ],
  cancel: () => {
    console.log('取消按钮被点击')
    return false
  }
})

第二个选项不能选择 ​

js
actionSheetRef.value?.show({
  actions: [
    { text: '选项1', value: '1' },
    { text: '选项2', value: '2', desc: '暂时不能选' },
    { text: '选项3', value: '3' },
  ],
  select: (index: number, value?: string | number) => {
    console.log('选项被点击', index, value)
    if (index === 1) {
      return Promise.reject()
    }
  }
})
actionSheetRef.value?.show({
  actions: [
    { text: '选项1', value: '1' },
    { text: '选项2', value: '2', desc: '暂时不能选' },
    { text: '选项3', value: '3' },
  ],
  select: (index: number, value?: string | number) => {
    console.log('选项被点击', index, value)
    if (index === 1) {
      return Promise.reject()
    }
  }
})

API ​

Props ​

属性名说明类型默认值可选值
z-index操作菜单的zIndexNumber20076-

Slots ​

插槽名说明
title自定义标题内容
cancel自定义取消按钮内容

show函数配置项 ​

属性名说明类型默认值可选值必填
actions选项内容数据ActionSheetAction[]--是
title弹框标题，如果为空则不显示标题String--否
cancelText取消按钮文字，如果为空则不显示取消按钮String取 消-否
mask显示遮罩Booleantruefalse否
cancel点击取消按钮触发的回调函数，返回 false 或者返回 Promise 且被 reject 则取消关闭() => (Promise<boolean> | void) | boolean--否
select点击选项触发的回调函数，返回 false 或者返回 Promise 且被 reject 则取消关闭(index: number, value?: string | number) => (Promise<boolean> | void) | boolean--否

ActionSheetAction ​

参数说明必填
text选项文字是
desc选项描述-
value选项的值-

Tuniao UI

Copyright © 2019-present Evan You,Made with ❤️ by Tuniao UI