Skip to content
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>

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

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

该事件支持返回falsePromise且为 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
maskClosable点击遮罩是否允许关闭Booleanfalsetrue
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