You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
2.2 KiB
91 lines
2.2 KiB
<script setup> |
|
|
|
import {ref} from "vue"; |
|
|
|
const props = defineProps({ |
|
modelValue: { |
|
type: String, |
|
default: '' |
|
}, |
|
inputSize: { |
|
type: String, |
|
default: '28rpx' |
|
}, |
|
radioAlign: { |
|
type: [String], |
|
default: 'row' |
|
}, |
|
radioData: { |
|
type: Array, |
|
default: [], |
|
}, |
|
labelName: { |
|
type: String, |
|
default: 'label', |
|
}, |
|
valueName: { |
|
type: String, |
|
default: 'value', |
|
}, |
|
activeColor: { |
|
type: String, |
|
default: '#BE1414', |
|
}, |
|
unActiveColor: { |
|
type: String, |
|
default: '#333333', |
|
}, |
|
}); |
|
|
|
const emit = defineEmits(['change', 'update:modelValue']); |
|
const radioChecked = ref(''); |
|
|
|
function radioChange(name) { |
|
radioChecked.value = name; |
|
emit('update:modelValue', name); |
|
emit('change', name); |
|
} |
|
</script> |
|
|
|
<template> |
|
<view> |
|
<view class="radio-group row" |
|
style="padding:22rpx 0;display: flex;justify-content:flex-start;"> |
|
<view |
|
class="radio flex align-center" |
|
:class="{ |
|
col:(radioAlign === 'row'), |
|
'col-12':(radioAlign !== 'row'), |
|
'pt-1':(radioAlign !== 'row'), |
|
'pb-2':(radioAlign !== 'row'), |
|
}" |
|
v-for="item in radioData" |
|
@click="radioChange(item[valueName])" |
|
> |
|
<view class="checkbox border-box" style="margin-right:10rpx;"> |
|
<view |
|
class="border-box" |
|
style="width:32rpx;height:32rpx;border-radius: 50%;padding:6rpx;" |
|
:style="{border:modelValue === item[valueName]?'3rpx solid #BE1414':'3rpx solid rgb(51,51,51)'}" |
|
> |
|
<view |
|
class="border-box" |
|
style="width:100%;height:100%;border-radius: 50%;" |
|
:style="{backgroundColor:(modelValue === item[valueName]?activeColor:'transparent')}" |
|
> |
|
|
|
</view> |
|
</view> |
|
</view> |
|
<view class="label"> |
|
<m-text :text="item[labelName]" size="32rpx" :color="modelValue === item[valueName]?activeColor:unActiveColor" |
|
custom-style="white-space:nowrap;"></m-text> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<style scoped lang="scss"> |
|
|
|
</style> |