Vue 3 的 Popover 组件 – vue3-popper

Vue 3 的 Popover 组件 – vue3-popper
插件名称 valgeirb
版本号 v1.2.0
发布时间 2021年7月7日
插件作者 vue3-popper

Vue 3 的一个简单但可定制和主题化的弹出组件。基于已知的PopperJS库。

安装和下载:

# Yarn
$ yarn add vue3-popper

# NPM
$ npm i vue3-popper --save

使用

1. 导入并注册组件。

import { defineComponent } from "vue";
import Popper from "vue3-popper";
export default defineComponent({
  components: {
    Popper,
  },
});

2.在模板中添加popover组件。

<template>
  <Popper>
    <button>Click me</button>
    <template #content>
      <div>这是 Popper 内容</div>
    </template>
  </Popper>
</template>

3. 提供自定义弹窗组件的道具。

/**
 * 首选展示位置(“自动”展示位置将选择空间最大的一侧。)
 */
placement: {
  type: String,
  default: "bottom",
  validator: function(value) {
    return [
      "auto",
      "auto-start",
      "auto-end",
      "top",
      "top-start",
      "top-end",
      "bottom",
      "bottom-start",
      "bottom-end",
      "right",
      "right-start",
      "right-end",
      "left",
      "left-start",
      "left-end",
    ].includes(value);
  },
},
/**
 * 当用户点击它时禁用自动关闭弹出窗口
 */
disableClickAway: {
  type: Boolean,
  default: false,
},
/**
 * 沿触发元素的距离(以像素为单位)
 */
offsetX: {
  type: String,
  default: "0",
},
/**
 * 与触发元素的距离(以像素为单位)
 */
offsetY: {
  type: String,
  default: "12",
},
/**
 * 在悬停时触发 popper
 */
hover: {
  type: Boolean,
  default: false,
},
/**
 * 在弹出框上显示一个箭头
 */
arrow: {
  type: Boolean,
  default: false,
},
/**
 * 阻止箭头到达 popper 的边缘
 */
arrowPadding: {
  type: String,
  default: "0",
},

4. 事件。

  • @open:popper
  • @close:popper

变更日志:

v1.2.0 (07/27/2021)

  • 添加 zIndex 属性来设置 Popper 的 z-index

v1.1.0 (07/22/2021)

  • 添加 show prop 来手动控制 Popper

v1.0.0 (07/15/2021)

  • 更新道具

v0.5.0 (07/14/2021)

  • 提供 isOpen 作为作用域插槽属性

v0.4.0 (07/09/2021)

  • 插槽内容已定义/未定义时的正确反应
  • 修复“关闭插槽属性未定义”错误

v0.3.0 (07/08/2021)

  • 添加了更多道具。

v0.2.3 (07/07/2021)

  • 错误修正