昌乐建设局网站,网络系统架构,大一网站开发项目答辩,大连做企业网站排名1.需求#xff1a;需要实现文本单行显示#xff0c;超出时#xff0c;使用省略号#xff0c;划过该文本时使用tooltip显示全部文本。需要考虑数据是由接口动态获取#xff0c;只有溢出文本鼠标滑过时显示全部文本#xff0c;没有溢出的则不需要。
2.实现#xff1a;
第…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 :keyrowIndexel-colv-for(column, colIndex) in row.length:keycolIndex:spancalculateSpan(row, rowIndex, djnumberOfRows.length, colIndex)template v-ifrow[colIndex]el-form-item classradioClass :labelrow[colIndex].nameel-tooltip:contentdjForm ? djForm[row[colIndex].fieldskey] : :disabledisShowTooltipplacementtopdivmouseoveronMouseOver($event)stylewhite-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}
}
