vue-popper | 一款基于Popper.js的vue弹出框组件

vue-popper是一款基于popper.js的vue弹出框组件。它使用vue组件的方式对Popper.js进行了一层封装，保留了Popper.js的功能和主题。

使用方法

安装

如果您想使用vue-popper弹出框组件，首先您需要安装它，命令如下：

npm install vue-popperjs --save
// Yarn
yarn add vue-popperjs
// Bower
bower install vue-popperjs --save
		

使用

然后在你需要的地方使用它

<template>
  <popper
    trigger="clickToOpen"
    :options="{
      placement: 'top',
      modifiers: { offset: { offset: '0,10px' } }
    }">
    <div class="popper">
      Popper Content
    </div>

    <button slot="reference">
      Reference Element
    </button>
  </popper>
</template>

<script>
  import Popper from 'vue-popperjs';
  import 'vue-popperjs/dist/vue-popper.css';

  export default {
    components: {
      'popper': Popper
    },
  }
</script>
		

在浏览器页面中使用：

<link rel="stylesheet" href="vue-popper.css">
<script type="text/javascript" src="popper.js"></script>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-popper.js"></script>

<div id="app">
  <popper
    trigger="clickToOpen"
    :options="{
      placement: 'top',
      modifiers: { offset: { offset: '0,10px' } }
    }">
    <div class="popper">
      Popper Content
    </div>

    <button slot="reference">
      Reference Element
    </button>
  </popper>
</div>

<script type="text/javascript">
  new Vue({
    el: '#app',
    components: {
      'popper': VuePopper
    }
  });
</script>			
		

配置参数

• disabled: 弹出式窗口是否禁用，默认为false。
• delay-on-mouse-over: 鼠标悬停时显示弹出式窗口的延迟时间（以毫秒为单位），默认为10毫秒。
• delay-on-mouse-out: 鼠标移开时隐藏弹出式窗口的延迟时间（以毫秒为单位），默认为10毫秒。
• append-to-body: 弹出式窗口是否附加到文档主体上，默认为false。
• visible-arrow: 是否显示弹出式窗口的箭头，默认为true。
• force-show: 是否强制显示弹出式窗口，默认为false。
• trigger: 触发弹出式窗口的事件类型，可选值有：hover、clickToOpen、clickToToggle、click（已弃用，与clickToToggle相同）、focus。
• content: 弹出式窗口的内容，默认为null。
• enter-active-class: 进入时动画类名，默认为null。
• leave-active-class: 离开时动画类名，默认为null。
• boundaries-selector: 弹出式窗口的边界选择器，默认为null。
• transition: 动画过渡效果，默认为空字符串。
• options: popper.js的选项对象，包括placement和gpuAcceleration两个属性，默认值分别为'bottom'和false。 data-value: 弹出式窗口的数据，默认为null。
• stop-propagation: 是否停止事件传播，默认为false。
• prevent-default: 是否阻止默认事件行为，默认为false。
• root-class: 弹出式窗口根元素的类名，默认为空字符串。

事件和方法

• created: 在创建弹出式窗口组件时调用的方法，接受一个context对象作为参数。
• show: 显示弹出式窗口的方法。
• hide: 隐藏弹出式窗口的方法。
• document-click: 弹出式窗口之外的文档被点击时触发的事件。

github网址：https://github.com/RobinCK/vue-popper