首页element Tooltip怎么可以设置一直显示

element Tooltip怎么可以设置一直显示

时间: 2024-03-11 09:49:54 浏览: 331

element中利用tooltip实现文字超出框悬浮显示

之前遇到过这个需求，所以就把自己的成果和大家分享下成果^ ^ 我是利用了element-ui里面的tooltip组件进行一个二次封装，大家可以直接粘贴复制查看效果。。。话不多说，直接上代码 {{content||'-'}} export default { name: 'textTooltip', props: { // 显示的文字内容 content: { type: String, default: () => { return '' } 在前端开发中，有时我们需要处理文本内容超出容器显示范围的情况，这时可以借助各种UI库提供的工具提示组件来实现文字超出框后悬浮显示。Element UI 是一个流行的 Vue.js UI 框架，它提供了丰富的组件，其中包括 Tooltip 组件，用于创建具有提示信息的悬浮框。在本文中，我们将探讨如何利用 Element UI 的 Tooltip 组件实现文字超出框悬浮显示，并通过二次封装提高代码复用性。我们要理解 Element UI 的 Tooltip 组件的基本用法。Tooltip 是一个在鼠标悬停时显示文字提示的组件，它可以根据容器的大小自动调整自身的位置。基本使用方式如下： ```html <el-tooltip effect="dark" placement="bottom"> <span>当文字超过容器宽度时，这里会显示Tooltip</span> <template slot="content">这是超出部分的文本内容</template> </el-tooltip> ``` 在这个例子中，`<el-tooltip>` 是组件的基本容器，`effect` 属性定义了提示框的背景颜色，`placement` 属性则定义了提示框相对于触发元素的位置。为了实现文字超出框悬浮显示，我们可以创建一个新的 Vue 组件 `textTooltip`，它接受 `content`、`className` 和 `refName` 这三个属性。`content` 用于传递需要显示的文字，`className` 用于设置外层框的样式，`refName` 用于在页面中唯一标识该组件。下面是一个简单的 `textTooltip` 组件实现： ```vue <template> <div :class="className" @mouseover="onMouseOver(refName)"> <el-tooltip v-if="!isShowTooltip" effect="dark" placement="bottom"> <span>{{ content || '-' }}</span> <template slot="content">{{ content }}</template> </el-tooltip> <span v-else>{{ content }}</span> </div> </template> <script> export default { name: 'textTooltip', props: { // 显示的文字内容 content: { type: String, default: () => { return '' } }, // 外层框的样式，在传入的这个类名中设置文字显示的宽度 className: { type: String, default: () => { return '' } }, // 为页面文字标识（如在同一页面中调用多次组件，此参数不可重复） refName: { type: String, default: () => { return '' } } }, data() { return { isShowTooltip: true } }, methods: { onMouseOver(str) { let parentWidth = this.$refs[str].parentNode.offsetWidth; let contentWidth = this.$refs[str].offsetWidth; // 判断是否开启tooltip功能 if (contentWidth > parentWidth) { this.isShowTooltip = false; } else { this.isShowTooltip = true; } } } } </script> <style scoped> .over-flow { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .wid190 { width: 190px; } </style> ``` 在这个组件中，我们通过监听 `mouseover` 事件来判断文本是否超出容器宽度。如果文本宽度大于容器宽度，`isShowTooltip` 将被设置为 `false`，从而显示 Tooltip；否则，直接显示文本。`className` 用于设置外层容器的宽度，例如，通过 `.wid190` 类可以将宽度固定为190像素。在实际项目中，你可以根据需求调整 `onMouseOver` 方法中的逻辑，比如增加对不同定位方式的支持，或者添加动画效果。同时，组件的 `refName` 属性确保了在页面中多次使用该组件时，每个组件都能正确响应鼠标悬停事件。调用这个自定义组件时，你可以这样写： ```html <text-tooltip content="这是一段很长很长的文字，可能会超出容器宽度，所以需要使用Tooltip来显示完整内容" class="wid190" ref-name="uniqueRefName1" ></text-tooltip> ``` 通过封装 Element UI 的 Tooltip 组件，我们可以创建一个更灵活且易于复用的解决方案，以处理文本超出显示的问题。这种方法不仅简化了代码，也提高了代码的可维护性，使得在多个地方需要类似功能时，可以快速地进行集成和扩展。

要让element Tooltip一直显示，可以通过以下两种方法实现： 1. 设置trigger属性为manual，这样Tooltip就不会在鼠标移开时自动隐藏，而是需要手动调用hide方法来隐藏。 ```html <el-tooltip content="这是一个Tooltip" trigger="manual"> <el-button slot="reference">Button</el-button> </el-tooltip> ``` ```js // 在需要隐藏Tooltip的时候手动调用hide方法 this.$refs.tooltip.hide(); ``` 2. 使用v-show指令来控制Tooltip的显示和隐藏，这样Tooltip就不会自动隐藏。 ```html <el-tooltip content="这是一个Tooltip" v-show="true"> <el-button slot="reference">Button</el-button> </el-tooltip> ``` 上述两种方法都可以实现Tooltip一直显示的效果，具体选择哪种方法取决于你的具体需求和场景。

阅读全文