vue框架elemnet-ui中Popover弹出框的使用

vue框架elemnet-ui中Popover弹出框的使用

**

一、如何修改内置的el-popover样式（亲测有效）

**
1、在vue页面文件中使用el-popover组件时，在style标签中设置样式无效；
解决方案：el-popover比较特殊，它生成的div不在当前组件之内，是和App.vue组件的div平级，需要设置全局style，或者是在当前页面的style标签中去掉scoped，再或者是在当前页面再写一个style标签，将el-popover组件的样式独立写在这个没有scoped的style标签中，即可生效；

2、如果整个项目中用到多个el-popover组件并且样式不一样时，怎么能避免污染全局样式；
解决方案：官方文档中有提到为 popper 添加类名属性：popper-class，所以当出现多个el-popover时，就要管理好popper-class的类名属性，避免污染全局

二、如何控制隐藏显示el-popover组件

v-model=“visible” 在data中为visible设置初始状态， 控制el-popover组件状态是否可见

上代码：

html部分：

<template>
	<el-popover placement="bottom"  trigger="manual" v-model="visible" popper-class="tree_2"> 
		11111
	</el-popover>
</template>

css部分：

<script>
export default {
    data(){
    	return{
    		visible:false
    	}
    }
}
</script>

JS部分：

<style>
	.tree_2{
  		background-color: rgba(10,127,180,0.2);
  }
</style>