插件名称 | 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,
},