2021-05-28

关于elemen-ui的文字提示的使用技巧

主要是使用<el-tooltip content="Top center" placement="top"></el-tooltip> 标签,包裹想要文字提示的标签：如下

                <el-tooltip
                  effect="dark"
                  placement="right-start"
                  :visible-arrow=false
                >
               <div class="item" v-html="scope.row.remark" slot="content"></div>
                <div class="oneLine">{{scope.row.remark}}</div>
                  <span
                    class="el-icon-warning"
                  ></span>
                </el-tooltip>

effect :设置提示的主题颜色，
placement :设置文字提示的方向和位置：上下左右-开始/结束
visible-arrow ：这里设置是否显示箭头，默认是ture,由于需求，我设置成false.注意：设置为false时， 一定要动态绑定，也就是前面加: 冒号，这样才能生效
如果想要文字换行显示，还需要把content写成插槽的形式，这样文字才可以换行，否则会一直是一行

.item{
  width: 60px;
}
.oneLine {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

给父元素设置固定的宽，给文字本身设置换行，这样就可以实现换行了，
设置背景色以及文字颜色，可以直接找到类名，进行css设置

.el-tooltip__popper.is-dark{
  background-color: rgba(	105,105,105, .7);
  color: #fff;
}

最后我写后的效果是这样的

以上就是tooltip的大致使用：文字换行，修改背景色，去掉箭头