mali-applet-ui 1.1.63 → 1.1.65
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<view class="ml-list-select-page-warpper">
|
|
4
4
|
<view v-if="hasEmpty" class="ml-list-select-page-placeholder">{{ readonly ? '' : placeholder }}</view>
|
|
5
5
|
<view v-else>
|
|
6
|
-
<slot :items="
|
|
6
|
+
<slot :items="selectRowList">
|
|
7
7
|
<view>{{ selectLabel }}</view>
|
|
8
8
|
</slot>
|
|
9
9
|
</view>
|
|
@@ -11,6 +11,9 @@
|
|
|
11
11
|
<view v-if="clearable && !readonly && !hasEmpty" class="ml-list-select-page-clear-icon" @click.stop="clearEvent">
|
|
12
12
|
<ml-icon name="delete-filling"></ml-icon>
|
|
13
13
|
</view>
|
|
14
|
+
<view v-else-if="!readonly && showAddBtn" class="ml-list-select-page-add-item" @click="openEvent">
|
|
15
|
+
<ml-icon name="add-circle" />
|
|
16
|
+
</view>
|
|
14
17
|
<view v-else-if="!readonly" class="ml-list-select-page-icon">
|
|
15
18
|
<ml-icon name="arrow-right" />
|
|
16
19
|
</view>
|
|
@@ -24,6 +27,7 @@ export default {
|
|
|
24
27
|
name: 'MlListSelectPage',
|
|
25
28
|
props: {
|
|
26
29
|
value: [Array, Number, String],
|
|
30
|
+
selectRows: Array,
|
|
27
31
|
defaultOptions: Array,
|
|
28
32
|
options: Array,
|
|
29
33
|
optionProps: Object,
|
|
@@ -40,6 +44,7 @@ export default {
|
|
|
40
44
|
type: String,
|
|
41
45
|
default: '请选择'
|
|
42
46
|
},
|
|
47
|
+
showAddBtn: Boolean,
|
|
43
48
|
disabled: Boolean,
|
|
44
49
|
readonly: Boolean,
|
|
45
50
|
border: Boolean,
|
|
@@ -68,11 +73,11 @@ export default {
|
|
|
68
73
|
}
|
|
69
74
|
return XEUtils.eqNull(this.value) || this.value === ''
|
|
70
75
|
},
|
|
71
|
-
|
|
76
|
+
selectRowList () {
|
|
72
77
|
return this.getSelectRows(this.value)
|
|
73
78
|
},
|
|
74
79
|
selectLabel () {
|
|
75
|
-
return this.
|
|
80
|
+
return this.selectRowList.map(item => item[this.optLabelField]).join(',')
|
|
76
81
|
}
|
|
77
82
|
},
|
|
78
83
|
watch: {
|
|
@@ -105,7 +110,23 @@ export default {
|
|
|
105
110
|
}
|
|
106
111
|
})
|
|
107
112
|
},
|
|
113
|
+
remove (item) {
|
|
114
|
+
let value = null
|
|
115
|
+
if (this.type === 'checkbox') {
|
|
116
|
+
value = this.value.filter(key => key !== item[this.optValueField])
|
|
117
|
+
}
|
|
118
|
+
this.$emit('input', value)
|
|
119
|
+
this.$emit('update:selectRows', this.getSelectRows(value))
|
|
120
|
+
},
|
|
108
121
|
tapEvent () {
|
|
122
|
+
if (this.showAddBtn || this.disabled) {
|
|
123
|
+
return
|
|
124
|
+
}
|
|
125
|
+
this.openEvent()
|
|
126
|
+
this.$emit('tap', {})
|
|
127
|
+
this.$emit('click', {})
|
|
128
|
+
},
|
|
129
|
+
openEvent () {
|
|
109
130
|
if (this.disabled) {
|
|
110
131
|
return
|
|
111
132
|
}
|
|
@@ -125,12 +146,11 @@ export default {
|
|
|
125
146
|
// 点击确认事件
|
|
126
147
|
confirm: (params) => {
|
|
127
148
|
this.$emit('input', params.value)
|
|
149
|
+
this.$emit('update:selectRows', params.selectRows)
|
|
128
150
|
this.$emit('change', params)
|
|
129
151
|
}
|
|
130
152
|
}
|
|
131
153
|
})
|
|
132
|
-
this.$emit('tap', {})
|
|
133
|
-
this.$emit('click', {})
|
|
134
154
|
},
|
|
135
155
|
clearEvent () {
|
|
136
156
|
let value = null
|
|
@@ -149,17 +169,27 @@ export default {
|
|
|
149
169
|
display: flex;
|
|
150
170
|
flex-direction: row;
|
|
151
171
|
padding: 0 10rpx;
|
|
152
|
-
height: 70rpx;
|
|
153
172
|
line-height: 70rpx;
|
|
154
|
-
&.is-disabled {
|
|
155
|
-
|
|
156
|
-
}
|
|
157
173
|
.ml-list-select-page-warpper {
|
|
158
174
|
flex-grow: 1;
|
|
159
175
|
overflow: hidden;
|
|
160
176
|
text-overflow: ellipsis;
|
|
161
177
|
white-space: nowrap;
|
|
162
178
|
}
|
|
179
|
+
.ml-list-select-page-add-item {
|
|
180
|
+
position: absolute;
|
|
181
|
+
top: -74rpx;
|
|
182
|
+
right: 20rpx;
|
|
183
|
+
font-size: 44rpx;
|
|
184
|
+
}
|
|
185
|
+
&.is-disabled {
|
|
186
|
+
// #ifdef H5
|
|
187
|
+
cursor: pointer;
|
|
188
|
+
// #endif
|
|
189
|
+
.ml-list-select-page-add-item {
|
|
190
|
+
color: #c0c0c0;
|
|
191
|
+
}
|
|
192
|
+
}
|
|
163
193
|
.ml-list-select-page-clear-icon,
|
|
164
194
|
.ml-list-select-page-icon {
|
|
165
195
|
flex-shrink: 0;
|