ElementUI的提示框的使用记录

Posted 2020-11-19 goloving

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就行了，但是发现不行，必须左右都设置才行，这点一直没搞明白为什么。