194 lines
3.6 KiB
Vue
194 lines
3.6 KiB
Vue
<template>
|
|
<view style="width:100%;">
|
|
<input type="hidden" :name="name" :value="tkv.id" style="display:none;" />
|
|
<template v-if="hasmore">
|
|
<input type="hidden" :name="name+'_name'" :value="tkv.name" style="display:none;" />
|
|
</template>
|
|
<radio-group class="_gp" :class="{'_line':line,'_left':left,'_itemright':itemright}">
|
|
<view @tap="chkitem(item)" class="_item" v-for="(item,index) in range" :key="index">
|
|
<ciy-checkitem style="pointer-events: none;" :disabled="disabled" :tag="item.id+''" :value="tkv.id == item.id"></ciy-checkitem>
|
|
<view :style="{color:disabled?'var(--txt1)':''}">{{item.name}}</view>
|
|
</view>
|
|
</radio-group>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
behaviors: ['uni://form-field-group'],
|
|
emits: ['change', 'update:modelValue'],
|
|
props: {
|
|
name: {
|
|
type: String
|
|
},
|
|
modelValue: {
|
|
type: [String, Number],
|
|
default: ''
|
|
},
|
|
value: {
|
|
type: [String, Number],
|
|
default: ''
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
initevent: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
hasmore: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
range: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
left: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
itemright: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
line: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
byname: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
v: '',
|
|
valuearr: {
|
|
id: 0,
|
|
name: ''
|
|
},
|
|
};
|
|
},
|
|
watch: {
|
|
tkv: {
|
|
handler(newD, oldD) {
|
|
if (this.from && newD.id == oldD.id)
|
|
return;
|
|
if (!this.from)
|
|
this.from = 'init';
|
|
else if (this.from == 'init') {
|
|
this.from = 'check';
|
|
}
|
|
if (this.from != 'init') {
|
|
if (this.byname)
|
|
this.$emit('update:modelValue', newD.name);
|
|
else
|
|
this.$emit('update:modelValue', newD.id);
|
|
}
|
|
if (this.from != 'init' || this.initevent) {
|
|
this.$emit('change', {
|
|
name: this.name,
|
|
from: this.from,
|
|
value: {
|
|
id: newD.id,
|
|
name: newD.name
|
|
}
|
|
});
|
|
}
|
|
},
|
|
immediate: true
|
|
},
|
|
value: {
|
|
handler(newD, oldD) {
|
|
if (newD || oldD)
|
|
this.v = 'value';
|
|
},
|
|
immediate: true
|
|
},
|
|
modelValue: {
|
|
handler(newD, oldD) {
|
|
if (newD || oldD)
|
|
this.v = 'modelValue';
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
computed: {
|
|
tkv() {
|
|
var val = '';
|
|
if (this.v == 'modelValue') {
|
|
if (typeof(this.modelValue) == 'number')
|
|
val = this.modelValue;
|
|
else if (this.modelValue)
|
|
val = this.modelValue;
|
|
} else if (this.v == 'value') {
|
|
if (typeof(this.value) == 'number')
|
|
val = this.value;
|
|
else if (this.value)
|
|
val = this.value;
|
|
} else {
|
|
val = this.v;
|
|
}
|
|
if (this.byname) {
|
|
for (var i in this.range) {
|
|
if (this.range[i].name == val)
|
|
return {
|
|
...this.range[i]
|
|
};
|
|
}
|
|
} else {
|
|
for (var i in this.range) {
|
|
if (this.range[i].id == val)
|
|
return {
|
|
...this.range[i]
|
|
};
|
|
}
|
|
}
|
|
return {
|
|
id: 0,
|
|
name: ''
|
|
};
|
|
}
|
|
},
|
|
mounted() {},
|
|
methods: {
|
|
chkitem(itm) {
|
|
if (this.disabled)
|
|
return;
|
|
this.v = itm.id;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
._gp {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
._gp._left {
|
|
flex-direction: row;
|
|
}
|
|
|
|
._gp ._item {
|
|
white-space: nowrap;
|
|
display: flex;
|
|
gap: 0.5em;
|
|
min-width: 7em;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
._gp._itemright ._item {
|
|
justify-content: flex-start;
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
._gp._line ._item {
|
|
width: 100%;
|
|
white-space: normal;
|
|
}
|
|
</style> |