ElementUI之el-tooltip显示多行内容
在ElementUI中,el-tooltip
组件默认只支持单行文本的显示,如果你需要显示多行文本,可以通过设置el-tooltip
的content
属性来实现。
以下是一个简单的例子,展示如何使用el-tooltip
组件来显示多行文本:
<template>
<el-tooltip class="item" effect="dark" placement="top-start">
<div slot="content">
这是一段多行文本。<br>
第二行文本。<br>
第三行文本。
</div>
<el-button>多行提示</el-button>
</el-tooltip>
</template>
<script>
export default {
// 你的组件数据和方法
};
</script>
<style>
/* 你的CSS样式 */
</style>
在这个例子中,el-tooltip
的content
通过slot
传递了一个div
元素,其中包含使用<br>
标签来分隔的多行文本。这样,当用户将鼠标悬停在按钮上时,就会显示多行提示信息。
评论已关闭