基础用法

Popover 的属性与 Tooltip 很类似,它们都是基于Vue-popper开发的,因此对于重复属性,请参考 Tooltip 的文档,在此文档中不做详尽解释。

设置索引ref,在按钮中,我们注册了自定义指令v-popover,指向索引ID。trigger属性用于设置何时触发 Popover ,提供三种触发方式:hoverclick 和 focus。第二种用法通过 slot 指定 reference。

 1 <el-popover
 2   ref="popover1"
 3   placement="top-start"
 4   title="标题"
 5   width="200"
 6   trigger="hover"
 7   content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
 8 </el-popover>
 9 
10 <el-popover
11   ref="popover2"
12   placement="bottom"
13   title="标题"
14   width="200"
15   trigger="click"
16   content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
17 </el-popover>
18 
19 <el-button v-popover:popover1>hover 激活</el-button>
20 <el-button v-popover:popover2>click 激活</el-button>
21 <el-popover
22   placement="right"
23   title="标题"
24   width="200"
25   trigger="focus"
26   content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
27   <el-button slot="reference">focus 激活</el-button>
28 </el-popover>
View Code

相关文章:

  • 2021-10-18
  • 2022-02-06
  • 2022-12-23
  • 2021-07-28
  • 2021-08-27
  • 2022-12-23
  • 2022-01-10
猜你喜欢
  • 2021-12-18
  • 2021-09-07
  • 2022-12-23
  • 2022-12-23
  • 2022-01-20
  • 2022-12-23
相关资源
相似解决方案