做效果图比较好的模型网站,信阳专业网站建设,企业网站备案去哪里,亚马逊网站建设做什么效果 封装思路
通过控制el-tooltip的disabled属性控制是否提示通过在内容上绑定mouseenter事件监听内容宽度和可视宽度#xff0c;判断内容是否溢出
封装代码
templatediv styledisplay: flex classcolumn-overflowel-tooltip…效果 封装思路
通过控制el-tooltip的disabled属性控制是否提示通过在内容上绑定mouseenter事件监听内容宽度和可视宽度判断内容是否溢出
封装代码
templatediv styledisplay: flex classcolumn-overflowel-tooltip :contentcontent placementtop :disabled!isShowTooltipdivclasscolumn-overflow__hiddenmouseentervisibilityChange($event){{ content || -- }}/div/el-tooltip/div
/templatescript
export default {props: {content: {type: String,default: },direction: {type: String,default: horizontal}},data() {return {isShowTooltip: false};},methods: {visibilityChange(event) {const ev event.target;let ev_size ev.scrollWidth;let content_size ev.clientWidth;if (this.direction vertical) {ev_size ev.scrollHeight;content_size ev.clientHeight;}if (ev_size content_size) {this.isShowTooltip true;} else {this.isShowTooltip false;}}}
};
/scriptstyle langless
.column-overflow {width: 100%;__hidden {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
}
/style使用代码
column-overflowa:contentcontentInfo
/column-overflow
