插件名称 | Slick-popover |
---|---|
发布时间 | 2020年4月25日 |
插件作者 | mateuszRybczonek |
slick-popover是Vue.js组件,可将交互式的动画Popover附加到任何DOM元素。
# NPM
$ npm install vue-slick-popover --save
1.在项目中导入组件和样式表。
import "vue-slick-popover/dist/vue-slick-popover.css"
import { VueSlickPopover, VueSlickPopoverContent } from "vue-slick-popover"
2.注册组件。
export default {
components: {
VueSlickPopover,
VueSlickPopoverContent
}
}
3.在模板中与触发器元素一起创建一个弹出框组件。
<template>
<div>
<img ref="popoverReference" width="20%" src="trigger.png" @click="openPopover">
<VueSlickPopover
v-if="isPopoverVisible"
:popover-options="popoverOptions"
@closePopover="closePopover"
>
<VueSlickPopoverContent>
<p @closePopover="closePopover">Popover Content Here</p>
</VueSlickPopoverContent>
</VueSlickPopover>
</div>
</template>
4.激活组件。
data() {
return {
isPopoverVisible: false,
popoverOptions: {
// options here
}
}
},
mounted() {
this.popoverOptions.popoverReference = this.$refs.popoverReference
},
methods: {
closePopover() {
this.isPopoverVisible = false
},
openPopover() {
this.isPopoverVisible = true
}
}
5.可能的选项来自定义弹出窗口。
popoverOptions: {
animation: "scale-fade",
placement: "top",
offset: "0,0"
}