怎么制作网站模板,公司网站开发服务费属于无形资产哪一类,谷歌优化软件,六安人论坛最新招聘信息Popover 的属性与 Tooltip 很类似#xff0c;它们都是基于Vue-popper开发的#xff0c;因此有重复属性 1.如何使用#xff1f;
/*trigger属性用于设置何时触发 Popover#xff0c;支持四种触发方式#xff1a;
hover#xff0c;click#xff0c;focus 和 manual。
对于… Popover 的属性与 Tooltip 很类似它们都是基于Vue-popper开发的因此有重复属性 1.如何使用
/*trigger属性用于设置何时触发 Popover支持四种触发方式
hoverclickfocus 和 manual。
对于触发 Popover 的元素有两种写法使用 slotreference
的具名插槽或使用自定义指令v-popover指向 Popover 的索引ref。*/templateel-popoverplacementtop-starttitle标题width200triggerhovercontent这是一段内容,这是一段内容,这是一段内容,这是一段内容。el-button slotreferencehover 激活/el-button/el-popoverel-popoverplacementbottomtitle标题width200triggerclickcontent这是一段内容,这是一段内容,这是一段内容,这是一段内容。el-button slotreferenceclick 激活/el-button/el-popoverel-popoverrefpopoverplacementrighttitle标题width200triggerfocuscontent这是一段内容,这是一段内容,这是一段内容,这是一段内容。/el-popoverel-button v-popover:popoverfocus 激活/el-buttonel-popoverplacementbottomtitle标题width200triggermanualcontent这是一段内容,这是一段内容,这是一段内容,这是一段内容。v-modelvisibleel-button slotreference clickvisible !visible手动激活/el-button/el-popover
/templatescriptexport default {data() {return {visible: false};}};
/script
2.嵌套信息 Popover 中可以嵌套多种类型信息
利用分发取代content属性el-popoverplacementtopwidth400triggerclickel-table :datagridDatael-table-column width150 propertydate label日期/el-table-columnel-table-column width100 propertyname label姓名/el-table-columnel-table-column width300 propertyaddress label地址/el-table-column/el-tableel-button slotreferenceclick 激活/el-button
/el-popoverscriptexport default {data() {return {gridData: [{date: 2016-05-02,name: 王xx,address: 北京市普陀弄}, {date: 2016-05-04,name: 王xy,address: 天津 1518 弄}, {date: 2016-05-01,name: 王二狗,address: 普陀区金沙江路 1518 弄}]};}};
/script
3.嵌套操作
也可以嵌套操作这相比 Dialog 更为轻量
el-popoverplacementtopwidth160v-modelvisiblepAre you OK/pdiv styletext-align: right; margin: 0el-button sizemini typetext clickvisible false取消/el-buttonel-button typeprimary sizemini clickvisible false确定/el-button/divel-button slotreference删除/el-button
/el-popoverscriptexport default {data() {return {visible: false,};}}
/script
上述即为popover组件的大致内容想要深入浅出可以移步弹出框
