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
| <style scoped lang="scss">
| .up-choose {
| ::v-deep .up-tag {
| font-weight: 600;
| }
| &:last-child {
| margin-right: 0;
| }
| }
|
| .up-choose-wrap {
| flex-wrap: wrap;
| }
|
| .up-choose-nowrap {
| flex-wrap: nowrap;
| white-space: nowrap;
| }
| </style>
|
| <template>
| <scroll-view
| :scroll-x="wrap === false"
| :class="['up-choose', wrap ? 'up-choose-wrap' : 'up-choose-nowrap']">
| <template :key="item.id" v-for="(item,index) in options">
| <view :style="{width: itemWidth, display: 'inline-block'}">
| <slot :item="item" :index="index">
| <up-tag :type="index == currentIndex ? 'primary' : 'info'"
| size="large" :plain="index == currentIndex ? false : true"
| :class="currentIndex === index ? 'active': ''" :height="itemHeight"
| :style="{width: itemWidth, padding: itemPadding}"
| @click="change(index)">
| {{item[labelName]}}
| </up-tag>
| </slot>
| </view>
| </template>
| </scroll-view>
| </template>
|
| <script>
| export default {
| name: 'up-choose',
| props: {
| options:{
| type: Array,
| default: ()=>{
| return [];
| }
| },
| modelValue: {
| type: [Number,String,Array],
| default: false
| },
| type: {
| type: [String],
| default: 'radio'
| },
| itemWidth: {
| type: [String],
| default: 'auto'
| },
| itemHeight: {
| type: [String],
| default: '50px'
| },
| itemPadding: {
| type: [String],
| default: '8px'
| },
| labelName: {
| type: String,
| default: 'title'
| },
| valueName: {
| type: String,
| default: 'value'
| },
| customClick: {
| type: Boolean,
| default: false
| },
| // 是否换行
| wrap: {
| type: Boolean,
| default: true
| }
| },
| data() {
| return {
| currentIndex: ''
| }
| },
| created: function () {
| this.currentIndex = this.modelValue;
| },
| emits: ['update:modelValue', 'custom-click'],
| methods: {
| change(index){
| if (this.customClick) {
| this.$emit('custom-click', index);
| } else {
| this.currentIndex = index;
| this.$emit('update:modelValue', index);
| }
| }
| }
| }
| </script>
|
|
