element checkbox label文字超出出现省略号,并移入出现全部文字

615 阅读1分钟

思路:
css:label溢出隐藏,出现省略号代码自行百度
html结构:


<el-checkbox :name="item.identifying" :label="item.neirong">
    <el-tooltip placement="top" :disabled="item.showTooltipname" :content="item.neirong">
	<div 
             class="myNote" 
             @mouseenter="showToopltip($event, item, 'neirong','showTooltipname')"
	>{{ item.neirong }}</div>
    </el-tooltip>
  </el-checkbox>

js逻辑思路:

  1. js移入事件 mouseenter 获取当前移入的元素
  2. 封装函数动态获取当前移入的label的宽度也就是checkbox文字部分
  3. 动态创建span span里面的文本就是label的文本,并获取宽度
  4. 动态拿到的label宽度和span的宽度对比
  5. 如果span的宽度大于label的宽度 就让Tooltip组件 disabled属性为false 反之true js逻辑代码:
export const showToopltip = (obj, row, columnName, show) => {
    /*obj为鼠标移入时的事件对象*/
    /*currentWidth 为文本在页面中所占的宽度,创建标签,加入到页面,获取currentWidth ,最后在移除*/
    * @enum columnName 表示显示的变量
    * @enum show toopltip disabled属性的变量
    */
    if (row[columnName]) { //如果为空值的话 不用再创建dom元素 影响性能\
    let TemporaryTag = document.createElement("span");
    TemporaryTag.innerText = row[columnName];
    TemporaryTag.className = "getTextWidth";
    document.querySelector("body").appendChild(TemporaryTag);
    let currentWidth = document.querySelector(".getTextWidth").offsetWidth;
    document.querySelector(".getTextWidth").remove();
    const cellWidth = obj.target.parentNode.offsetWidth;
    currentWidth <= cellWidth + 10 ? (row[show] = true) : (row[show] = false);
    } else {
        row[show] = true;
        }
};