v-popper
vue components base on popper.js
Install
npm install v-popper --saveUsage
<template> <div class="demo"> <popper trigger="click"> content <button type="button" name="button" slot="reference">click me</button> </popper> </div></template> <script>import Popper from 'v-popper';export default { components: { Popper }};</script>Props
| Props | Type | Default | Description |
|---|---|---|---|
| trigger | String | hover | Optional value: hover or click |
| options | Object | { placement: 'bottom' } | Popper.js options |
| transition | String | Vue transition | |
| append-to-body | Boolean | false | |
| boundary | String | Selector of boundary | |
| delay | Number | 10 | Delay of show and hide |
| offset | String | Offset of popper | |
| disabled | Boolean | false | |
| z-index | Number | 10 | z-index of popper |
Attention
Props transition will not work correctly if transition class contains css such as:
);or:
Because popper.js use transform in style.