方法一 使用自定义指令v-popover指向 Popover 的索引ref
<el-popoverref="popover1"width="200"trigger="click"placement="top"content="这是一段内容1"></el-popover><el-button v-popover:popover1>click 激活1</el-button><el-popoverref="popover2"width="200"trigger="click"placement="top"content="这是一段内容2."></el-popover><el-button v-popover:popover2>click 激活2</el-button>
方法二
<el-popoverplacement="top"width="200"trigger="click"content="这是一段内容1。"><el-button slot="reference">click 激活1</el-button></el-popover><el-popoverplacement="top"width="200"trigger="click"content="这是一段内容2。"><el-button slot="reference">click 激活2</el-button></el-popover>
placement=“bottom”placement出现位置 可选 top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end
trigger=“click”trigger属性用于设置何时触发 Popover,支持四种触发方式:hover,click,focus 和 manual。
popper-class为 popper 添加类名 el-popover 生成的div 不在App.vue组件的div内,与App.vue组件的div平级,需要设置全局style.
为了防止全局样式污染针对每一个popover-class 设置样式即可
注意:1.使用popper-class 定义样式信息,2.创建对应的css的class.el-popover.my-class 这种格式,前缀是.el-popover ,不然不生效。
.el-popover.popper1{color: #42b983;}.el-popover.popper2{color:red;}