72 lines
1.4 KiB
Vue
72 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<u-radio-group class="jnpf-radio" :disabled='disabled' v-model="innerValue"
|
||
|
|
:wrap="direction == 'horizontal' ? false : true" @change="onChange">
|
||
|
|
<u-radio v-for="(item, index) in options" :key="index" :name="item[props.value]"
|
||
|
|
:class="{'jnpf-radio-disabled':disabled}">
|
||
|
|
{{ item[props.label] }}
|
||
|
|
</u-radio>
|
||
|
|
</u-radio-group>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
inheritAttrs: false,
|
||
|
|
name: 'jnpfRadio',
|
||
|
|
props: {
|
||
|
|
modelValue: {
|
||
|
|
type: [String, Number, Boolean],
|
||
|
|
},
|
||
|
|
direction: {
|
||
|
|
type: String,
|
||
|
|
default: "horizontal"
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
type: Array,
|
||
|
|
default: () => []
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
type: Object,
|
||
|
|
default: () => ({
|
||
|
|
label: 'fullName',
|
||
|
|
value: 'id'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
disabled: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
innerValue: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
modelValue: {
|
||
|
|
handler(val) {
|
||
|
|
this.innerValue = val
|
||
|
|
},
|
||
|
|
immediate: true,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
onChange(value, e) {
|
||
|
|
const selectData = this.options.filter(o => value == o[this.props.value]) || []
|
||
|
|
this.$emit('update:modelValue', value)
|
||
|
|
this.$emit('change', value, selectData[0])
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
:deep(.u-radio__icon-wrap--circle) {
|
||
|
|
border-color: #D9D9D9 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.jnpf-radio-disabled {
|
||
|
|
:deep(.u-radio__icon-wrap--disabled) {
|
||
|
|
background-color: #E6E6E6 !important;
|
||
|
|
border-color: #D9D9D9 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|