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
<template>
<div>
<el-popover
placement="bottom"
:width="width"
trigger="click"
popper-class="popoverInputClass"
v-model="popoverShow"
>
<ul class="el-select-dropdown__list">
<li
class="el-select-dropdown__item"
v-for="(item, idx) in liData"
:key="idx"
@click="selectItem(item)"
>
<span>{{ item }}</span>
</li>
</ul>
<c-input v-model="model" slot="reference">
<template v-slot:suffix>
<i
class="el-icon-arrow-down"
v-if="!popoverShow"
@click="popoverShow = false"
></i>
<i class="el-icon-arrow-up" v-else @click="popoverShow = true"></i>
</template>
</c-input>
</el-popover>
</div>
</template>
<script>
export default {
data() {
return {
popoverShow: false,
width: null,
};
},
props: {
value: {
type: [String, Number],
default: undefined,
},
liData: {
type: Array,
default: [],
},
},
computed: {
model: {
get() {
return this.value;
},
set(newVal) {
this.$emit("input", newVal);
},
},
},
mounted() {
this.width = this.$el.clientWidth;
},
methods: {
selectItem(val) {
this.popoverShow = false;
this.model = val;
},
},
};
</script>
<style>
.el-popper.popoverInputClass {
margin: 12px 0 5px;
padding: 0;
}
</style>
<style scoped>
.el-select-dropdown__list {
list-style: none;
padding: 6px 0;
margin: 0;
box-sizing: border-box;
padding-inline-start: 0;
}
.el-select-dropdown__item {
font-size: 14px;
padding: 0 20px;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #606266;
height: 34px;
line-height: 34px;
box-sizing: border-box;
cursor: pointer;
}
</style>