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
https://github.com/livelybone/vue-popper.git
https://livelybone.github.io/vue/vue-popper/
Your can see the usage by run the example of the module, here is the step:
- Clone the library
git clone https://github.com/livelybone/vue-popper.git
- Go to the directory
cd your-module-directory
- Install npm dependencies
npm i
(use taobao registry:npm i --registry=http://registry.npm.taobao.org
) - Open service
npm run dev
- See the example(usually is
http://127.0.0.1:3000/examples/test.html
) in your browser
npm i -S @livelybone/vue-popper
VuePopper
See what method or params you can use in index.d.ts
import VuePopper from '@livelybone/vue-popper'
import '@livelybone/vue-popper/lib/css/index.css';
// Global register
Vue.component('VuePopper', VuePopper)
// Local register
new Vue({
components:{VuePopper}
})
Name | Type | DefaultValue | Description |
---|---|---|---|
arrowPosition |
String |
middle |
Set the position of arrow, options: middle start end |
arrowOffsetScaling |
Number |
window.devicePixelRatio or 1 |
Set the left offset scaling of arrow |
referenceElm |
HTMLElement |
the parentNode of the component instance | Prop reference of popper.js |
popperOptions |
Object |
Defaults of popper.js | Prop options of popper.js |
Since 2.3.0, you don't need to import the css file in your project, because the style will be injected inline
For rewrite style, you can copy the index.scss
or index.css
file, rewrite it, and the import the file in your project
- Error
Error: spawn node-sass ENOENT
You may need install node-sass globally,
npm i -g node-sass