el-tooltip组件封装

最新推荐文章于 2025-03-18 20:59:11 发布

咸鱼!

最新推荐文章于 2025-03-18 20:59:11 发布

阅读量705

点赞数 1

文章标签： javascript 前端 elementui

本文链接：https://blog.youkuaiyun.com/NewBie96/article/details/132019435

版权

本文介绍了如何封装及使用ElementUI的el-tooltip组件，旨在实现代码的更方便、简洁调用。

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

哪里需要哪里调用,更加方便简洁代码

一.封装tooltip

<template>
  <span class="tooltips">
    <!-- 传入的数据长度默认小于等于6时,直接显示数据内容,不显示tooltip -->
    <template v-if="content.length <= limit">
      {
  { content }}
    </template>
    <template v-else>
      <el-tooltip class="item" effect="dark" :content="content" :placement="placement">
        <span>{
  { formatCont(content) }}</span>
      </el-tooltip>
    </template>
  </span>
</template>

<script>
export default {
  props: {
    // 默认长度6
    limit: {
      type: Number,
      default: 6
    },
    // 默认传入内容空
    content: {
      type: String,
      default: ''
    },
    // 默认提示方向 top-start
    placement: {
      type: String,
      default: '