90 lines
2.0 KiB
Vue
90 lines
2.0 KiB
Vue
<template>
|
|
<view class="form-radio">
|
|
<view v-for="(item, index) in options" :key="index" class="radio-item" @click="onSelect(item)">
|
|
<view class="radio-dot" :class="{ active: isActive(item) }"></view>
|
|
<text class="radio-label">{{ getOptionLabel(item) }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'FormItemRadio',
|
|
props: {
|
|
value: { type: [String, Number], default: '' },
|
|
options: { type: Array, default: function () { return []; } }
|
|
},
|
|
methods: {
|
|
getOptionValue: function (item) {
|
|
if (item && typeof item === 'object') {
|
|
if (item.value !== undefined) return item.value;
|
|
if (item.id !== undefined) return item.id;
|
|
if (item.key !== undefined) return item.key;
|
|
if (item.code !== undefined) return item.code;
|
|
return item.label;
|
|
}
|
|
return item;
|
|
},
|
|
getOptionLabel: function (item) {
|
|
if (item && typeof item === 'object') {
|
|
var label = item.label || item.title || item.name || item.text;
|
|
if (label !== undefined && label !== null) return label;
|
|
return String(this.getOptionValue(item));
|
|
}
|
|
return item;
|
|
},
|
|
isActive: function (item) {
|
|
return this.value == this.getOptionValue(item);
|
|
},
|
|
onSelect: function (item) {
|
|
this.$emit('input', this.getOptionValue(item));
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.form-radio {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.radio-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 40rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.radio-dot {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
border-radius: 50%;
|
|
border: 2rpx solid #cccccc;
|
|
margin-right: 12rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.radio-dot.active {
|
|
border-color: #e8101e;
|
|
background-color: #e8101e;
|
|
}
|
|
|
|
.radio-dot.active::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
border-radius: 50%;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.radio-label {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
</style>
|