Radio 单选

一、概述

定义

用于从一组互斥的选项中选择一项。

使用场景

• 单选，各个选项之间互斥。

• 和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。

二、基础样式

一组互斥的单选配合使用。

交互说明

1.每次只能选择一个选项。

2.对于已经选择的单选框，只能选择其他选择才会被取消。

<div>
  默认：
  <se-radio value="选项">选项</se-radio>
</div>
<br />
<div>
  选中：
  <se-radio value="选项" checked>选项</se-radio>
</div>
<br />
<div>
  禁用：
  <se-radio value="a" disabled>选项A</se-radio>
  <se-radio value="b" checked disabled>选项B</se-radio>
</div>

二、单选框组

适用于在多个互斥的选项中选择的场景

<se-radio-group :value="fruit" @change="handleChange">
  <se-radio v-for="(item, i) in options" :key="i" :value="item.value" :disabled="item.disabled">
    {{item.label}}
  </se-radio>
</se-radio-group>

<p>Selected: {{ fruit || 'none' }}</p>

<script>
  export default {
    data() {
      return {
        fruit: 'b',
        options: [
          { label: '选项A', value: 'a', disabled: true },
          { label: '选项B', value: 'b' },
          { label: '选项C', value: 'c' },
          { label: '选项D', value: 'd', disabled: true }
        ]
      }
    },
    methods: {
      handleChange(e) {
        this.fruit = e.detail.value
      }
    }
  }
</script>

当然你也可以直接传入一个 options 数组，并在 options 中配置规则 ——

<se-radio-group :options="options" :value="fruit" @change="handleChange"></se-radio-group>
<p>Selected: {{ fruit || 'none' }}</p>

<script>
  export default {
    data() {
      return {
        fruit: 'b',
        options: [
          { label: '选项A', value: 'a' },
          { label: '选项B', value: 'b' },
          { label: '选项C', value: 'c' },
          { label: '选项D', value: 'd', disabled: true }
        ]
      }
    },
    methods: {
      handleChange(e) {
        this.fruit = e.detail.value
      }
    }
  }
</script>

单选框组禁用的效果示例如下 ——

<se-radio-group :options="options" :value="fruit" disabled></se-radio-group>
<p>Selected: {{ fruit || 'none' }}</p>

<script>
  export default {
    data() {
      return {
        fruit: 'd',
        options: [
          { label: '选项A', value: 'a' },
          { label: '选项B', value: 'b' },
          { label: '选项C', value: 'c' },
          { label: '选项D', value: 'd' }
        ]
      }
    }
  }
</script>

Radio Props

Radio Events

RadioGroup Props

RadioGroup Events