PopMenu 气泡菜单

vue

<template>
  <ta-group title="基础用法">
    <ta-cell label="基础">
      <ta-button
        size="small"
        id="popMenu"
        shape="circle"
        icon="MenuOutlined"
        @click=";(selector = '#popMenu'), (visible = true)"
      >
      </ta-button>
    </ta-cell>
    <ta-cell label="不展示蒙层">
      <ta-button
        size="small"
        id="popMenuNoMask"
        shape="circle"
        icon="MenuOutlined"
        @click="visible3 = true"
      >
      </ta-button>
    </ta-cell>
  </ta-group>
  <ta-group title="方向 placement=top/bottom/left/right">
    <div class="exp-popover-box2">
      <div>
        <ta-button
          size="small"
          id="popMenuTop2"
          shape="circle"
          icon="UpOutlined"
          @click=";(placement2 = 'top'), (selector2 = '#popMenuTop2'), (visible2 = true)"
        >
          上
        </ta-button>
      </div>
      <div>
        <ta-button
          size="small"
          id="popMenuLeft2"
          shape="circle"
          icon="LeftOutlined"
          @click=";(placement2 = 'left'), (selector2 = '#popMenuLeft2'), (visible2 = true)"
        >
          左
        </ta-button>
        <ta-button
          class="exp-popover-box2-ml"
          size="small"
          id="popMenuRight2"
          shape="circle"
          icon="RightOutlined"
          @click=";(placement2 = 'right'), (selector2 = '#popMenuRight2'), (visible2 = true)"
        >
          右
        </ta-button>
      </div>
      <div>
        <ta-button
          size="small"
          id="popMenuBottom2"
          shape="circle"
          icon="DownOutlined"
          @click=";(placement2 = 'bottom'), (selector2 = '#popMenuBottom2'), (visible2 = true)"
        >
          下
        </ta-button>
      </div>
    </div>
  </ta-group>
  <ta-group title="事件监听">
    <ta-cell label="confirm/cancel">
      <ta-button
        size="small"
        id="popMenuEvent"
        shape="circle"
        icon="MenuOutlined"
        @click=";(selector = '#popMenuEvent'), (showEvent = true), (visible = true)"
      >
      </ta-button>
    </ta-cell>
    <ta-cell label="visible-state-change">
      <ta-button
        size="small"
        id="popMenuPopupEvent"
        shape="circle"
        icon="MenuOutlined"
        @click=";(selector = '#popMenuPopupEvent'), (visibleEvent = true), (visible = true)"
      >
      </ta-button>
    </ta-cell>
  </ta-group>
  <ta-group title="API">
    <ta-cell label="showPopMenu">
      <ta-button
        size="small"
        id="popMenuApi"
        shape="circle"
        icon="MenuOutlined"
        @click="onCallApi('#popMenuApi')"
      >
      </ta-button>
    </ta-cell>
  </ta-group>
  <ta-pop-menu
    v-model:visible="visible"
    :selector="selector"
    :options="options"
    @confirm="onConfirm"
    @cancel="onCancel"
    @visibleStateChange="onVisibleStateChange"
  >
  </ta-pop-menu>
  <ta-pop-menu
    v-model:visible="visible2"
    :selector="selector2"
    :placement="placement2"
    :options="options"
    @confirm="onConfirm"
    @cancel="onCancel"
  >
  </ta-pop-menu>
  <ta-pop-menu
    v-model:visible="visible3"
    selector="#popMenuNoMask"
    :options="options"
    :showMask="false"
    @confirm="onConfirm"
    @cancel="onCancel"
  >
  </ta-pop-menu>
</template>

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

export default defineComponent({
  name: 'ExpPopMenu',
  setup() {
    const visible = ref(false)
    const selector = ref('')
    const placement2 = ref<PlacementType>('bottom')
    const visible2 = ref(false)
    const selector2 = ref('')
    const visible3 = ref(false)
    const showEvent = ref(false)
    const visibleEvent = ref(false)

    const options = [
      {
        icon: 'HeartOutlined',
        name: '爱心'
      },
      {
        icon: 'StarOutlined',
        name: '星星'
      },
      {
        icon: 'CircleOutlined',
        name: '圈圈',
        disabled: true
      }
    ]

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

    const onConfirm: PopMenuOnConfirm = 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(selector: string) {
      showPopMenu({
        selector,
        options: options,
        placement: 'top',
        success: res => {
          console.log('success', res)
          if (res.confirm) {
            showToast(`选择了 ${res.detail.item.name}`)
          } else {
            showToast('取消了')
          }
        }
      })
    }

    return {
      visible,
      selector,

      placement2,
      visible2,
      selector2,

      visible3,

      options,

      showEvent,
      visibleEvent,

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

Import

import { TaPopMenu } from 'tantalum-ui-mobile'

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

Import Type

组件导出的类型定义：

import type {
  PopMenuOption,
  PopMenuOnConfirm,
  VisibleState,
  PopupOnVisibleStateChange,
  PopupOnCancel
} from 'tantalum-ui-mobile'

Props

属性	类型	默认值	必填	说明
v-model:visible	boolean	false	否	是否显示
selector	string \| HTMLElement		是	从哪个元素展开，如果是 string，则为可以被 document.querySelector(selector) 获取到
placement	PlacementType	'bottom'	否	展开位置，可选 'bottom', 'top', 'left', 'right'
show-mask	boolean	true	否	是否展示蒙层，如果设置不展示，气泡则是跟随 `selector` 对应的元素
options	PopMenuOption[]		否	选项列表

PopMenuOption 的结构

interface MenuOption {
  name: string
  icon?: IconData
  disabled?: boolean
}

key	类型	默认值	必填	说明
name	string		是	选项名
disabled	string	false	否	是否禁用
icon	string		否	图标，使用 Icon 组件

const options = [
  {
    name: '选项1',
    disabled: false,
    icon: 'MenuOutlined'
  }
]

Events

事件	描述	回调函数参数	TypeScript 函数
confirm	确认按钮点击时触发	payload: { item: { name: string }, index: number }	PopMenuOnConfirm
cancel	取消时触发	payload: { source: string }	PopupOnCancel
visible-state-change	展示隐藏时触发	payload: { state: VisibleState }	PopupOnVisibleStateChange

VisibleState 值说明

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

showPopMenu(object)

显示气泡菜单。

object

属性	类型	默认值	必填	说明
selector	string \| HTMLElement		是	从哪个元素展开，如果是 string，则为可以被 document.querySelector(selector) 获取到
placement	PlacementType	'bottom'	否	展开位置，可选 'bottom', 'top', 'left', 'right'
options	PopMenuOption[]		否	选项列表
success	(payload: SuccessPayload) => void		否	接口调用成功（在用户做出选择后，如取消，选择选项）的回调函数
fail	(e: Error) => void		否	接口调用失败（如传入错误的参数）的回调函数（不传入 fail 遇错误直接抛出）
complete	() => void		否	弹窗关闭或调用失败的回调函数

SuccessPayload

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

Usage

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

showPopMenu({
  selector: '#popMenuTarget',
  options: [
    {
      icon: 'HeartOutlined',
      name: '爱心'
    },
    {
      icon: 'StarOutlined',
      name: '星星'
    },
    {
      icon: 'CircleOutlined',
      name: '圈圈',
      disabled: true
    }
  ],
  placement: 'top',
  success: res => {
    console.log('select', res)
  }
})

PopMenu 气泡菜单 #

Import #

Import Type #

Props #

PopMenuOption 的结构 #

Events #

VisibleState 值说明 #

showPopMenu(object) #

object #

SuccessPayload #

Usage #

PopMenu 气泡菜单

Import

Import Type

Props

PopMenuOption 的结构

Events

VisibleState 值说明

showPopMenu(object)

object

SuccessPayload

Usage