Element Plus 提供了 el-tooltip 组件,用于在鼠标悬停时显示提示信息。以下是一个简单的例子演示如何使用 Element Plus 的 el-tooltip:

首先,确保你已经在项目中引入了 Element Plus。如果没有,你可以通过以下方式安装:
npm install element-plus

然后,在你的 Vue 组件中使用 el-tooltip:
<template>
  <div>
    <el-tooltip content="这是一个提示信息" placement="top">
      <el-button>悬停查看提示</el-button>
    </el-tooltip>
  </div>
</template>

<script>
import { ElTooltip, ElButton } from 'element-plus';

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

在这个例子中,我们使用了 el-tooltip 组件,并通过 content 属性设置提示的内容。placement 属性用于设置提示框的位置,可以是 'top'、'right'、'bottom'、'left' 等。

在 el-tooltip 组件内部,包裹了一个 el-button 按钮,当鼠标悬停在按钮上时,就会显示提示信息。

你可以根据实际需求调整提示组件的样式和配置。


转载请注明出处:http://www.zyzy.cn/article/detail/5560/ElementPlus