js 超出身略号显示，复制功能

js 超出身略号显示，复制功能

<template><div class="msgWrap" v-if="w, ) !== '--'"><!-- 文字溢出，鼠标悬浮显示内容 --><el-tooltippopper-class="popoverSelf"effect="dark"placement="top"v-if="!isShowTooltip"><div slot="content">{{ w, ) }}</div><div class="ellipsis" @mouseover="onMouseOver">{{ w, ) }}</div></el-tooltip><!-- 文字未溢出 --><div class="ellipsis" @mouseover="onMouseOver" v-if="isShowTooltip">{{ w, ) }}</div><el-linkv-if="w, ) !== '--'"type="primary"class="copyBtn"v-sdcv-clipboard:copy="w, )"v-clipboard:success="onCopy"v-clipboard:error="onError">复制</el-link></div><div v-else>--</div>
</template><script>
export default {props: {scope: {type: Object,},},data() {return {isShowTooltip: false,};},created() {},mounted() {},methods: {onMouseOver(e) {var target = e.target;let textLength = target.clientWidth;let containerLength = target.scrollWidth;if (textLength < containerLength) {// 溢出了this.isShowTooltip = false;} else {this.isShowTooltip = true;}},onCopy() {event.stopPropagation();this.$message.success("复制成功");},onError() {this.$("复制失败");},},
};
</script><style lang="less">
.msgWrap {padding-right: 25px;position: relative;
}.popoverSelf {margin: 70px 0;max-width: 700px;padding: 10px;max-height: 800px;overflow-y: auto;word-break: break-all;white-space: pre-wrap;z-index: 9999;
}
.ellipsis {height: 20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;word-break: break-all;
}
.copyBtn {position: absolute;right: -18px;top: 0;
}
</style>

// 单元格数据转换(当前后端返回数据数据存在</br>，前端页面展示直接换行)
const formatJson = function (row, cellValue) {let newCellValue = cellValue || '';newCellValue = place(/rn/g, '<br/>');if(!newCellValue) {try{let value = JSON.parse(JSON.stringify(JSON.ssage)));newCellValue = (ssage).replace(/rn/g, '<br/>') || '--'}catch(error) {newCellValue = '--'}}return newCellValue
};

换行相关学习可参考

 文本自动换行样式word-break: break-all_菜鸟凯一枚的博客-CSDN博客