1、popover点击之后隐藏

　　问题描述：做了一个通知面板功能，下面提示信息有路由，每次点击消息呢，就跳转到了路由页面，但是此时这个面板没关闭，希望将其关闭

　　解决：官方文档有个属性

     
  
          
       
      
        
         通知
        
      
        
         暂无通知
        
      
        
      
         
        
          
           { {'【' + item.message + '】'}}
                  
          { {item.message_time}}      
         
      
        
    
       
    
             
              
        通知    
         
      
     

　　v-model="visiblity"，visiblity默认给false，点击之后popover显示的话，应该是true了，再点击下面消息时，再给它设为false，消息面板就隐藏了

2、tooltip设置为light后，总是有一个黑框，想要去掉

　　解决方案：修改其默认样式

　　看了一下像elementUI的tooltip、popover这种渲染出来的元素都是在body下面一层，所以你在组件里面去加样式发现根本不生效，所以需要到App.vue里面去加

　　（1）给tooltip加上popper-class="tips"自定义样式

　　（2）改变边框为灰色

.el-tooltip__popper.is-light.tips{  border 1px solid #eee}//改变边框，宽度，文字换行.el-tooltip__popper.is-light.tooltipStyle{  border 1px solid #eee  width 80px  word-break break-all}

　　（3）通过上面两步只能改变内容区的边框，但是你会发现箭头还有个黑框去不掉，很恶心

　　解决方案：

.el-tooltip__popper.is-light.tips .popper__arrow{  border-color #ddd transparent  //placement="top"时}.el-tooltip__popper.is-light.tooltipStyle .popper__arrow{  border-color transparent #ddd  //placement="left/right"时}

　　其实那个箭头的黑框是因为箭头给了个border-width:6px，箭头样式的:after给了个border-width:5px，after覆盖了，所以出了个黑框效果，调了好久才找到。

　　改这个问题最重要的是：border-color的上下、左右必须成对出现才可以，否则是不行的。理论上来说，只需要设置border-right-color:#eee就行了，但是发现不行，必须左右都设置才行，这点一直没搞明白为什么。