uniapp radiobutton

Uniapp中没有原生的radiobutton组件，但是可以通过使用uni-icons和自定义组件来实现类似的效果。以下是一个简单的实现方式：

1. 在pages目录下创建一个radioButton目录，并在其中创建一个radioButton.vue文件。在该文件中编写以下代码：

<template>
  <view class="radio-button" @click="onClick">
    <uni-icons :type="value === checkedValue ? 'success' : 'circle'" />
    <view class="label">{{ label }}</view>
  </view>
</template>

<script>
  export default {
    props: {
      value: String,
      checkedValue: String,
      label: String
    },
    methods: {
      onClick() {
        if (this.value !== this.checkedValue) {
          this.$emit('input', this.value);
        }
      }
    }
  };
</script>

<style>
  .radio-button {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
  }
  .label {
    margin-left: 10px;
  }
</style>

2. 在需要使用radiobutton的页面中引入radioButton组件，并在data中定义一个checkedValue属性来控制选中的值。例如：

<template>
  <view>
    <radioButton v-for="option in options" 
                 :key="option.value" 
                 :value="option.value" 
                 :checked-value="checkedValue" 
                 :label="option.label" 
                 @input="onSelect" />
  </view>
</template>

<script>
  import radioButton from '@/radioButton/radioButton.vue';

  export default {
    components: {
      radioButton
    },
    data() {
      return {
        options: [
          { value: '1', label: '选项1' },
          { value: '2', label: '选项2' },
          { value: '3', label: '选项3' }
        ],
        checkedValue: ''
      };
    },
    methods: {
      onSelect(value) {
        this.checkedValue = value;
      }
    }
  };
</script>

这样就可以在页面上渲染出多个radiobutton，并且通过checkedValue属性来控制选中的值。