Tantalum UI

Appearance

Return to top
On this page

ActionSheet 动作面板

vue
<template>
  <ta-group title="基础用法">
    <ta-cell label="默认" isLink @click="visible = true"></ta-cell>
    <ta-cell label="展示标题" isLink @click=";(title = '标题'), (visible = true)"></ta-cell>
    <ta-cell label="展示取消按钮" isLink @click=";(showCancel = true), (visible = true)"></ta-cell>
    <ta-cell
      label="设置取消按钮文案"
      isLink
      @click=";(showCancel = true), (cancelText = '自定义取消按钮文案'), (visible = true)"
    ></ta-cell>
  </ta-group>
  <ta-group title="options 扩展">
    <ta-cell
      label="选项描述"
      isLink
      @click="
        ;(options = [
          {
            name: '选项1',
            description: '选项1的描述文案'
          },
          {
            name: '选项2'
          },
          {
            name: '选项3'
          }
        ]),
          (visible = true)
      "
    ></ta-cell>
    <ta-cell
      label="选项高亮"
      isLink
      @click="
        ;(options = [
          {
            name: '选项1',
            highlight: true
          },
          {
            name: '选项2'
          },
          {
            name: '选项3'
          }
        ]),
          (visible = true)
      "
    ></ta-cell>
  </ta-group>
  <ta-group title="事件监听">
    <ta-cell
      label="confirm/cancel"
      isLink
      @click=";(showCancel = true), (showEvent = true), (visible = true)"
    ></ta-cell>
    <ta-cell
      label="visible-state-change"
      isLink
      @click=";(visibleEvent = true), (visible = true)"
    ></ta-cell>
  </ta-group>
  <ta-group title="API">
    <ta-cell label="showActionSheet" isLink @click="onCallApi()"></ta-cell>
  </ta-group>
  <ta-action-sheet
    v-model:visible="visible"
    :title="title"
    :options="options"
    :show-cancel="showCancel"
    :cancel-text="cancelText"
    @confirm="onConfirm"
    @cancel="onCancel"
    @visibleStateChange="onVisibleStateChange"
  ></ta-action-sheet>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import {
  type ActionSheetOption,
  type ActionSheetOnConfirm,
  showToast,
  showDialog,
  type PopupOnCancel,
  showActionSheet,
  type PopupOnVisibleStateChange
} from '@/index'

const defaultOptions: ActionSheetOption[] = [
  {
    name: '选项1'
  },
  {
    name: '选项2'
  },
  {
    name: '选项3'
  }
]

export default defineComponent({
  name: 'ExpActionSheet',
  setup() {
    const visible = ref(false)
    const title = ref('')
    const showCancel = ref(false)
    const cancelText = ref('取消')
    const options = ref(defaultOptions)
    const showEvent = ref(false)
    const visibleEvent = ref(false)

    const onVisibleStateChange: PopupOnVisibleStateChange = res => {
      if (visibleEvent.value) {
        console.log('visible-state-change', res)
        showToast(`${res.state} 事件触发`)
      }

      if (res.state === 'hidden') {
        showCancel.value = false
        cancelText.value = '取消'
        options.value = defaultOptions
        title.value = ''
        visibleEvent.value = false
        showEvent.value = false
      }
    }

    const onConfirm: ActionSheetOnConfirm = res => {
      if (showEvent.value) {
        console.log('confirm', res)
        showDialog({
          title: '选择了',
          showCancel: false,
          content: `item.name: '${res.item.name}'\nindex: ${res.index}`
        })
      }
    }

    const onCancel: PopupOnCancel = res => {
      if (showEvent.value) {
        console.log('cancel', res)
        showToast('取消了')
      }
    }

    function onCallApi() {
      showActionSheet({
        title: '标题',
        options: options.value,
        showCancel: true,
        success: res => {
          console.log('success', res)
          const { confirm, detail } = res

          if (confirm) {
            showDialog({
              title: '选择了',
              showCancel: false,
              content: `item.name: '${detail.item.name}'\nindex: ${detail.index}`
            })
          } else {
            showToast('取消了')
          }
        }
      })
    }

    return {
      visible,
      title,
      showCancel,
      cancelText,
      options,
      options2: [
        {
          name: '选项1',
          description: '选项1的描述文案'
        },
        {
          name: '选项2'
        },
        {
          name: '选项3'
        }
      ] as ActionSheetOption[],
      showEvent,
      visibleEvent,

      onVisibleStateChange,
      onConfirm,
      onCancel,
      onCallApi
    }
  }
})
</script>

Import

js
import { TaActionSheet } from 'tantalum-ui-mobile'

具体的引入方式可以参考引入组件。

Import Type

组件导出的类型定义：

ts
import type {
  ActionSheetOption,
  ActionSheetOnConfirm,
  VisibleState,
  PopupOnVisibleStateChange,
  PopupOnCancel
} from 'tantalum-ui-mobile'

Props

属性类型默认值必填说明
v-model:visiblebooleanfalse否是否显示
titlestring否标题，不设置则不展示标题栏
optionsActionSheetOption[]是选项列表
mask-closablebooleantrue否点击蒙层是否触发关闭操作
show-cancelbooleanfalse否是否显示取消按钮
cancel-textstring'取消'否取消按钮的文本

ActionSheetOption 的结构

key类型默认值必填说明
namestring是展示名称
descriptionstring否附加描述
disabledstringfalse否是否禁用
highlightstringfalse否是否高亮显示
ts
interface ActionSheetOption {
  name: string
  highlight?: boolean
  description?: string
  disabled?: boolean
}

const options: ActionSheetOption[] = [
  {
    name: '选项1',
    disabled: false,
    description: '选项描述',
    highlight: false
  }
]

Events

事件描述回调函数参数函数 TypeScript
confirm点击选项时触发payload: { item: { name: string }, index: number }ActionSheetOnConfirm
cancel取消按钮或者点击蒙层关闭时触发payload: { source: string }PopupOnCancel
visible-state-change展示隐藏时触发payload: { state: VisibleState }PopupOnVisibleStateChange

VisibleState 值说明

值说明备注
show展示时触发
shown展示且动画结束后触发
hide隐藏时触发可能携带其他参数 cancel, maskClick, closeClick 等
hidden隐藏且动画结束后触发可能携带其他参数 cancel, maskClick, closeClick 等

showActionSheet(object)

显示动作面板。

object

属性类型默认值必填说明
titlestring否提示的标题，不设置则不展示
optionsActionSheetOption[]是选项列表
showCancelbooleanfalse否是否显示取消按钮
cancelTextstring'取消'否取消按钮的文字
success(payload: SuccessPayload) => void否接口调用成功（在用户做出选择后，如取消，选择选项）的回调函数
fail(e: Error) => void否接口调用失败（如传入错误的参数）的回调函数（不传入 fail 遇错误直接抛出）
complete() => void否弹窗关闭或调用失败的回调函数

SuccessPayload

属性类型说明
confirm?boolean为 true 时，表示用户点击了选项，此时返回 detail
cancel?boolean为 true 时，表示用户点击了取消
detail?.item.namestringconfirm=true 时点击 item 的选项名
detail?.indexnumberconfirm=true 时点击 item 的索引

Usage

具体调用方式可以参考API 调用。

js
showActionSheet({
  title: '标题',
  options: [
    {
      name: '选项1',
      description: '选项1的描述文案'
    },
    {
      name: '选项2'
    },
    {
      name: '选项3'
    }
  ],
  showCancel: true,
  success: ({ confirm, cancel, detail }) => {
    ...
  }
})