vue 文本超出宽度超出部分隐藏，鼠标移入展示全部组件封装

在 VUE + ElementUI 的项目里面，标题内容超出固定宽度超出部分隐藏，鼠标移入显示全部内容。由于项目里面这一类的需求比较多，这里我考虑封装一下，方便使用。

组件封装的思路是借助 ElementUI 里面的 tooltip 组件来实现鼠标移入展示全部的效果，然后根据标题的长度来控制 tooltip 组件的显示隐藏。具体实现代码如下：
父组件：

<textOverflow maxWidth="400px" :content='item.subjectName'></textOverflow>

子组件：

<template><div :style="{maxWidth:maxWidth}" class="text"><span v-if="!isOver" class="spanItem">{{content}}</span><el-tooltip v-else class="item" effect="dark" :content="content" :placement="placement"><span class="spanItem">{{content}}</span></el-tooltip></div>
</template>
<script>export default {props:{content:{ //标题内容type:String,default:''},maxWidth:{//最大显示宽度type:String,default:'100px'},placement:{//提示位置type:String,default:'top-start'}},data(){return {isOver:false //是不是超出指定宽度}},mounted(){this.init();},methods:{init(){let dom = this.$refs.spanItem;if(dom.offsetWidth >= parseInt(this.maxWidth)){this.isOver = true;}else{this.isOver = false;}}}}
</script>
<style scoped="scoped">.text{text-overflow: ellipsis; overflow: hidden; white-space: nowrap; cursor: pointer;}
</style>

注意：

可以循环使用也可以单独使用，在子组件获取节点的时候使用 ref 和 refs 来注册和获取子元素，针对每一个节点判断内容是否超出指定宽度。
超出隐藏的效果添加到最外层 div 上，这样才能获取 span 真实文本的宽度。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！