基于el-tooltip 二次封装的 Tool-Tip-Ellipsis 全局气泡提示组件

2024-02-20 11:13:16

前言

前端页面开发中，经常需要使用气泡提示组件来提供更丰富的交互体验。Element UI 提供了默认的 el-tooltip 组件，但对于某些特定场景，其功能可能无法完全满足需求。本文将介绍基于 el-tooltip 二次封装的 tool-tip-ellipsis 全局气泡提示组件，它不仅继承了 el-tooltip 的基本特性，还针对特定场景进行了优化和扩展。

功能需求分析

在具体开发项目中，我们遇到了以下几个气泡提示相关的功能需求：

限制提示内容长度，超出部分以省略号展示；
允许在页面任意位置触发气泡提示，无需指定固定的 DOM 元素；
支持动态创建和销毁气泡提示实例。

封装思路

基于上述需求，我们决定对 el-tooltip 进行二次封装，主要思路如下：

利用 Vue 的全局组件注册机制，创建一个全局可用的 tool-tip-ellipsis 组件；
通过 props 传递气泡提示的内容和显示位置；
使用 JavaScript 脚本动态创建和销毁气泡提示实例，并处理鼠标悬停和离开事件。

实现过程

全局组件注册

Vue.component('tool-tip-ellipsis', {
  // ...
});

Props 定义

props: {
  content: {
    type: String,
    required: true,
  },
  position: {
    type: String,
    default: 'top',
  },
  width: {
    type: [String, Number],
    default: 'auto',
  },
  ellipsis: {
    type: Boolean,
    default: true,
  },
}

脚本实现

// 创建气泡提示实例
const createTooltip = (options) => {
  // ...
};

// 销毁气泡提示实例
const destroyTooltip = () => {
  // ...
};

使用方式

<template>
  <tool-tip-ellipsis :content="content" :position="position" :width="width" :ellipsis="ellipsis"></tool-tip-ellipsis>
</template>

<script>
export default {
  data() {
    return {
      content: '这是一条气泡提示消息，内容过长时会显示省略号...',
      position: 'top',
      width: '200px',
      ellipsis: true,
    };
  },
  mounted() {
    // ...
  },
  unmounted() {
    // ...
  },
};
</script>