基础用法
Popover 的属性与 Tooltip 很类似,它们都是基于Vue-popper开发的,因此对于重复属性,请参考 Tooltip 的文档,在此文档中不做详尽解释。
设置索引ref,在按钮中,我们注册了自定义指令v-popover,指向索引ID。trigger属性用于设置何时触发 Popover ,提供三种触发方式:hover, click 和 focus。第二种用法通过 slot 指定 reference。
1 <el-popover 2 ref="popover1" 3 placement="top-start" 4 title="标题" 5 width="200" 6 trigger="hover" 7 content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"> 8 </el-popover> 9 10 <el-popover 11 ref="popover2" 12 placement="bottom" 13 title="标题" 14 width="200" 15 trigger="click" 16 content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"> 17 </el-popover> 18 19 <el-button v-popover:popover1>hover 激活</el-button> 20 <el-button v-popover:popover2>click 激活</el-button> 21 <el-popover 22 placement="right" 23 title="标题" 24 width="200" 25 trigger="focus" 26 content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"> 27 <el-button slot="reference">focus 激活</el-button> 28 </el-popover>