popper.min.js_Popper.js插件的简单Vue.js组件

popper.min.js

vue-popper组件 (vue-popper-component)

Simple Vue.js component for Popper.js plugin.

Popper.js插件的简单Vue.js组件。

View demo 查看演示 Download Source 下载源

依存关系： (Dependencies:)

• Vue 1.*

  Vue 1. *

• Popper.js 1.*

  Popper.js 1. *

用法： (Usage:)

const
	Vue = require('vue'),
  VuePopper = require('vue-popper-component');
	
new Vue({
  el: '#app',
  
  components: {
    'popper': VuePopper
  },
  
  data: {
    showPopperParentVar: true
  }
});

<popper
	:show-popper.sync="showPopperParentVar"
	content="Some plain text message here"
	placement="right"
	close-button="Close me!">
    
    <span @click.prevent="showPopperParentVar = !showPopperParentVar">
      ?
    </span>
    
</popper>

插槽中html的用法： (Usage with html in slots:)

<popper
  :show-popper.sync="showPopperParentVar"
  content="Lorem ipsum dolor"
  placement="top"
  close-button="1">
  
    <div slot="close-button">
      <i class="glyphicon glyphicon-remove"></i>
    </div>
    
    <div slot="content">
      <h2><i class="glyphicon glyphicon-star"></i> <b>us</b> <i>on</i> <u>github</u>!</h2>
      <a @click.prevent="showPopperParentVar = false" href="#">Close this popover from the content!</a>
    </div>
  
    <button class="btn btn-default" @click.prevent="showPopperParentVar = !showPopperParentVar">
      Click to open popover on the bottom
    </button>
</popper>

翻译自: https://vuejsexamples.com/simple-vue-js-component-for-popper-js-plugin/

popper.min.js