鼠标悬停显示全称（如果输入文字长度小于输入框宽度则不显示，反之，则显示）

最新推荐文章于 2023-12-11 16:29:35 发布

_不许人间见白头_

最新推荐文章于 2023-12-11 16:29:35 发布

阅读量633

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/m0_46434334/article/details/132842140

版权

文章介绍了如何在Vue项目中使用vue-treeselect组件，实现当输入框宽度变化时，活动名称的文字显示策略。展示了前端代码片段，包括模板、数据配置和方法处理文本溢出与宽度调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、效果图

1.文字小于输入框宽度不显示全称

2.文字大于输入框宽度显示全称

二、前端代码

<template>

  <div>
    <el-form label-width="100px">
        <el-form-item label="活动名称" class="dept">
          <span :title="fruitName" class="treespan" >
            <treeselect
            :options="options"
            placeholder="Select your favourite(s)..."
            v-model="value"
            :show-count="true"
            @select="selectDepart"
            :beforeClearAll="beforeClearAll"
            @mouseover.native="onMouseOver"
            @input="selectInput">
                <label slot="option-label" slot-scope="{ node, shouldShowCount, count, 
                 labelClassName, countClassName }":class="labelClassName">
                      <span :title="node.label">{{ node.label }}</span>
                </label>
                <span slot="value-label" slot-scope="{ node }" ref="displayName" > 
                      {{node.label}}
                </span>
             </treeselect>
          </span>
        </el-form-item>
        
    </el-form>
   
  </div>

</template>
  
<script>
import ElementUI from 'element-ui';
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  export default {
    components: { Treeselect },
    data() {
      return {
        fruitName:"Fruit",
        value:'fruits',
        options: [ {
      id: 'fruits',
      label: 'Fruits',
      children: [ {
        id: 'apple',
        label: 'Appleaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 🍎',
        isNew: true,
      }, {
        id: 'grapes',
        label: 'Grapes 🍇',
      }, {
        id: 'pear',
        label: 'Pear 🍐',
      }, {
        id: 'strawberry',
        label: 'Strawberry 🍓',
      }, {
        id: 'watermelon',
        label: 'Watermelon 🍉',
      } ],
    }, {
      id: 'vegetables',
      label: 'Vegetables',
      children: [ {
        id: 'corn',
        label: 'Corn 🌽',
      }, {
        id: 'carrot',
        label: 'Carrot 🥕',
      }, {
        id: 'eggplant',
        label: 'Eggplant 🍆',
      }, {
        id: 'tomato',
        label: 'Tomato 🍅',
      } ],
    } ]
      };
    },
    created() {
    
    },

    methods: {
 
     beforeClearAll() {
          this.isShowTooltip=true;
          this.fruitName = "";
          this.value = "";
          return true;
     },
    selectDepart(val) {

          if(val.label == this.fruitName || val.id == this.value || this.value==""){
            return;
          }
          this.fruitName = val.label;
          this.value = val.id;

    },
    onMouseOver() {
           if(this.value == ""){
                return;
            }
      		const parentWidth = this.$refs.displayName.parentNode.offsetWidth // 获取元素父级可视宽度
      		const contentWidth = this.$refs.displayName.offsetWidth // 获取元素可视宽度
            // console.log(parentWidth)
            // console.log(contentWidth)
      		let flag = contentWidth <= parentWidth
          if(flag){
            this.fruitName=""
          }

    }


    }
  };
  </script>
  <style scoped>

.remark {
	width:100px;
	height: 50px;
	line-height: 50px;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dept /deep/ .el-form-item__content {
  max-width: 215px;
  /* max-width: 50px; */
  max-height: 33px;
}

.dept /deep/ .vue-treeselect__control {
  height: 32px;

}

</style>