开源展示型网站,惠州建站方案,春季高考网站建设,832网络销售平台示例#xff1a; 固定显示宽度#xff0c;溢出显示...#xff0c;利用了css的属性#xff0c;想要实现成下面这样#xff1a; 针对溢出的文字#xff0c;hover显示全部。
提示很好加#xff0c;使用tooltip组件就行了#xff0c;难点是如何判断是否发生了文字溢出。…示例 固定显示宽度溢出显示...利用了css的属性想要实现成下面这样 针对溢出的文字hover显示全部。
提示很好加使用tooltip组件就行了难点是如何判断是否发生了文字溢出。
利用dom元素的可视宽度 clientWidth 和实际宽度 scrollWidth 不同就可以比较出是否发生了文字溢出。 实际宽度 可视宽度 文字溢出 那么就可以依此来判断如下图所示给各行增加ref属性鼠标移入时判断是否显示对应行的提示信息。 我这里之所以鼠标移入时触发计算是因为我卡片的宽度是动态变化的若你那块内容宽度固定可以在数据获取完成之后直接计算showTooltipObj的值。
全部代码如下图所示
templatediv classcardulli v-for(item, index) in rows :keyitem.key classcontentb{{ item.label }}/bel-tooltipeffectdarkplacementtop:disabled!showTooltipObj[index]max-width600pxdiv slotcontentspan{{ data[item.key] || -- }}/span/divspan:refrowValue${index}classvaluemouseentermouseenterFn(index)span{{ data[item.key] || -- }}/span/span/el-tooltip/li/ul/div
/templatescript
export default {// eslint-disable-next-line vue/multi-word-component-namesname: Card,data() {// 这里存放数据return {rows: [{label: 姓名,key: name,},{label: 年龄,key: age,},{label: 爱好,key: hobby,}],data: {name: 张三,age: 10,hobby: 吃饭、睡觉、打篮球、玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩玩,},showTooltipObj: {},};},methods: {mouseenterFn(index) {this.$nextTick(() {const dom this.$refs[rowValue${index}][0];let flag false;// 实际宽度 可视宽度 文字溢出if (dom.scrollWidth dom.clientWidth) {flag true;}this.$set(this.showTooltipObj, index, flag);});},},
};
/script
style langscss scoped
.card {margin: 40px;width: 400px;box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.16);border: 1px solid #d7d7d7;box-sizing: border-box;padding: 20px 0;li.content {margin: 0 20px;line-height: 22px;display: flex;b {white-space: nowrap;}.value {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}}
}
/style
