Mango UI

Popover 弹出框 pass 0.0.16+

基础用法

placement 四个值与 trigger 属性的自由组合

展开查看
  <mg-popover>
    <template #reference>
      <mg-button>default</mg-button>
    </template>
    <div>这是一句测试的文案</div>
  </mg-popover>

  <mg-popover placement='top' trigger='hover'>
    <template #reference>
      <mg-button>hover</mg-button>
    </template>
    <div>这是一句测试的文案</div>
  </mg-popover>

  <mg-popover placement='left' trigger='focus'>
    <template #reference>
      <mg-button>focus</mg-button>
    </template>
    <div>这是一句测试的文案</div>
  </mg-popover>

  <mg-popover placement='right' trigger='manual' :show='popShow'>
    <template #reference>
      <mg-button @click="popShow = !popShow">manual</mg-button>
    </template>
    <div>这是一句测试的文案</div>
  </mg-popover>

  <script setup>
    import { ref } from 'vue'
    const popShow = ref(false)
  </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

manual 方式可以使用两种方法控制pop的显示，除了示例中的 show 属性控制，也可以使用 showPop 和 hidePop 方法控制

不使用插槽

任意指定reference

注意

使用这种方式必须要开启 appendToBody

i am reference

展开查看
<template>
  <mg-popover placement='right' :reference="target" appendToBody>
    <div>这是一句测试的文案</div>
  </mg-popover>

  <span ref='target'>i am reference</span>
</template>

<script setup>
  import { ref } from 'vue'
  const target = ref(null)
</script>
1
2
3
4
5
6
7
8
9
10
11
12

Popover Attributes

参数说明类型可选值默认值
trigger触发方式stringclick/focus/hover/manual-
placementpop位置stringbottom/top/left/rightbottom(默认有自适应)
showArrow是否带有三角箭头boolean-true
reference参考本页第二部分ref/dom元素--
appendToBodypop元素是否创建至body元素中boolean-false
padding0pop元素padding是否设为0boolean-false
scrollerRef设置滚动的监听，以重算pop位置ref/dom--
showmanual触发方式时可使用该属性控制pop显示ref/dom--

Popover Event

--

Popover Methods

方法说明参数返回值
showPop显示pop--
hidePop隐藏pop--