ElementUI的提示框的使用記錄

1、popover點擊之后隱藏

　　問題描述：做了一個通知面板功能，下面提示信息有路由，每次點擊消息呢，就跳轉到了路由頁面，但是此時這個面板沒關閉，希望將其關閉

　　解決：官方文檔有個屬性

<div>
  <el-popover popper-class="messagePopper" placement="bottom" width="300" v-model="visiblity" trigger="click">
    <div class="messageBox">
      <div class="title">通知</div>
      <div class="message" v-if="messageData.length === 0">暫無通知</div>
      <div v-else>
      <div class="message" v-for="item in messageData" @click="readMessage(item.id)">
        <router-link :to="{
 name:item.route, params:{ messageId:item.rid } }">{{'【' + item.message + '】'}}</router-link>
        <span>{{item.message_time}}</span>
      </div>
      </div>
    </div>
    <el-badge slot="reference" :value="messageData.length" class="item" :hidden="messageData.length === 0">
      <i class="messageStyle iconfont icon-tongzhi"></i>
      <span class="messageText">通知</span>
    </el-badge>
  </el-popover>
</div>

　　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就行了，但是發現不行，必須左右都設置才行，這點一直沒搞明白為什么。