vue+elementUI实现文字超出时tips全量显示,不超出则无tips

cchtee

于 2020-12-16 22:37:44 发布

阅读量2.6k

点赞数 1

分类专栏：笔记文章标签： tooltip

本文链接：https://blog.csdn.net/clovertee/article/details/111301486

版权

本文介绍如何使用Vue结合ElementUI，在文字内容超出时展示Tooltip全量信息，未超出时不显示。当鼠标悬停在超出的文字上，内容会变为蓝色并显示完整。同时支持文字链接的跳转功能。

摘要由CSDN通过智能技术生成

效果: 文字超出时省略号显示,hover时,tooltip全量显示,文字变为蓝色. 文字未超出时hover没有效果. 支持跳转链接

用法:

<!-- 外层div宽度固定 -->
<div>
    <show-tooltips :txt-info="value"></show-tooltips>
</div>

实现:

<template>
<el-tooltip :content="txtInfo" placement="top" effect="light" :disabled="isDisabled">
    <div class="wordnowrap" :class="{isLink: 'link-text'}" @mouseenter="isShowTooltip" @click="linkTo">{
  {txtInfo}}</div>
</el-tooltip>
</template>

<script>
export default{
    name: 'ShowTooltips',
    props: {
        txtInfo: '',
        isLink: {
            type: Boolean,
            default: false,
            required: false
        }
    },
    data(){
        return {
            isDisabled: false