亿企邦网站建设做ppt接单的网站

1.需求：需要实现文本单行显示，超出时，使用省略号，划过该文本时使用tooltip显示全部文本。需要考虑数据是由接口动态获取，只有溢出文本鼠标滑过时显示全部文本，没有溢出的则不需要。

2.实现：

第一步：首先要判断文本是否溢出

这里网上可以找到很多方法，我是用scrollWidth去拿到实际文本长度，跟clientWidth文本可视宽度作比较。需要注意的是我遇到了一个问题，即

判断文本溢出之前一定要使用单行文件溢出显示省略号的css，并且要加在tooltip内部要溢出隐藏的span上，不然scrollWidth和clientWidth会一直为0

 onMouseOver(event) {const ev = event.target;const evWeight = ev.scrollWidth;const contentWidth = ev.clientWidth;if (evWeight > contentWidth) {this.isShowTooltip = false;} else {this.isShowTooltip = true;}},

    <el-row v-for="(row, rowIndex) in djnumberOfRows" :key="rowIndex"><el-colv-for="(column, colIndex) in row.length":key="colIndex":span="calculateSpan(row, rowIndex, djnumberOfRows.length, colIndex)"><template v-if="row[colIndex]"><el-form-item class="radioClass" :label="row[colIndex].name"><el-tooltip:content="djForm ? djForm[row[colIndex].fieldskey] : ''":disabled="isShowTooltip"placement="top"><div@mouseover="onMouseOver($event)"style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ djForm ? djForm[row[colIndex].fieldskey] : '' }}   //之前我在这里包了一层span，是错误的，会导致拿到的不准，有的是0，有的地方不是，因为span有范围。为什么会在这加一层span，用div，因为省略号</div></el-tooltip></el-form-item></template></el-col></el-row>

补充：（未试）

methods: {onMouseOver (str) { // 内容超出，显示文字提示内容const tag = this.$refs[str]const parentWidth = tag.parentNode.offsetWidth // 获取元素父级可视宽度const contentWidth = tag.offsetWidth // 获取元素可视宽度this.isShowTooltip = contentWidth <= parentWidth}
}