vue自定义指令实现超过宽度显示…

toahin

已于 2024-06-12 17:47:59 修改

阅读量216

点赞数 3

文章标签： vue.js javascript 前端

于 2024-06-12 17:47:19 首次发布

本文链接：https://blog.csdn.net/qq_43636471/article/details/139632713

版权

通过vue自定义指令实现文本内容超过指定宽度时，文本内容显示…，并且显示更多图标来查看全部内容

效果预览：

代码预览：

<template>
    <div v-tooltip-show class="base-tooltip">
        <p>{{ content }}</p>
        <el-popover placement="bottom-end" width="250" trigger="hover" :content="content">
            <svg-icon slot="reference" icon-class="chat" />
        </el-popover>
     </div>
</template>

export default {
  directives: {
    tooltipShow: {
      inserted(el) {
        const p = el.children[0]
        if (p.scrollWidth > p.offsetWidth) return
        const span = el.children[1]
        el.removeChild(span)
      }
    }
  },
  data() {
    return {
        content: '收集用户反馈和进行调查是了解访问者行为的有用方法。您可以使用在线调查工具（如SurveyMonkey、Google Forms）或设计反馈表单来收集访问者的意见、需求和建议。这可以提供有关访问者喜好、问题和期望的有用信息。'
    }
  }
}

<style>
.base-tooltip {
  display: flex;
  align-items: center;
  > p {
    width: calc(100% - 30px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 10px 0 0;
  }
}
</style>