ButtonSelect.vue
2.77 KB
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
<template>
<div class="button-select">
<div class="selected">
<span class="select-val" @click="handleSelect">
{{ selectedVal }}
</span>
<van-icon name="clear" v-show="selectedVal" @click="handleClear" />
<van-icon name="arrow" @click="handleSelect" />
</div>
<van-action-sheet
v-model="show"
:actions="actionList"
cancel-text="取消"
close-on-click-action
:close-on-click-overlay="false"
class="bottom-action"
@select="onSelect"
@cancel="onCancel"
/>
</div>
</template>
<script>
export default {
name: 'ButtonSelect',
props: {
value: {
type: String,
default: '',
},
bindKey: {
type: String,
default: 'id',
},
actions: {
type: Array,
default: () => [],
},
props: {
type: Object,
default: () => {
return {
key: 'key',
name: 'name',
}
},
},
},
data() {
return {
show: false,
selectedVal: '',
}
},
computed: {
actionList() {
return this.actions.map((item) => {
return {
key: item[this.props.key],
name: item[this.props.name],
}
})
},
},
watch: {
value: {
handler(val) {
if (val) {
this.selectedVal = this.actionList.find(
(item) => item.key === val
)?.name
}
},
immediate: true,
},
},
methods: {
onCancel() {
this.show = false
},
handleSelect() {
this.show = true
},
onSelect(val) {
this.selectedVal = val.name
this.$emit('input', val.key)
},
handleClear() {
this.selectedVal = ''
this.$emit('input', '')
},
},
}
</script>
<style lang="scss" scoped>
.button-select {
width: 100%;
.selected {
width: 100%;
justify-content: flex-end;
display: flex;
align-items: center;
.select-val {
display: inline-flex;
justify-content: flex-end;
color: $base-text-color;
flex: 1;
height: 20px;
line-height: 20px;
}
.van-icon-clear {
color: $base-gray-disabled-text-color;
font-size: $base-font-size-big;
padding-left: 8px;
margin-top: 1px;
}
.van-icon-arrow {
padding-left: 4px;
margin-top: 2px;
font-size: $base-font-size-bigger;
color: $base-gray-text-color;
}
}
}
.button-select .bottom-action {
min-height: 35vh;
.van-action-sheet__content {
overflow-y: scroll;
}
}
.reject-method .bottom-action {
min-height: 26vh;
}
</style>