基于 element ui 之 ui-tooltip 组件

在使用 el-select 时，有时 el-option 的内容过长，导致超长显示，例如：

为了更好展示，我们可以设置一个最大宽度，超出最大宽度时使用省略号代替，当鼠标移入时，使用 el-tooltip 展示完整内容。以下是封装的 ui-tooltip 组件。

<template><el-tooltip:content="content":placement="placement"effect="light":disabled="isDisabled"><div class="contentnowrap" @mouseenter="isShowTooltip">{{ content }}</div></el-tooltip>
</template><script>
export default {name: "UiTooltip",props: {content: {type: String,default: "",},placement: {type: String,default: "top",},},data() {return {isDisabled: false,};},methods: {isShowTooltip(e) {let clientWidth = e.target.clientWidth,scrollWidth = e.target.scrollWidth;if (scrollWidth > clientWidth) {this.isDisabled = false;} else {this.isDisabled = true;}},},
};
</script><style lang="scss">
.contentnowrap {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}</style>

使用方式

1、引入

import UiTooltip from "@/components/ui-tooltip";

2、注册

components: {UiTooltip,
},

3、使用

<el-select v-model="params.desc" placeholder="请选择" clearable><el-optionv-for="(item, index) in list":key="index":label="item.label":value="item.value"><span class="ui-tooltip-item"><ui-tooltip :content="item.label"></ui-tooltip></span></el-option>
</el-select>

通过 max-width 设置最大宽度

.ui-tooltip-item {display: inline-block;max-width: 150px;margin-left: 8px;
}

4、效果

基于 element ui 之 ui-tooltip 组件相关推荐

从Element ui看开发公共组件的三种方式
在日常的开发工作中,封装自己的公共组件是很常见的需求,但想要组件更加优雅和通用也是一门学问.恰好前段时间用过Element ui,于是想学习这种库是如何封装插件的,这篇文章就是我的一点理解. 从入口文 ...
Vue.js 3.0企业级管理后台开发实战：基于Element Plus UI
Vue.js 3.0企业级管理后台开发实战:基于Element Plus UI - 每天更新前言文章内容项目源码及课件第1章项目启动 1.1 项目原型 1.2 项目UI 1.3 项目开发流程 ...
用Custom Element来实现UI组件
用Custom Element来实现UI组件最近在做的项目是要用web component的技术来搭建一个UI库.由于之前从来没接触过前端的知识,也是趁这次机会简单的学习了解了Javascript, ...
Element ui+vue前端框架组件主题美化后台管理系统模板html
最新设计了一套Element ui主题模板演示地址:Element ui+vue前端框架组件主题美化后台管理系统模板 Element ui版本号:2.15.12 vue版本号:2.7. ...
Mint UI —— 基于 Vue.js 的移动端组件库
写文章登录 Mint UI -- 基于 Vue.js 的移动端组件库杨奕 8 个月前 Mint UI GitHub:https://github.com/ElemeFE/mint-ui 项目主页:h ...
基于正点原子触摸屏ui设计_基于黄金比例ui％C9％B8的设计系统
基于正点原子触摸屏ui设计定义ɸ (Defining ɸ) The golden number, or "phi" in reference to the sculptor Ph ...
前端基于element组件的语音文件上传
前端基于element组件的语音文件上传原理项目采用的是element组件的UI库,基于标签,实现基本的文件上传功能,并基于标签内置的触发事件,实现了对语音文件大小,格式,上传前确认,上传后显示已 ...
基于vue移动端UI框架
1.vux 基于WeUI和Vue(2.x)开发的移动端UI组件库基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式 ...
SAP 产品 UI 里的容器组件的概念和开发概述
这是 Jerry 2021 年的第 68 篇文章,也是汪子熙公众号总共第 345 篇原创文章. Jerry 之前的文章,谈谈 SAP 产品 UI 开发中的组件概念,曾经提到,无论基于何等开发技术的 S ...
谈谈 SAP 产品 UI 开发中的组件概念
这是 Jerry 2021 年的第 54 篇文章,也是汪子熙公众号总共第 331 篇原创文章. 任何企业级软件的前端开发,都离不开组件(Component)这个概念.撇开具体的 UI 开发技术不谈,所 ...

基于 element ui 之 ui-tooltip 组件

使用方式

1、引入

2、注册

3、使用

4、效果

基于 element ui 之 ui-tooltip 组件相关推荐

最新文章

热门文章