当前位置: 首页 > news >正文

Vue 的 el-select 下拉选项中,只有当文字超出时才显示提示框,未超出的则不显示

Vue 的 el-select 下拉选项中,只有当文字超出时才显示提示框,未超出的则不显示

<template><div><el-select v-model="selected" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"><el-tooltipclass="option-tooltip":disabled="!isTextOverflow(item.label)":content="item.label"placement="top-start":offset="[0, 10]"><div class="option-item">{{ item.label }}</div></el-tooltip></el-option></el-select></div>
</template><script>
export default {data() {return {selected: '',options: [{ value: '1', label: '这是一个超长的选项文字,当文字超出时会显示省略号' },{ value: '2', label: '短文字1' },{ value: '3', label: '短文字2' }]};},methods: {isTextOverflow(text) {const el = document.createElement('div');el.style.whiteSpace = 'nowrap';el.style.overflow = 'hidden';el.style.textOverflow = 'ellipsis';el.style.maxWidth = '100%';el.style.padding = '0';el.style.border = 'none';el.textContent = text;document.body.appendChild(el);const isOverflow = el.clientWidth < el.scrollWidth;document.body.removeChild(el);return isOverflow;}}
};
</script><style>
.option-item {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: block;max-width: 100%;
}.option-tooltip {pointer-events: auto !important;
}
</style>
http://www.lryc.cn/news/255885.html

相关文章:

  • 【Python】pptx文件转pdf
  • response应用及重定向和request转发
  • CentOS常用基础命令大全(linux命令)2
  • 分析阿里巴巴的微服务依赖图和性能
  • Linux——基本指令(一)
  • 虚幻学习笔记10—C++函数与蓝图的通信
  • 无重复字符的最长子串(LeetCode 3)
  • 交付《啤酒游戏经营决策沙盘》的项目
  • 油猴(Tampermonkey)浏览器插件简单自定义脚本开发
  • BGP综合
  • 库函数qsort的使用及利用冒泡排序模拟实现qsort
  • mybatis和mybatisplus中对 同namespace 中id重复处理逻辑源码解析
  • linux下部署frp客户端服务端-内网穿透
  • Markdown to write
  • ResNeXt(2017)
  • DreamPlace 的下载安装与使用
  • FPGA模块——SPI协议(读写FLASH)
  • SQL自学通之表达式条件语句与运算
  • 公网域名如何解析到内网IP服务器——快解析域名映射外网访问
  • 线程安全与并发区别
  • SEO优化是什么,如何进行SEO优化
  • nodejs发起http或https请求
  • 举例C#使用特性排除某些类成员不参与XML序列化和反序列化
  • PHP基础 - 输入输出
  • 大创项目推荐 交通目标检测-行人车辆检测流量计数 - 大创项目推荐
  • 利用R语言heatmap.2函数进行聚类并画热图
  • 伦茨科技宣布ST17H6x芯片已通过Apple Find My「查找」认证
  • nodejs微信小程序+python+PHP的游戏测评网站设计与实现-计算机毕业设计推荐
  • 在 JavaScript 中导入和导出 Excel XLSX 文件:SpreadJS
  • 【Pytorch】Fizz Buzz