72 lines
1.3 KiB
Vue
72 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<view class="form-radio">
|
||
|
|
<view v-for="(item, index) in options" :key="index" class="radio-item" @click="onSelect(item.value)">
|
||
|
|
<view class="radio-dot" :class="{ active: value == item.value }"></view>
|
||
|
|
<text class="radio-label">{{ item.label }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "FormItemRadio",
|
||
|
|
props: {
|
||
|
|
value: {
|
||
|
|
type: [String, Number],
|
||
|
|
default: ""
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
type: Array,
|
||
|
|
default: function() {
|
||
|
|
return [];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
onSelect: function(val) {
|
||
|
|
this.$emit("input", val);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</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>
|