Popover 弹出框
基础用法
<template>
<PlusPopover placement="top-start" trigger="hover" title="Title" :width="200">
this is content, this is content, this is content
<template #reference>
<el-button class="mgb-10 mgr-10">Hover to activate</el-button>
</template>
</PlusPopover>
<PlusPopover
placement="bottom"
title="Title"
:width="200"
trigger="click"
content="this is content, this is content, this is content"
>
<template #reference>
<el-button class="mgb-10 mgr-10">Click to activate</el-button>
</template>
</PlusPopover>
<PlusPopover
title="Title"
:width="200"
trigger="contextmenu"
content="this is content, this is content, this is content"
>
<template #reference>
<el-button class="mgb-10 mgr-10">Contextmenu to activate</el-button>
</template>
</PlusPopover>
<PlusPopover :visible="visible" placement="bottom" title="Title" trigger="click" :width="200">
this is content, this is content, this is content
<template #reference>
<el-button class="mgb-10" @click="visible = !visible">Manual to activate</el-button>
</template>
</PlusPopover>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const visible = ref(false)
</script>
<style lang="scss" scoped>
.mgb-10 {
margin-bottom: 10px;
}
.mgr-10 {
margin-right: 10px;
}
</style>
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
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
内容可扩展
<template>
<PlusPopover placement="bottom" :width="150" trigger="click">
<div class="plus-table-toolbar__density">
<el-button
v-for="item in buttonNameDensity"
:key="item.size"
:plain="defaultSize !== item.size"
type="primary"
size="small"
>
{{ item.text }}
</el-button>
</div>
<template #reference>
<el-button class="mgr-10">密度</el-button>
</template>
</PlusPopover>
<PlusPopover placement="right" :width="400" trigger="click">
<template #reference>
<el-button>Click to activate</el-button>
</template>
<el-table :data="gridData">
<el-table-column width="150" property="date" label="date" />
<el-table-column width="100" property="name" label="name" />
<el-table-column width="300" property="address" label="address" />
</el-table>
</PlusPopover>
</template>
<script lang="ts" setup>
import type { ComputedRef } from 'vue'
import { ref } from 'vue'
import type { ComponentSize } from 'element-plus/es/constants'
export interface ButtonNameDensity {
size: ComponentSize
text: string | ComputedRef<string>
}
const defaultSize = ref('default')
const buttonNameDensity: ButtonNameDensity[] = [
{
size: 'default',
text: '默认'
},
{
size: 'large',
text: '宽松'
},
{
size: 'small',
text: '紧凑'
}
]
const gridData = [
{
date: '2016-05-02',
name: 'Jack',
address: 'New York City'
},
{
date: '2016-05-04',
name: 'Jack',
address: 'New York City'
},
{
date: '2016-05-01',
name: 'Jack',
address: 'New York City'
},
{
date: '2016-05-03',
name: 'Jack',
address: 'New York City'
}
]
</script>
<style lang="scss" scoped>
.mgr-10 {
margin-right: 10px;
}
</style>
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
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
虚拟触发
<template>
<el-button ref="buttonRef" v-click-outside="onClickOutside">Click me</el-button>
<PlusPopover
ref="popoverRef"
:virtual-ref="buttonRef"
trigger="click"
title="With title"
virtual-triggering
>
<span> Some content </span>
</PlusPopover>
</template>
<script lang="ts" setup>
import { ref, unref } from 'vue'
import { ClickOutside as vClickOutside } from 'element-plus'
const buttonRef = ref()
const popoverRef = ref()
const onClickOutside = () => {
unref(popoverRef).popperRef?.delayHide?.()
}
</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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
嵌套操作
<template>
<PlusPopover
:visible="visible"
placement="top"
:width="160"
has-show-bottom-button
@confirm="confirm"
@cancel="cancel"
>
<p>Are you sure to delete this?</p>
<template #reference>
<el-button @click="visible = !visible">Delete</el-button>
</template>
</PlusPopover>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const visible = ref(false)
const confirm = () => {
console.log('confirm')
}
const cancel = () => {
console.log('cancel')
}
</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
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
Popover API
Popover Attributes
名称 | 说明 | 类型 | 默认值 | 是否必须 |
---|---|---|---|---|
visible | Popover 是否显示 | boolean | false | 否 |
hasShowBottomButton | 是否显示底部按钮 | boolean | false | 否 |
... | ... | ... | ... | ... |
...
表示同时支持所有 ElPopover Attributes
Popover Events
名称 | 说明 | 类型 |
---|---|---|
show | 显示时触发 | function |
confirm | 点击确定按钮触发 | function |
cancel | 点击取消按钮触发 | function |
... | ... | ... |
...
表示同时支持所有 ElPopover Attributes
Popover Slots
插槽名 | 说明 |
---|---|
... | ... |
...
表示同时支持所有 ElPopover Attributes