Popover 弹出框

基础用法

<template>
  <PlusPopover placement="top-start" trigger="hover" title="Title" :width="200">
    this is content, this is content, this is content
    <template #reference>
      <el-button class="mgb-10 mgr-10">Hover to activate</el-button>
    </template>
  </PlusPopover>

  <PlusPopover
    placement="bottom"
    title="Title"
    :width="200"
    trigger="click"
    content="this is content, this is content, this is content"
  >
    <template #reference>
      <el-button class="mgb-10 mgr-10">Click to activate</el-button>
    </template>
  </PlusPopover>

  <PlusPopover
    title="Title"
    :width="200"
    trigger="contextmenu"
    content="this is content, this is content, this is content"
  >
    <template #reference>
      <el-button class="mgb-10 mgr-10">Contextmenu to activate</el-button>
    </template>
  </PlusPopover>

  <PlusPopover :visible="visible" placement="bottom" title="Title" trigger="click" :width="200">
    this is content, this is content, this is content
    <template #reference>
      <el-button class="mgb-10" @click="visible = !visible">Manual to activate</el-button>
    </template>
  </PlusPopover>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const visible = ref(false)
</script>

<style lang="scss" scoped>
.mgb-10 {
  margin-bottom: 10px;
}
.mgr-10 {
  margin-right: 10px;
}
</style>

内容可扩展

<template>
  <PlusPopover placement="bottom" :width="150" trigger="click">
    <div class="plus-table-toolbar__density">
      <el-button
        v-for="item in buttonNameDensity"
        :key="item.size"
        :plain="defaultSize !== item.size"
        type="primary"
        size="small"
      >
        {{ item.text }}
      </el-button>
    </div>

    <template #reference>
      <el-button class="mgr-10">密度</el-button>
    </template>
  </PlusPopover>

  <PlusPopover placement="right" :width="400" trigger="click">
    <template #reference>
      <el-button>Click to activate</el-button>
    </template>
    <el-table :data="gridData">
      <el-table-column width="150" property="date" label="date" />
      <el-table-column width="100" property="name" label="name" />
      <el-table-column width="300" property="address" label="address" />
    </el-table>
  </PlusPopover>
</template>

<script lang="ts" setup>
import type { ComputedRef } from 'vue'
import { ref } from 'vue'
import type { ComponentSize } from 'element-plus/es/constants'

export interface ButtonNameDensity {
  size: ComponentSize
  text: string | ComputedRef<string>
}

const defaultSize = ref('default')

const buttonNameDensity: ButtonNameDensity[] = [
  {
    size: 'default',
    text: '默认'
  },
  {
    size: 'large',
    text: '宽松'
  },
  {
    size: 'small',
    text: '紧凑'
  }
]

const gridData = [
  {
    date: '2016-05-02',
    name: 'Jack',
    address: 'New York City'
  },
  {
    date: '2016-05-04',
    name: 'Jack',
    address: 'New York City'
  },
  {
    date: '2016-05-01',
    name: 'Jack',
    address: 'New York City'
  },
  {
    date: '2016-05-03',
    name: 'Jack',
    address: 'New York City'
  }
]
</script>

<style lang="scss" scoped>
.mgr-10 {
  margin-right: 10px;
}
</style>

虚拟触发

<template>
  <el-button ref="buttonRef" v-click-outside="onClickOutside">Click me</el-button>

  <PlusPopover
    ref="popoverRef"
    :virtual-ref="buttonRef"
    trigger="click"
    title="With title"
    virtual-triggering
  >
    <span> Some content </span>
  </PlusPopover>
</template>

<script lang="ts" setup>
import { ref, unref } from 'vue'
import { ClickOutside as vClickOutside } from 'element-plus'

const buttonRef = ref()
const popoverRef = ref()
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.()
}
</script>

嵌套操作

<template>
  <PlusPopover
    :visible="visible"
    placement="top"
    :width="160"
    has-show-bottom-button
    @confirm="confirm"
    @cancel="cancel"
  >
    <p>Are you sure to delete this?</p>
    <template #reference>
      <el-button @click="visible = !visible">Delete</el-button>
    </template>
  </PlusPopover>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const visible = ref(false)

const confirm = () => {
  console.log('confirm')
}

const cancel = () => {
  console.log('cancel')
}
</script>

Popover API

Popover Attributes

名称	说明	类型	默认值	是否必须
visible	Popover 是否显示	boolean	false	否
hasShowBottomButton	是否显示底部按钮	boolean	false	否
...	...	...	...	...

...表示同时支持所有 ElPopover Attributes

Popover Events

名称	说明	类型
show	显示时触发	function
confirm	点击确定按钮触发	function
cancel	点击取消按钮触发	function
...	...	...

...表示同时支持所有 ElPopover Attributes

Popover Slots

插槽名	说明
...	...

...表示同时支持所有 ElPopover Attributes