slick-popover是Vue.js组件，可将交互式的动画Popover附加到任何DOM元素。

安装:

# NPM
$ npm install vue-slick-popover --save

更多功能：

• 12个职位
• 2种动画：淡入淡出，缩放淡入
• 自定义偏移量。

使用：

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.可能的选项来自定义弹出窗口。

• animation（动画）: null, scale-fade,fade
• placement（放置）: top, top-start, top-end, right, right-start, right-end, bottom, bottom-start, bottom-end, left, left-start, left-end

popoverOptions: { 
  animation: "scale-fade",
  placement: "top",
  offset: "0,0"
}

---

官网：https://github.com/mateuszRybczonek/vue-slick-popover

演示：https://www.vue365.cn/code_demo.php?id=326

GitHub下载：https://github.com/mateuszRybczonek/vue-slick-popover/archive/master.zip