pkg.module supported
, which means that you can apply tree-shaking in you project
A vue component of popper.js, and the arrow position control is implemented
popper.js
see: https://popper.js.org
https://github.com/livelybone/vue-popper.git
https://livelybone.github.io/vue/vue-popper/
npm i -S @livelybone/vue-popper
import VuePopper from '@livelybone/vue-popper'
// Global register
Vue.component('popper', VuePopper)
// Local register
new Vue({
components:{'popper': VuePopper}
})
Name | Type | DefaultValue | Description |
---|---|---|---|
arrowPosition |
String |
middle |
Set the position of arrow, options: middle start end |
arrowOffsetScaling |
Number |
1 |
Set the left offset scaling of arrow, usually to be window.devicePixelRatio |
referenceElm |
HTMLElement |
parentNode |
Prop reference of popper.js |
popperOptions |
Object |
Defaults of popper.js | Prop options of popper.js |
For building style, you can use the css or scss file in lib directory.
// scss
import 'node_modules/@livelybone/vue-popper/lib/css/index.scss'
// css
import 'node_modules/@livelybone/vue-popper/lib/css/index.css'
Or
// scss
@import 'node_modules/@livelybone/vue-popper/lib/css/index.scss';
// css
@import 'node_modules/@livelybone/vue-popper/lib/css/index.css';
Or, you can build your custom style by copying and editing index.scss