Skip to content

Commit bc6c55f

Browse files
mehaotianFasttian
mehaotian
authored and
Fasttian
committed
update uni-ui v1.3.8
1 parent 51ed5d0 commit bc6c55f

File tree

4 files changed

+283
-212
lines changed

4 files changed

+283
-212
lines changed

‎components/uni-data-checkbox/uni-data-checkbox.vue‎

Lines changed: 94 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<view class="uni-data-checklist">
2+
<view class="uni-data-checklist" :style="{'margin-top':isTop+'px'}">
33
<template v-if="!isLocal">
44
<view class="uni-data-loading">
55
<uni-load-more v-if="!mixinDatacomErrorMessage" status="loading" iconType="snow" :iconSize="18" :content-text="contentText"></uni-load-more>
@@ -8,36 +8,26 @@
88
</template>
99
<template v-else>
1010
<checkbox-group v-if="multiple" class="checklist-group" :class="{'is-list':mode==='list' || wrap}" @change="chagne">
11-
<!-- :class="item.labelClass" -->
1211
<label class="checklist-box" :class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']" :style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
13-
<checkbox class="hidden" hidden :disabled="disabled || !!item.disabled" :value="item.value+''" :checked="item.selected" />
14-
<!-- :style="item.styleIcon" -->
15-
12+
<checkbox class="hidden" hidden :disabled="disabled || !!item.disabled" :value="item[map.value]+''" :checked="item.selected" />
1613
<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="checkbox__inner" :style="item.styleIcon">
17-
<!-- :class="item.checkboxClass" -->
1814
<view class="checkbox__inner-icon"></view>
1915
</view>
2016
<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
21-
<!-- :class="item.textClass" -->
22-
<text class="checklist-text" :style="item.styleIconText">{{item.text}}</text>
23-
<!-- :class="item.listClass" -->
17+
<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
2418
<view v-if="mode === 'list' && icon === 'right'" class="checkobx__list" :style="item.styleBackgroud"></view>
2519
</view>
2620
</label>
2721
</checkbox-group>
2822
<radio-group v-else class="checklist-group" :class="{'is-list':mode==='list','is-wrap':wrap}" @change="chagne">
2923
<!-- -->
3024
<label class="checklist-box" :class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']" :style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
31-
<radio class="hidden" hidden :disabled="disabled || item.disabled" :value="item.value+''" :checked="item.selected" />
32-
<!-- :class="item.checkboxBgClass" -->
25+
<radio class="hidden" hidden :disabled="disabled || item.disabled" :value="item[map.value]+''" :checked="item.selected" />
3326
<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="radio__inner" :style="item.styleBackgroud">
34-
<!-- :class="item.checkboxClass" -->
3527
<view class="radio__inner-icon" :style="item.styleIcon"></view>
3628
</view>
3729
<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
38-
<!-- :class="item.textClass" -->
39-
<text class="checklist-text" :style="item.styleIconText">{{item.text}}</text>
40-
<!-- :class="item.listClass" -->
30+
<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
4131
<view v-if="mode === 'list' && icon === 'right'" :style="item.styleRightIcon" class="checkobx__list"></view>
4232
</view>
4333
</label>
@@ -48,9 +38,9 @@
4838

4939
<script>
5040
/**
51-
* DataCheckbox 数据选择器
41+
* DataChecklist 数据选择器
5242
* @description 通过数据渲染 checkbox 和 radio
53-
* @tutorial https://ext.dcloud.net.cn/plugin?id=3456
43+
* @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
5444
* @property {String} mode = [default| list | button | tag] 显示模式
5545
* @value default 默认横排模式
5646
* @value list 列表模式
@@ -66,19 +56,28 @@
6656
* @property {Boolean} selectedColor 选中颜色
6757
* @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效
6858
* @property {Boolean} selectedTextColor 选中文本颜色，如不填写则自动显示
59+
* @property {Object} map 字段映射， 默认 map={text:'text',value:'value'}
6960
* @value left 左侧显示
7061
* @value right 右侧显示
7162
* @event {Function} change 选中发生变化触发
7263
*/
7364
65+
// import clientdb from './clientdb.js'
7466
export default {
75-
name: 'uniDataCheckbox',
67+
name: 'uniDataChecklist',
68+
// mixins: [clientdb],
7669
mixins: [uniCloud.mixinDatacom || {}],
70+
// model: {
71+
// prop: 'modelValue',
72+
// event: 'update:modelValue'
73+
// },
74+
emits: ['input', 'update:modelValue', 'change'],
7775
props: {
7876
mode: {
7977
type: String,
8078
default: 'default'
8179
},
80+
8281
multiple: {
8382
type: Boolean,
8483
default: false
@@ -89,6 +88,13 @@
8988
return ''
9089
}
9190
},
91+
// TODO vue3
92+
modelValue: {
93+
type: [Array, String, Number],
94+
default () {
95+
return '';
96+
}
97+
},
9298
localdata: {
9399
type: Array,
94100
default () {
@@ -113,11 +119,11 @@
113119
},
114120
selectedColor: {
115121
type: String,
116-
default: '#007aff'
122+
default: ''
117123
},
118124
selectedTextColor: {
119125
type: String,
120-
default: '#333'
126+
default: ''
121127
},
122128
emptyText: {
123129
type: String,
@@ -126,6 +132,15 @@
126132
disabled: {
127133
type: Boolean,
128134
default: false
135+
},
136+
map: {
137+
type: Object,
138+
default () {
139+
return {
140+
text: 'text',
141+
value: 'value'
142+
}
143+
}
129144
}
130145
},
131146
watch: {
@@ -143,6 +158,10 @@
143158
value(newVal) {
144159
this.dataList = this.getDataList(newVal)
145160
this.formItem && this.formItem.setValue(newVal)
161+
},
162+
modelValue(newVal) {
163+
this.dataList = this.getDataList(newVal);
164+
this.formItem && this.formItem.setValue(newVal);
146165
}
147166
},
148167
data() {
@@ -158,15 +177,24 @@
158177
styles: {
159178
selectedColor: '#007aff',
160179
selectedTextColor: '#333',
161-
}
180+
},
181+
isTop: 0
162182
};
163183
},
184+
computed: {
185+
dataValue() {
186+
if (this.value === '') return this.modelValue
187+
if (this.modelValue === '') return this.value
188+
return this.value
189+
}
190+
},
164191
created() {
165192
this.form = this.getForm('uniForms')
166193
this.formItem = this.getForm('uniFormsItem')
167-
this.formItem && this.formItem.setValue(this.value)
194+
// this.formItem && this.formItem.setValue(this.value)
168195
169196
if (this.formItem) {
197+
this.isTop = 6
170198
if (this.formItem.name) {
171199
this.rename = this.formItem.name
172200
this.form.inputChildrens.push(this)
@@ -221,22 +249,26 @@
221249
222250
if (this.multiple) {
223251
this.range.forEach(item => {
224-
if (values.includes(item.value + '')) {
225-
detail.value.push(item.value)
252+
253+
if (values.includes(item[this.map.value] + '')) {
254+
detail.value.push(item[this.map.value])
226255
detail.data.push(item)
227256
}
228257
})
229258
} else {
230-
const range = this.range.find(item => (item.value + '') === values)
259+
const range = this.range.find(item => (item[this.map.value] + '') === values)
231260
if (range) {
232261
detail = {
233-
value: range.value,
262+
value: range[this.map.value],
234263
data: range
235264
}
236265
}
237266
}
238267
this.formItem && this.formItem.setValue(detail.value)
239-
this.$emit('input', detail.value)
268+
// TODO 兼容 vue2
269+
this.$emit('input', detail.value);
270+
// // TOTO 兼容 vue3
271+
this.$emit('update:modelValue', detail.value);
240272
this.$emit('change', {
241273
detail
242274
})
@@ -267,13 +299,13 @@
267299
item.disabled = item.disable || item.disabled || false
268300
if (this.multiple) {
269301
if (value.length > 0) {
270-
let have = value.find(val => val === item.value)
302+
let have = value.find(val => val === item[this.map.value])
271303
item.selected = have !== undefined
272304
} else {
273305
item.selected = false
274306
}
275307
} else {
276-
item.selected = value === item.value
308+
item.selected = value === item[this.map.value]
277309
}
278310
279311
list.push(item)
@@ -291,14 +323,14 @@
291323
list.forEach((item, index) => {
292324
if (this.multiple) {
293325
if (selectList.length <= min) {
294-
let have = selectList.find(val => val.value === item.value)
326+
let have = selectList.find(val => val[this.map.value] === item[this.map.value])
295327
if (have !== undefined) {
296328
item.disabled = true
297329
}
298330
}
299331
300332
if (selectList.length >= max && max !== '') {
301-
let have = selectList.find(val => val.value === item.value)
333+
let have = selectList.find(val => val[this.map.value] === item[this.map.value])
302334
if (have === undefined) {
303335
item.disabled = true
304336
}
@@ -320,37 +352,35 @@
320352
item.styleIcon = this.setStyleIcon(item)
321353
item.styleIconText = this.setStyleIconText(item)
322354
item.styleRightIcon = this.setStyleRightIcon(item)
323-
324355
},
325356
326357
/**
327358
* 获取选中值
328359
* @param {Object} range
329360
*/
330361
getSelectedValue(range) {
331-
if (!this.multiple) return this.value
362+
if (!this.multiple) return this.dataValue
332363
let selectedArr = []
333364
range.forEach((item) => {
334365
if (item.selected) {
335-
selectedArr.push(item.value)
366+
selectedArr.push(item[this.map.value])
336367
}
337368
})
338-
return this.value.length > 0 ? this.value : selectedArr
369+
return this.dataValue.length > 0 ? this.dataValue : selectedArr
339370
},
340371
341372
/**
342373
* 设置背景样式
343374
*/
344375
setStyleBackgroud(item) {
345376
let styles = {}
346-
// if (item.selected) {
377+
let selectedColor = this.selectedColor ? this.selectedColor : '#007aff'
347378
if (this.mode !== 'list') {
348-
styles['border-color'] = item.selected ? this.selectedColor : '#DCDFE6'
379+
styles['border-color'] = item.selected ? selectedColor : '#DCDFE6'
349380
}
350381
if (this.mode === 'tag') {
351-
styles['background-color'] = item.selected ? this.selectedColor : '#f5f5f5'
382+
styles['background-color'] = item.selected ? selectedColor : '#f5f5f5'
352383
}
353-
// }
354384
let classles = ''
355385
for (let i in styles) {
356386
classles += `${i}:${styles[i]};`
@@ -360,62 +390,50 @@
360390
setStyleIcon(item) {
361391
let styles = {}
362392
let classles = ''
363-
// if (item.selected) {
364-
styles['background-color'] = item.selected ? this.selectedColor : '#fff'
365-
styles['border-color'] = item.selected ? this.selectedColor : '#DCDFE6'
393+
let selectedColor = this.selectedColor ? this.selectedColor : '#007aff'
394+
styles['background-color'] = item.selected ? selectedColor : '#fff'
395+
styles['border-color'] = item.selected ? selectedColor : '#DCDFE6'
366396
367397
if (!item.selected && item.disabled) {
368398
styles['background-color'] = '#F2F6FC'
369-
styles['border-color'] = item.selected ? this.selectedColor : '#DCDFE6'
399+
styles['border-color'] = item.selected ? selectedColor : '#DCDFE6'
370400
}
371401
372402
for (let i in styles) {
373403
classles += `${i}:${styles[i]};`
374404
}
375-
// }
376405
return classles
377406
},
378407
setStyleIconText(item) {
379408
let styles = {}
380409
let classles = ''
381-
// if (item.selected) {
382-
// if (this.selectedTextColor) {
383-
// styles.color = item.selected?this.selectedTextColor:'#999'
384-
// } else {
410+
let selectedColor = this.selectedColor ? this.selectedColor : '#007aff'
385411
if (this.mode === 'tag') {
386-
styles.color = item.selected ? '#fff' : '#333'
387-
412+
styles.color = item.selected ? (this.selectedTextColor ? this.selectedTextColor : '#fff') : '#333'
388413
} else {
389-
styles.color = item.selected ? this.selectedColor : '#333'
414+
styles.color = item.selected ? (this.selectedTextColor ? this.selectedTextColor : selectedColor) : '#333'
390415
}
391416
if (!item.selected && item.disabled) {
392417
styles.color = '#999'
393418
}
394-
// }
419+
395420
for (let i in styles) {
396421
classles += `${i}:${styles[i]};`
397422
}
398-
// }
399-
400423
return classles
401424
},
402425
setStyleRightIcon(item) {
403426
let styles = {}
404427
let classles = ''
405-
// if (item.selected) {
406428
if (this.mode === 'list') {
407429
styles['border-color'] = item.selected ? this.styles.selectedColor : '#DCDFE6'
408430
}
409431
for (let i in styles) {
410432
classles += `${i}:${styles[i]};`
411433
}
412-
// }
413434
414435
return classles
415436
}
416-
// setColor(){
417-
// return
418-
// }
419437
}
420438
}
421439
</script>
@@ -484,11 +502,15 @@
484502
}
485503
486504
.uni-data-checklist .checklist-group .checklist-box .checklist-content .checkobx__list {
487-
border: 1px solid #fff;
488-
border-left: 0;
489-
border-top: 0;
505+
border-right-width: 1px;
506+
border-right-color: #007aff;
507+
border-right-style: solid;
508+
border-bottom-width: 1px;
509+
border-bottom-color: #007aff;
510+
border-bottom-style: solid;
490511
height: 12px;
491512
width: 6px;
513+
left: -5px;
492514
transform-origin: center;
493515
transform: rotate(45deg);
494516
opacity: 0;
@@ -519,9 +541,12 @@
519541
left: 5px;
520542
height: 8px;
521543
width: 4px;
522-
border: 1px solid #fff;
523-
border-left: 0;
524-
border-top: 0;
544+
border-right-width: 1px;
545+
border-right-color: #fff;
546+
border-right-style: solid;
547+
border-bottom-width: 1px;
548+
border-bottom-color: #fff;
549+
border-bottom-style: solid;
525550
opacity: 0;
526551
transform-origin: center;
527552
transform: rotate(40deg);
@@ -607,6 +632,10 @@
607632
opacity: 0.4;
608633
}
609634
635+
.uni-data-checklist .checklist-group .checklist-box.is--default.is-checked.is-disable .radio__inner {
636+
opacity: 0.4;
637+
}
638+
610639
.uni-data-checklist .checklist-group .checklist-box.is--button {
611640
margin-right: 10px;
612641
padding: 5px 15px;

0 commit comments

Comments
 (0)