1. 安装 Element Plus：
如果你还没有安装 Element Plus，请参考前面的步骤进行安装。
2. 导入和使用 Popover：
在你的 Vue 组件中导入 Popover，并在模板中使用它。以下是一个简单的示例：
<template>
<div>
<el-popover
title="标题"
content="这是弹出框的内容"
placement="top"
trigger="hover"
>
<el-button>鼠标悬停</el-button>
</el-popover>
</div>
</template>
<script>
import { ElPopover, ElButton } from 'element-plus';
export default {
components: {
ElPopover,
ElButton,
},
};
</script>
在上述代码中，我们导入了 ElPopover 和 ElButton 组件，并在模板中使用 ElPopover 包裹 ElButton 组件。通过鼠标悬停在按钮上，将显示指定的标题和内容的弹出框。
3. 自定义 Popover：
你可以根据需要自定义 Popover，例如，设置触发方式、主题、内容等：
<template>
<div>
<el-popover
trigger="click"
placement="bottom"
width="200"
>
<el-button slot="reference">点击触发</el-button>
<el-card>
<p>这是自定义内容。</p>
</el-card>
</el-popover>
</div>
</template>
<script>
import { ElPopover, ElButton, ElCard } from 'element-plus';
export default {
components: {
ElPopover,
ElButton,
ElCard,
},
};
</script>
在这个例子中，我们设置了触发方式为点击，通过 slot="reference" 将按钮包裹在 Popover 中。Popover 的内容使用了自定义的 Card 组件，你可以根据需要调整内容和样式。
转载请注明出处：http://www.zyzy.cn/article/detail/5577/ElementPlus