element-ui popover 组件源码分享
popover 弹出层组件源码,主要从一下四个方面来分享:
1、popover 组件页面结构。
2、popover 组件属性。
3、popover 组件 slot 挂载。
4、popover 组件事件。
一、组件页面结构。
二、组件属性。
2.1 trigger 触发方式,类型为 string,可选值 click/focus/hover/manual,默认值 click。
2.2 title 标题,类型为 string,无默认值。
2.3 content 显示的内容,类型为 string,无默认值。
2.4 width 宽度,类型为 string、number,默认 150px。
2.5 placement 出现的位置,类型为 string,可选值 top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end,默认 bottom。
2.6 disabled popover 是否可用,类型为 boolean,默认 false。
2.7 value / v-model 状态是否可见,类型为 boolean,默认 false。
2.8 offset 出现位置的偏移量,类型为 number,默认 0。
2.9 transition 定义渐变动画,类型为 string,默认 fade-in-linear。
2.10 visible-arrow 是否显示箭头, 类型为 boolean,默认 true。
2.11 popper-options popper.js 的参数,类型为 object,默认 { boundariesElement: 'body', gpuAcceleration: false }。
2.12 popper-class 为 popover 增加类名, 类型为 string,无默认值。
2.13 open-delay 触发方式为 hover 时的显示延迟,单位为毫秒,类型为 number,默认 0。
2.14 close-delay 触发方式为 hover 时的隐藏延迟,单位为毫秒,类型为 number,默认 200。
2.15 tabindex popover 组件的 tabindex,类型为 number,默认为 0。
三、slot 挂载。
2.8 reference 触发 Popover 显示的 HTML 元素。
四、事件。
4.1 show 显示时触发、hide 隐藏时触发。
4.2 after-enter 显示动画播放完毕后触发。
4.4 after-leave 隐藏动画播放完毕后触发。