pet_uni/uni_modules/m-view/components/m-radio/m-radio.vue

<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>