在 Vue 2 中,我们通常使用 Element UI,而在 Vue 3 中,由于 Element UI 官方并未直接支持 Vue 3,因此有一个官方的替代库叫做 Element Plus,它是为 Vue 3 设计的。虽然这两个库在功能和设计上非常相似,但它们在 Vue 2 和 Vue 3 的上下文中有一些细微的差别。以下将分别介绍 Vue 2 下的 Element UI Popover 组件和 Vue 3 下的 Element Plus Popover 组件的属性、事件和方法,并给出示例。
Vue 2 + Element UI Popover
属性(Props)
trigger
: 触发方式(‘click’, ‘hover’, ‘focus’, ‘manual’)。title
: 标题。content
: 内容(虽然更推荐使用slot
来定义复杂内容)。width
: 宽度。placement
: 弹出框出现的位置。value
/v-model
: 绑定弹出框的显示状态(主要用于trigger='manual'
)。visible-arrow
: 是否显示箭头。popper-class
: 自定义弹出框的类名。popper-options
: popper.js 的配置项。append-to-body
: 是否将弹出框插入到 body 元素中。