首先，确保你已经引入了 Element-React 的样式和脚本。可以通过以下方式之一来引入：
1. 使用 CDN：
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入脚本 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
2. 使用 npm 安装：
npm install element-ui
然后在你的 Vue 项目中引入并使用 Popover 组件：
<template>
<div>
<!-- 点击触发的弹出框 -->
<el-popover
title="标题"
content="这是弹出框的内容"
placement="top"
trigger="click"
>
<el-button>点击弹出框</el-button>
</el-popover>
<!-- 悬停触发的弹出框 -->
<el-popover
title="标题"
content="这是弹出框的内容"
placement="top"
trigger="hover"
>
<el-button>悬停弹出框</el-button>
</el-popover>
<!-- 自定义触发内容 -->
<el-popover
title="标题"
placement="top"
trigger="click"
>
<el-button>自定义触发内容</el-button>
<div slot="content">自定义的弹出框内容</div>
</el-popover>
</div>
</template>
<script>
import { ElButton, ElPopover } from 'element-ui';
export default {
components: {
ElButton,
ElPopover,
},
};
</script>
在上面的例子中，我们使用了 ElPopover 组件来创建弹出框。通过设置 title 属性来指定弹出框的标题，通过 content 属性来设置弹出框的内容，通过 placement 属性来设置弹出框的位置，通过 trigger 属性来设置触发弹出框的方式。
你可以根据实际需求，通过插槽来自定义触发内容，也可以选择触发方式是点击还是悬停。
转载请注明出处：http://www.zyzy.cn/article/detail/5635/Element-React