uview-plus 3.3.4 → 3.3.5
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.
- package/changelog.md +1 -1
- package/components/u-picker/props.js +12 -0
- package/components/u-picker/u-picker.vue +91 -51
- package/package.json +1 -1
package/changelog.md
CHANGED
|
@@ -2,6 +2,18 @@ import { defineMixin } from '../../libs/vue'
|
|
|
2
2
|
import defProps from '../../libs/config/props.js'
|
|
3
3
|
export const props = defineMixin({
|
|
4
4
|
props: {
|
|
5
|
+
modelValue: {
|
|
6
|
+
type: Array,
|
|
7
|
+
default: () => []
|
|
8
|
+
},
|
|
9
|
+
hasInput: {
|
|
10
|
+
type: Boolean,
|
|
11
|
+
default: false
|
|
12
|
+
},
|
|
13
|
+
placeholder: {
|
|
14
|
+
type: String,
|
|
15
|
+
default: () => '请选择'
|
|
16
|
+
},
|
|
5
17
|
// 是否展示picker弹窗
|
|
6
18
|
show: {
|
|
7
19
|
type: Boolean,
|
|
@@ -1,57 +1,66 @@
|
|
|
1
1
|
<template>
|
|
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
|
-
|
|
2
|
+
<view class="u-picker-warrper">
|
|
3
|
+
<view v-if="hasInput" class="u-picker-input cursor-pointer" @click="showByClickInput = !showByClickInput">
|
|
4
|
+
<slot>
|
|
5
|
+
<view>
|
|
6
|
+
{{ inputLabel && inputLabel.length ? inputLabel.join('/') : placeholder }}
|
|
7
|
+
</view>
|
|
8
|
+
</slot>
|
|
9
|
+
</view>
|
|
10
|
+
<u-popup
|
|
11
|
+
:show="show || (hasInput && showByClickInput)"
|
|
12
|
+
:mode="popupMode"
|
|
13
|
+
@close="closeHandler"
|
|
14
|
+
>
|
|
15
|
+
<view class="u-picker">
|
|
16
|
+
<u-toolbar
|
|
17
|
+
v-if="showToolbar"
|
|
18
|
+
:cancelColor="cancelColor"
|
|
19
|
+
:confirmColor="confirmColor"
|
|
20
|
+
:cancelText="cancelText"
|
|
21
|
+
:confirmText="confirmText"
|
|
22
|
+
:title="title"
|
|
23
|
+
@cancel="cancel"
|
|
24
|
+
@confirm="confirm"
|
|
25
|
+
></u-toolbar>
|
|
26
|
+
<picker-view
|
|
27
|
+
class="u-picker__view"
|
|
28
|
+
:indicatorStyle="`height: ${addUnit(itemHeight)}`"
|
|
29
|
+
:value="innerIndex"
|
|
30
|
+
:immediateChange="immediateChange"
|
|
31
|
+
:style="{
|
|
32
|
+
height: `${addUnit(visibleItemCount * itemHeight)}`
|
|
33
|
+
}"
|
|
34
|
+
@change="changeHandler"
|
|
32
35
|
>
|
|
33
|
-
<view
|
|
34
|
-
v-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
36
|
+
<picker-view-column
|
|
37
|
+
v-for="(item, index) in innerColumns"
|
|
38
|
+
:key="index"
|
|
39
|
+
class="u-picker__view__column"
|
|
40
|
+
>
|
|
41
|
+
<view
|
|
42
|
+
v-if="testArray(item)"
|
|
43
|
+
class="u-picker__view__column__item u-line-1"
|
|
44
|
+
v-for="(item1, index1) in item"
|
|
45
|
+
:key="index1"
|
|
46
|
+
:style="{
|
|
47
|
+
height: addUnit(itemHeight),
|
|
48
|
+
lineHeight: addUnit(itemHeight),
|
|
49
|
+
fontWeight: index1 === innerIndex[index] ? 'bold' : 'normal',
|
|
50
|
+
display: 'block'
|
|
51
|
+
}"
|
|
52
|
+
>{{ getItemText(item1) }}</view>
|
|
53
|
+
</picker-view-column>
|
|
54
|
+
</picker-view>
|
|
55
|
+
<view
|
|
56
|
+
v-if="loading"
|
|
57
|
+
class="u-picker--loading"
|
|
58
|
+
>
|
|
59
|
+
<u-loading-icon mode="circle"></u-loading-icon>
|
|
60
|
+
</view>
|
|
52
61
|
</view>
|
|
53
|
-
</
|
|
54
|
-
|
|
62
|
+
</u-popup>
|
|
63
|
+
</view>
|
|
55
64
|
</template>
|
|
56
65
|
|
|
57
66
|
<script>
|
|
@@ -96,6 +105,7 @@ export default {
|
|
|
96
105
|
innerColumns: [],
|
|
97
106
|
// 上一次的变化列索引
|
|
98
107
|
columnIndex: 0,
|
|
108
|
+
showByClickInput: false,
|
|
99
109
|
}
|
|
100
110
|
},
|
|
101
111
|
watch: {
|
|
@@ -116,6 +126,24 @@ export default {
|
|
|
116
126
|
},
|
|
117
127
|
},
|
|
118
128
|
emits: ['close', 'cancel', 'confirm', 'change'],
|
|
129
|
+
computed: {
|
|
130
|
+
inputLabel() {
|
|
131
|
+
let items = this.innerColumns.map((item, index) => item[this.innerIndex[index]])
|
|
132
|
+
let res = []
|
|
133
|
+
items.forEach(element => {
|
|
134
|
+
res.push(element[this.keyName])
|
|
135
|
+
});
|
|
136
|
+
return res
|
|
137
|
+
},
|
|
138
|
+
inputValue() {
|
|
139
|
+
let items = this.innerColumns.map((item, index) => item[this.innerIndex[index]])
|
|
140
|
+
let res = []
|
|
141
|
+
items.forEach(element => {
|
|
142
|
+
res.push(element['id'])
|
|
143
|
+
});
|
|
144
|
+
return res
|
|
145
|
+
}
|
|
146
|
+
},
|
|
119
147
|
methods: {
|
|
120
148
|
addUnit,
|
|
121
149
|
testArray: test.array,
|
|
@@ -130,15 +158,25 @@ export default {
|
|
|
130
158
|
// 关闭选择器
|
|
131
159
|
closeHandler() {
|
|
132
160
|
if (this.closeOnClickOverlay) {
|
|
161
|
+
if (this.hasInput) {
|
|
162
|
+
this.showByClickInput = false
|
|
163
|
+
}
|
|
133
164
|
this.$emit('close')
|
|
134
165
|
}
|
|
135
166
|
},
|
|
136
167
|
// 点击工具栏的取消按钮
|
|
137
168
|
cancel() {
|
|
169
|
+
if (this.hasInput) {
|
|
170
|
+
this.showByClickInput = false
|
|
171
|
+
}
|
|
138
172
|
this.$emit('cancel')
|
|
139
173
|
},
|
|
140
174
|
// 点击工具栏的确定按钮
|
|
141
175
|
confirm() {
|
|
176
|
+
this.$emit('update:modelValue', this.inputValue)
|
|
177
|
+
if (this.hasInput) {
|
|
178
|
+
this.showByClickInput = false
|
|
179
|
+
}
|
|
142
180
|
this.$emit('confirm', {
|
|
143
181
|
indexs: this.innerIndex,
|
|
144
182
|
value: this.innerColumns.map((item, index) => item[this.innerIndex[index]]),
|
|
@@ -169,6 +207,8 @@ export default {
|
|
|
169
207
|
this.setLastIndex(value)
|
|
170
208
|
this.setIndexs(value)
|
|
171
209
|
|
|
210
|
+
this.$emit('update:modelValue', this.inputValue)
|
|
211
|
+
|
|
172
212
|
this.$emit('change', {
|
|
173
213
|
// #ifndef MP-WEIXIN || MP-LARK
|
|
174
214
|
// 微信小程序不能传递this，会因为循环引用而报错
|