Popover 气泡弹出框

介绍

弹出式的气泡菜单。

基础用法

当 Popover 弹出时，会基于 reference 插槽的内容进行定位。

<z-popover
  v-model:show="showPopover"
  :actions="actions"
  placement="bottom-start"
  @select="onSelect"
>
  <template #reference>
    <z-button type="primary"> 浅色风格 </z-button>
  </template>
</z-popover>

import { ref } from 'vue';
import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()
const showPopover = ref(false);
// 通过 actions 属性来定义菜单选项
const actions = [
  { text: '选项一' },
  { text: '选项二' },
  { text: '选项三' },
];
const onSelect = (action) => toast.showToast(action.text);

深色风格

Popover 支持浅色和深色两种风格，默认为浅色风格，将 theme 属性设置为 dark 可切换为深色风格。

<z-popover v-model:show="showPopover" theme="dark" :actions="actions">
  <template #reference>
    <z-button type="primary">深色风格</z-button>
  </template>
</z-popover>

import { ref } from 'vue';
const showPopover = ref(false);
const actions = [
  { text: '选项一' },
  { text: '选项二' },
  { text: '选项三' },
];

水平排列

将 actions-direction 属性设置为 horizontal 后，菜单选项会变成水平排列。

<z-popover
  v-model:show="showPopover"
  :actions="actions"
  actions-direction="horizontal"
>
  <template #reference>
    <z-button type="primary">水平排列</z-button>
  </template>
</z-popover>

import { ref } from 'vue';
const showPopover = ref(false);
const actions = [
  { text: '选项一' },
  { text: '选项二' },
  { text: '选项三' },
];

弹出位置

通过 placement 属性来控制气泡的弹出位置。

<z-popover placement="top" />

placement 支持以下值：

top           # 顶部中间位置
top-start     # 顶部左侧位置
top-end       # 顶部右侧位置
left          # 左侧中间位置
left-start    # 左侧上方位置
left-end      # 左侧下方位置
right         # 右侧中间位置
right-start   # 右侧上方位置
right-end     # 右侧下方位置
bottom        # 底部中间位置
bottom-start  # 底部左侧位置
bottom-end    # 底部右侧位置

展示图标

在 actions 数组中，可以通过 icon 字段来定义选项的图标，支持传入图标名称或图片链接，等同于 Icon 组件的 name 属性。

<z-popover v-model:show="showPopover" :actions="actions">
  <template #reference>
    <z-button type="primary">展示图标</z-button>
  </template>
</z-popover>

import { ref } from 'vue';
const showPopover = ref(false);
const actions = [
  { text: '选项一', icon: 'plus-circle' },
  { text: '选项二', icon: 'minus-circle' },
  { text: '选项三', icon: 'message' }
];

禁用选项

在 actions 数组中，可以通过 disabled 字段来禁用某个选项。

<z-popover v-model:show="showPopover" :actions="actions">
  <template #reference>
    <z-button type="primary">禁用选项</z-button>
  </template>
</z-popover>

import { ref } from 'vue';
const showPopover = ref(false);
const actions = [
  { text: '选项一', disabled: true },
  { text: '选项二', disabled: true },
  { text: '选项三' },
];

自定义内容

通过默认插槽，可以在 Popover 内部放置任意内容。

<z-popover
  v-model:show="show.customContent"
  placement="top-start"
  @select="onSelect"
>
  <z-grid
    square
    clickable
    :border="false"
    column-num="3"
    :custom-style="{ width: '480rpx' }"
  >
    <z-grid-item
      v-for="i in 6"
      :key="i"
      icon="image"
      text="选项"
      @click="show.customContent = false"
    />
  </z-grid>
  <template #reference>
    <z-button type="primary"> 自定义内容 </z-button>
  </template>
</z-popover>

import { ref } from 'vue';
const showPopover = ref(false);

非受控模式

你可以把 Popover 当做受控组件或非受控组件使用：

• 当绑定 v-model:show 时，Popover 为受控组件，此时组件的显示完全由 v-model:show 的值决定。
• 当未绑定 v-model:show 时，Popover 为非受控组件，此时你可以通过 show 属性传入一个默认值，组件值的显示由组件自身控制。

<z-popover :actions="actions" position="top-start" @select="onSelect">
  <template #reference>
    <z-button type="primary">非受控模式</z-button>
  </template>
</z-popover>

import { ref } from 'vue';
import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()
const actions = [
  { text: '选项一' },
  { text: '选项二' },
  { text: '选项三' },
];
const onSelect = (action) => toast.showToast(action.text);

Props

PopoverAction 数据结构

actions 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象可以包含以下值：

Events

Slots

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。