Tantalum UI

Appearance

Return to top
On this page

Popover 气泡

vue
<template>
  <ta-group title="基础用法">
    <div class="exp-popover-box">
      <ta-button
        size="small"
        id="popoverLeft"
        shape="circle"
        icon="PlusOutlined"
        @click=";(selector = '#popoverLeft'), (visible = true)"
      >
        左
      </ta-button>
      <ta-button
        size="small"
        id="popoverCenter"
        shape="circle"
        icon="PlusOutlined"
        @click=";(selector = '#popoverCenter'), (visible = true)"
      >
        中
      </ta-button>
      <ta-button
        size="small"
        id="popoverRight"
        shape="circle"
        icon="PlusOutlined"
        @click=";(selector = '#popoverRight'), (visible = true)"
      >
        右
      </ta-button>
    </div>
  </ta-group>
  <ta-group title="方向 placement=top/bottom/left/right">
    <div class="exp-popover-box2">
      <div>
        <ta-button
          size="small"
          id="popoverTop2"
          shape="circle"
          icon="UpOutlined"
          @click=";(placement = 'top'), (selector = '#popoverTop2'), (visible = true)"
        >
          上
        </ta-button>
      </div>
      <div>
        <ta-button
          size="small"
          id="popoverLeft2"
          shape="circle"
          icon="LeftOutlined"
          @click=";(placement = 'left'), (selector = '#popoverLeft2'), (visible = true)"
        >
          左
        </ta-button>
        <ta-button
          class="exp-popover-box2-ml"
          size="small"
          id="popoverRight2"
          shape="circle"
          icon="RightOutlined"
          @click=";(placement = 'right'), (selector = '#popoverRight2'), (visible = true)"
        >
          右
        </ta-button>
      </div>
      <div>
        <ta-button
          size="small"
          id="popoverBottom2"
          shape="circle"
          icon="DownOutlined"
          @click=";(placement = 'bottom'), (selector = '#popoverBottom2'), (visible = true)"
        >
          下
        </ta-button>
      </div>
    </div>
  </ta-group>
  <ta-group title="带选项">
    <ta-cell label="长文案">
      <ta-button
        size="small"
        id="popoverLongContent"
        shape="circle"
        icon="PlusOutlined"
        @click="
          ;(selector = '#popoverLongContent'),
            (content = '这是气泡内容这是气泡内容这是气泡内容这是气泡内容这是气泡内容这是气泡内容'),
            (visible = true)
        "
      >
      </ta-button>
    </ta-cell>
    <ta-cell label="不展示蒙层">
      <ta-button
        size="small"
        id="popoverNoMask"
        shape="circle"
        icon="PlusOutlined"
        @click="onShowNoMask"
      >
      </ta-button>
    </ta-cell>
  </ta-group>
  <ta-group title="事件监听">
    <ta-cell label="visible-state-change">
      <ta-button
        size="small"
        id="popoverEvent"
        shape="circle"
        icon="PlusOutlined"
        @click=";(selector = '#popoverEvent'), (visibleEvent = true), (visible = true)"
      >
      </ta-button>
    </ta-cell>
  </ta-group>
  <ta-group title="API">
    <ta-cell label="showPopover">
      <ta-button
        size="small"
        id="popoverApi"
        shape="circle"
        icon="PlusOutlined"
        @click="onCallApi('#popoverApi')"
      >
      </ta-button>
    </ta-cell>
  </ta-group>
  <ta-popover
    v-model:visible="visible"
    :selector="selector"
    :placement="placement"
    :content="content"
    @visibleStateChange="onVisibleStateChange"
  >
  </ta-popover>
  <ta-popover
    v-model:visible="noMaskVisible"
    selector="#popoverNoMask"
    :showMask="false"
    content="无蒙层气泡内容"
  >
  </ta-popover>
</template>

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

export default defineComponent({
  name: 'ExpPopover',
  setup() {
    const visible = ref(false)
    const noMaskVisible = ref(false)
    const visibleEvent = ref(false)
    const selector = ref('')
    const content = ref('这是气泡内容')
    const placement = ref<PlacementType>('bottom')

    function onShowNoMask() {
      noMaskVisible.value = true
      setTimeout(() => {
        noMaskVisible.value = false
      }, 5000)
    }

    const onVisibleStateChange: PopupOnVisibleStateChange = res => {
      if (visibleEvent.value) {
        console.log('visible-state-change', res)
        showToast(`${res.state} 事件触发`)
      }
      if (res.state === 'hidden') {
        selector.value = ''
        placement.value = 'bottom'
        content.value = '这是气泡内容'
        visibleEvent.value = false
      }
    }

    function onCallApi(selector: string) {
      showPopover({
        selector,
        content: '这是气泡内容',
        placement: 'top',
        success: res => {
          console.log('success', res)
        }
      })
    }
    return {
      visible,
      noMaskVisible,
      visibleEvent,

      selector,
      content,
      placement,

      onShowNoMask,
      onVisibleStateChange,
      onCallApi
    }
  }
})
</script>

Import

js
import { TaPopover } 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) 获取到
placementPlacementType'bottom'否展开位置，可选 'bottom', 'top', 'left', 'right'
show-maskbooleantrue否是否展示蒙层，如果设置不展示，气泡则是跟随 selector 对应的元素
contentstring否展示文本，如设置了 slot，则不使用该字段

Events

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

VisibleState 值说明

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

Slots

#default

vue
<ta-popover>自定义内容</ta-popover>

showPopover(object)

显示气泡。

object

属性类型默认值必填说明
selectorstring | HTMLElement是从哪个元素展开，如果是 string，则为可以被 document.querySelector(selector) 获取到
placementPlacementType'bottom'否展开位置，可选 'bottom', 'top', 'left', 'right'
contentstring是文本内容
showMaskbooleantrue否是否展示蒙层，如果设置不展示，气泡则是跟随 selector 对应的元素
success() => void否接口调用成功的回调函数
fail(e: Error) => void否接口调用失败的回调函数（不传入 fail 遇错误直接抛出）
complete() => void否接口调用结束的回调函数（调用成功、失败都会执行）

Usage

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

js
showPopover({
  selector: '#popoverTarget',
  content: '这是气泡内容',
  success: res => {
    console.log('success', res)
  }
})