Vue 创建弹出窗口和工具提示组件 – popper-vue

Vue 创建弹出窗口和工具提示组件 – popper-vue
插件名称 popper-vue
发布时间 2021年4月19日
插件作者 Silverium

Popper是一个Vue.js组件,用于在应用程序上创建可自定义的工具提示和类似popover的弹出窗口。基于Popper.js库。

安装和下载:

# Yarn
$ yarn add @soldeplata/popper-vue

# NPM
$ npm i @soldeplata/popper-vue

使用

1.导入并注册组件。

import PopperVue from '@soldeplata/popper-vue';
export default {
  components: {
    PopperVue,
  },
};

2.创建一个基本的弹出框组件,如下所示:

<PopperVue
  :options="options"
>
  <button @click="show = !show">
    Click me
  </button>
  <template #popper>
    I am the popper element
  </template>
</PopperVue>

3.可用的组件道具。

arrow: {
  type: Boolean,
  default: false,
},
arrowClass: {
  type: [Object, Array, String],
  default: undefined,
},
/**
 * Any options should follow popper documentation
 * https://popper.js.org/docs/v2/
 */
options: {
  type: Object,
  default: () => {},
},
popperClass: {
  type: [Object, Array, String],
  default: undefined,
},
show: {
  type: Boolean,
  default: false,
},