Tantalum UI

Appearance

Return to top
On this page

Dropdown 下拉框

vue
<template>
  <ta-group title="基础用法">
    <ta-cell
      label="基础"
      isLink
      id="dropdownCell"
      @click=";(selector = '#dropdownCell'), (visible = true)"
    />
  </ta-group>
  <ta-group title="事件监听">
    <ta-cell
      label="visible-state-change"
      id="dropdownCellEvent"
      @click=";(selector = '#dropdownCellEvent'), (visibleEvent = true), (visible = true)"
    />
  </ta-group>
  <ta-dropdown
    v-model:visible="visible"
    :selector="selector"
    @visibleStateChange="onVisibleStateChange"
  >
  </ta-dropdown>
</template>

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

export default defineComponent({
  name: 'ExpDropdown',
  setup() {
    const visible = ref(false)
    const selector = ref('')
    const visibleEvent = ref(false)

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

    return {
      visible,
      selector,
      visibleEvent,

      onVisibleStateChange
    }
  }
})
</script>

Import

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

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

Import Type

组件导出的类型定义：

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

Props

属性类型默认值必填说明
v-model:visiblebooleanfalse否是否显示
selectorstring | HTMLElement是从哪个元素展开，如果是 string，则为可以被 document.querySelector(selector) 获取到

Events

事件描述回调函数参数TypeScript 函数
visible-state-change展示隐藏时触发payload: { state: VisibleState }PopupOnVisibleStateChange

VisibleState 值说明

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

Slots

vue
<ta-dropdown>展开的内容</ta-dropdown>