vue3超出文本展示el tooltip如何实现

发布时间：2023-02-27 10:43:24 作者：iii
来源：亿速云阅读：380

Vue3 超出文本展示 el-tooltip 如何实现

在开发 Vue3 项目时，我们经常会遇到需要展示长文本的场景。由于页面布局的限制，文本内容可能会超出容器的宽度或高度，导致内容被截断。为了提升用户体验，我们通常会在文本超出时显示一个 Tooltip（提示框），以便用户能够查看完整的文本内容。

本文将详细介绍如何在 Vue3 项目中实现超出文本展示 el-tooltip 的功能。我们将使用 Element Plus 组件库中的 el-tooltip 组件，并结合 Vue3 的响应式特性来实现这一功能。

1. 环境准备

在开始之前，确保你已经安装了 Vue3 和 Element Plus。如果还没有安装，可以通过以下命令进行安装：

npm install vue@next
npm install element-plus

安装完成后，在项目的 main.js 或 main.ts 文件中引入 Element Plus：

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

2. 基本使用

首先，我们来看一下 el-tooltip 的基本用法。el-tooltip 是 Element Plus 提供的一个组件，用于在鼠标悬停时显示提示信息。

<template>
  <el-tooltip content="这是一个提示信息" placement="top">
    <el-button>悬停我</el-button>
  </el-tooltip>
</template>

在这个例子中，当用户将鼠标悬停在按钮上时，会显示一个提示框，内容为“这是一个提示信息”。

3. 实现超出文本展示 Tooltip

接下来，我们将实现一个功能：当文本内容超出容器宽度时，显示 el-tooltip，否则不显示。

3.1 创建组件

首先，我们创建一个名为 TextWithTooltip.vue 的组件：

<template>
  <div class="text-container" ref="textContainer">
    <span ref="textContent">{{ text }}</span>
    <el-tooltip
      v-if="isOverflow"
      :content="text"
      placement="top"
    >
      <span class="ellipsis">{{ text }}</span>
    </el-tooltip>
    <span v-else class="ellipsis">{{ text }}</span>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  props: {
    text: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    const textContainer = ref(null);
    const textContent = ref(null);
    const isOverflow = ref(false);

    onMounted(() => {
      checkOverflow();
    });

    const checkOverflow = () => {
      if (textContainer.value && textContent.value) {
        const containerWidth = textContainer.value.offsetWidth;
        const contentWidth = textContent.value.scrollWidth;
        isOverflow.value = contentWidth > containerWidth;
      }
    };

    return {
      textContainer,
      textContent,
      isOverflow,
    };
  },
};
</script>

<style scoped>
.text-container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
}

.ellipsis {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

3.2 组件解析

textContainer 和 textContent：我们使用 ref 来获取容器和文本内容的 DOM 元素。
isOverflow：这是一个响应式变量，用于判断文本是否超出容器宽度。
checkOverflow：在组件挂载后，我们调用 checkOverflow 方法来检查文本是否超出容器宽度。如果超出，则设置 isOverflow 为 true。
el-tooltip：当 isOverflow 为 true 时，显示 el-tooltip，否则直接显示文本。

3.3 使用组件

现在，我们可以在其他组件中使用 TextWithTooltip 组件：

<template>
  <div>
    <TextWithTooltip text="这是一个很长的文本内容，可能会超出容器宽度" />
    <TextWithTooltip text="短文本" />
  </div>
</template>

<script>
import TextWithTooltip from './components/TextWithTooltip.vue';

export default {
  components: {
    TextWithTooltip,
  },
};
</script>

在这个例子中，第一个 TextWithTooltip 组件中的文本内容较长，可能会超出容器宽度，因此会显示 el-tooltip。而第二个组件中的文本较短，不会超出容器宽度，因此不会显示 el-tooltip。

4. 处理动态内容

在实际开发中，文本内容可能是动态变化的。为了确保 el-tooltip 的正确显示，我们需要在文本内容变化时重新检查是否超出容器宽度。

4.1 监听文本变化

我们可以使用 Vue3 的 watch 来监听 text 属性的变化，并在变化时调用 checkOverflow 方法。

import { ref, onMounted, watch } from 'vue';

export default {
  props: {
    text: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    const textContainer = ref(null);
    const textContent = ref(null);
    const isOverflow = ref(false);

    onMounted(() => {
      checkOverflow();
    });

    watch(() => props.text, () => {
      checkOverflow();
    });

    const checkOverflow = () => {
      if (textContainer.value && textContent.value) {
        const containerWidth = textContainer.value.offsetWidth;
        const contentWidth = textContent.value.scrollWidth;
        isOverflow.value = contentWidth > containerWidth;
      }
    };

    return {
      textContainer,
      textContent,
      isOverflow,
    };
  },
};

4.2 示例

<template>
  <div>
    <TextWithTooltip :text="dynamicText" />
    <el-button @click="changeText">改变文本</el-button>
  </div>
</template>

<script>
import { ref } from 'vue';
import TextWithTooltip from './components/TextWithTooltip.vue';

export default {
  components: {
    TextWithTooltip,
  },
  setup() {
    const dynamicText = ref('这是一个动态文本内容');

    const changeText = () => {
      dynamicText.value = '这是一个新的动态文本内容，可能会超出容器宽度';
    };

    return {
      dynamicText,
      changeText,
    };
  },
};
</script>

在这个例子中，点击按钮会改变 dynamicText 的值，TextWithTooltip 组件会自动检测文本是否超出容器宽度，并相应地显示或隐藏 el-tooltip。

5. 总结

通过本文的介绍，我们学习了如何在 Vue3 项目中实现超出文本展示 el-tooltip 的功能。我们创建了一个 TextWithTooltip 组件，利用 Vue3 的响应式特性和 Element Plus 的 el-tooltip 组件，实现了在文本超出容器宽度时显示提示框的功能。

此外，我们还处理了动态文本内容的情况，确保在文本变化时能够正确显示或隐藏 el-tooltip。希望本文对你有所帮助，能够在实际项目中灵活运用这些技巧。