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
| <!-- components/fs-select/fs-select.vue -->
| <template>
| <view style="width: 100%">
| <u-input
| :input-align="inputaling"
| :placeholder="placeholderText"
| v-model="valueLable"
| type="select"
| :select-open="show"
| @click="show = true"
| :border="border"
| readonly
| />
| <u-select
| v-model="show"
| :mode="mode"
| :list="list"
| @confirm="confirm"
| :value-name="valuename"
| :label-name="labelname"
| :safe-area-inset-bottom="true"
| ></u-select>
| </view>
| </template>
|
| <script>
| export default {
| name: "fs-select",
| props: {
| placeholder: {
| type: String,
| default: ''
| },
| // 显示文本的字段名
| labelname: {
| type: String,
| default: 'label'
| },
| // 值的字段名
| valuename: {
| type: String,
| default: 'value'
| },
| // 选择器模式
| mode: {
| type: String,
| default: 'single-column'
| },
| // 数据列表
| list: {
| type: Array,
| default() {
| return []
| }
| },
| // 选中的值
| value: {
| type: [String, Number],
| required: true
| },
| // 是否显示边框
| border: {
| type: Boolean,
| default: false
| },
| // 文本对齐方式
| inputaling: {
| type: String,
| default: 'right'
| }
| },
| data() {
| return {
| show: false,
| valueLable: ''
| };
| },
| computed: {
| placeholderText() {
| return this.placeholder || `请选择`;
| }
| },
| watch: {
| // 监听value值变化，更新显示文本
| value: {
| handler(newValue) {
| this.updateDisplayLabel(newValue);
| },
| immediate: true
| },
| // 监听list数据变化，更新显示文本
| list: {
| handler(newList) {
| this.updateDisplayLabel(this.value);
| },
| deep: true
| }
| },
| methods: {
| // 更新显示文本
| updateDisplayLabel(currentValue) {
| if (!currentValue && currentValue !== 0) {
| this.valueLable = '';
| return;
| }
|
| const foundItem = this.list.find(item =>
| String(item[this.valuename]) === String(currentValue)
| );
|
| if (foundItem) {
| this.valueLable = foundItem[this.labelname];
| } else {
| this.valueLable = '';
| }
| },
| // 确认选择
| confirm(e) {
| if (e.length > 0) {
| this.valueLable = e[0].label;
| // 抛出选中的value值
| this.$emit('input', e[0].value);
| // 如果需要更详细的数据，可以额外抛出事件
| this.$emit('change', {
| value: e[0].value,
| label: e[0].label,
| item: e[0]
| });
| }
| }
| }
| }
| </script>
|
| <style lang="scss" scoped>
| // 可以在这里添加自定义样式
| </style>
|
|
