vue-popper
A popper mixin for Vue.js using popper.js.
Demo
https://element-component.github.io/vue-popper/
Usage
import Popper from 'vue-popper'
export default {
mixins: [Popper],
props: {
content: String,
visibleArrow: {
default: true
}
},
template: `
<span>
<div class="popper" v-el:popper v-show="visible">
<span v-text="content"></span>
</div>
<div class="rel" v-el:reference>
<slot></slot>
</div>
</span>
`
}API
| Option | Description | Value | Default |
|---|---|---|---|
| reference | The reference element used to position the popper. | HTMLElement | this.$els.reference |
| popper | The HTML element used as popper, or a configuration used to generate the popper. | HTMLElement | this.$els.popper |
| placement | Placement of the popper. |
top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end
|
'bottom' |
| offset | Amount of pixels the popper will be shifted (can be negative). | Number | 0 |
| visible | Visibility of the popup element. | Boolean | false |
| visible-arrow | Visibility arrow, no style. | Boolean | false |
| autoCreate | auto init popper | Boolean | true |
| created | create popper after callback | Function(vm) |
Methods
- createPopper
Development
make devProduction
make dist
License
MIT
