QaUI

# 气泡菜单 popover

# 描述

点击元素，弹出气泡式菜单。

# 使用效果

# 使用方法

在.ux文件中引入组件

<import name="q-popover" src="qaui/src/components/popover/index"></import>
1

# 示例

<template>
  <div class="wrap">
    <div class="header">
      <q-popover
        contents="{{ contents }}"
        placement="{{ placementArr[0] }}"
        popover-width="{{ popoverWidth }}"
        trigger-size="{{ triggerSize }}"
        offset="{{ offset }}"
        arrow-space="{{ arrowSpace }}"
        onmenu-item-tap="handleClick"
      >
        <text slot="trigger" class="rootText">topLeft</text>
      </q-popover>
      <q-popover
        contents="{{ contents }}"
        placement="{{ placementArr[1] }}"
        popover-width="{{ popoverWidth }}"
        trigger-size="{{ triggerSize }}"
        offset="{{ offset }}"
        arrow-space="{{ arrowSpace }}"
        onmenu-item-tap="handleClick"
      >
        <text slot="trigger" class="rootText">top</text>
      </q-popover>
      <q-popover
        contents="{{ contents }}"
        placement="{{ placementArr[2] }}"
        popover-width="{{ popoverWidth }}"
        trigger-size="{{ triggerSize }}"
        offset="{{ offset }}"
        arrow-space="{{ arrowSpace }}"
        onmenu-item-tap="handleClick"
      >
        <text slot="trigger" class="rootText">topRight</text>
      </q-popover>
    </div>
    <div class="body">
      <q-popover
        contents="{{ contents }}"
        placement="{{ placementArr[3] }}"
        popover-width="{{ popoverWidth }}"
        trigger-size="{{ triggerSize }}"
        offset="{{ offset }}"
        arrow-space="{{ arrowSpace }}"
        onmenu-item-tap="handleClick"
      >
        <text slot="trigger" class="rootText">leftTop</text>
      </q-popover>
      <q-popover
        contents="{{ contents }}"
        placement="{{ placementArr[4] }}"
        popover-width="{{ popoverWidth }}"
        trigger-size="{{ triggerSize }}"
        offset="{{ offset }}"
        arrow-space="{{ arrowSpace }}"
        onmenu-item-tap="handleClick"
      >
        <text slot="trigger" class="rootText">left</text>
      </q-popover>
      <q-popover
        contents="{{ contents }}"
        placement="{{ placementArr[5] }}"
        popover-width="{{ popoverWidth }}"
        trigger-size="{{ triggerSize }}"
        offset="{{ offset }}"
        arrow-space="{{ arrowSpace }}"
        onmenu-item-tap="handleClick"
      >
        <text slot="trigger" class="rootText">leftBottom</text>
      </q-popover>
      <q-popover
        contents="{{ contents }}"
        placement="{{ placementArr[6] }}"
        popover-width="{{ popoverWidth }}"
        trigger-size="{{ triggerSize }}"
        offset="{{ offset }}"
        arrow-space="{{ arrowSpace }}"
        onmenu-item-tap="handleClick"
      >
        <text slot="trigger" class="rootText">rightTop</text>
      </q-popover>
      <q-popover
        contents="{{ contents }}"
        placement="{{ placementArr[7] }}"
        popover-width="{{ popoverWidth }}"
        trigger-size="{{ triggerSize }}"
        offset="{{ offset }}"
        arrow-space="{{ arrowSpace }}"
        onmenu-item-tap="handleClick"
      >
        <text slot="trigger" class="rootText">right</text>
      </q-popover>
      <q-popover
        contents="{{ contents }}"
        placement="{{ placementArr[8] }}"
        popover-width="{{ popoverWidth }}"
        trigger-size="{{ triggerSize }}"
        offset="{{ offset }}"
        arrow-space="{{ arrowSpace }}"
        onmenu-item-tap="handleClick"
      >
        <text slot="trigger" class="rootText">rightBottom</text>
      </q-popover>
    </div>
    <div class="footer">
      <q-popover
        contents="{{ contents }}"
        placement="{{ placementArr[9] }}"
        popover-width="{{ popoverWidth }}"
        trigger-size="{{ triggerSize }}"
        offset="{{ offset }}"
        arrow-space="{{ arrowSpace }}"
        onmenu-item-tap="handleClick"
      >
        <text slot="trigger" class="rootText">bottomLeft</text>
      </q-popover>
      <q-popover
        contents="{{ contents }}"
        placement="{{ placementArr[10] }}"
        popover-width="{{ popoverWidth }}"
        trigger-size="{{ triggerSize }}"
        offset="{{ offset }}"
        arrow-space="{{ arrowSpace }}"
        onmenu-item-tap="handleClick"
      >
        <text slot="trigger" class="rootText">bottom</text>
      </q-popover>
      <q-popover
        contents="{{ contents }}"
        placement="{{ placementArr[11] }}"
        popover-width="{{ popoverWidth }}"
        trigger-size="{{ triggerSize }}"
        offset="{{ offset }}"
        arrow-space="{{ arrowSpace }}"
        onmenu-item-tap="handleClick"
      >
        <text slot="trigger" class="rootText">bottomRight</text>
      </q-popover>
    </div>
  </div>
</template>
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
export default {
  data() {
    return {
      contents: [
        {
          content: '描述内容',
          iconPath: '/common/images/default_black.png',
        },
        {
          content: '描述内容',
          icon: {
            type: 'category-fill',
            color: '#456FFF',
          },
        },
        {
          content: '描述内容',
        },
      ],
      placementArr: [
        'topLeft',
        'top',
        'topRight',
        'leftTop',
        'left',
        'leftBottom',
        'rightTop',
        'right',
        'rightBottom',
        'bottomLeft',
        'bottom',
        'bottomRight',
      ],
      popoverWidth: 198,
      triggerSize: [175, 69],
      offset: [0, 0],
      arrowSpace: 21,
    }
  },
  handleClick(data) {
    const { event, index } = data.detail
    console.log(event)
    console.log(index)
  },
}
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
33
34
35
36
37
38
39
40
41
42
43
44
45
.wrap {
  background-color: #e1e1e1;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 280px 0;

  .header {
    width: 100%;
    padding: 0 20px;
    flex-direction: row;
    justify-content: space-around;
  }

  .body {
    width: 100%;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    flex: 1;
  }

  .footer {
    width: 100%;
    padding: 0 20px;
    flex-direction: row;
    justify-content: space-around;
  }

  .rootText {
    width: 175px;
    height: 69px;
    border-radius: 12px;
    font-size: 27px;
    color: rgba(0, 0, 0, 0.8);
    text-align: center;
    line-height: 69px;
    background-color: #ffffff;
  }
}
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
33
34
35
36
37
38
39
40

# API

# 组件属性

属性 类型 默认值 说明
popoverWidth Number 0 自定义气泡菜单宽度(必填)
contents Array [] 气泡菜单内容数组，数组每一项为一个对象，对象的具体说明见下方文档
placement String 'bottom' 箭头出现位置，可选值有: 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' |'rightBottom'
offset Array [0, 0] 气泡菜单在水平和垂直方向的偏移量
arrowSpace Number 10 当箭头位置不为 'top' | 'left' | 'right' | 'bottom' 时箭头离所在边界的距离（自定义值需大于 10）
triggerSize Array [] 用户通过 slot 自定义的组件的宽高（必填，而且须根据自己定义的宽高准确填入）

contents 属性数组每一项具体说明

属性 类型 说明
content String 菜单栏每一行的内容
iconPath String 菜单栏每一行的图标路径，iconPath 和 icon 只需填写一个，如都填写，优先使用 icon
icon Object 组件库中 icon 组件配置项，目前只支持 type 和 color 两个属性

# 组件事件

事件名称 事件描述 返回值
menuItemTap 点击菜单栏触发 (event, index)

# slot

名称 描述
trigger 自定义触发气泡菜单的组件，必填

← 异常页 page-error →