0.1.10 • Published 3 years ago
@weier/w-popover
- 基于第三方vue-js-popover进行修改
- 主要修改点为:优化hover事件,在hover到 popover 的时候,popover 不消失
// 安装
npm i @weier/w-popover -S
// 代码引入(可选)
import Vue from 'vue'
import Popover from '@weier/w-popover'
Vue.use(Popover)
基础用法
<button v-popover:foo>Toggle popover</button>
<popover name="foo">
Hello
</popover>
// or
<button v-popover="{
name: `foo`,
position: 'top'
}">Toggle popover</button>
w-popover Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| name | popover名称,唯一 | String | - | |
| width | popover宽度 | Number | - | |
| transition | 动画名称 -- vuetransition实现模式 | String | - | |
| pointer | If set - will show a tiny tip | Boolean | - | |
| event | Type of event that will trigger showing of the popover | "click" | "hover" | - | |
| delay | Delay in milliseconds | Number | - | |
| hoverHideDelay | hover时隐藏延时 | Number | - | 0 |
w-popover Events
| 事件名称 | 说明 | 参数 |
|---|
| show | popover显示 | {target: 触发媒介, name: popover name, position: 箭头方向} |
| hide | popover消失 | {target: 触发媒介, name: popover name, position: 箭头方向} |
其他
作者:基础建设组-尘寂