700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > vue + element插件Popover弹出框

vue + element插件Popover弹出框

时间:2019-09-22 14:03:28

相关推荐

vue + element插件Popover弹出框

方法一 使用自定义指令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;}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。