Radio 单选框

使用 options 属性给 c-radio-group 传递所有选项。当用户改变了选中的选项时，会触发 change 事件。

<c-radio-group
  :options="[
    { value: 'chrome', label: 'Chrome'},
    { value: 'edge', label: 'Edge'},
    { value: 'firefox', label: 'Firefox' },
    { value: 'internet-explorer', label: 'IE', disabled: true },
    { value: 'opera', label: 'Opera'}
  ]"
  @change="onChange"
  v-model="favorite"
/>
<p>你选择的浏览器是：<c-icon type="fa" :name="favorite" /></p>

<script>
export default {
  data () {
    return { favorite: '' }
  },
  methods: {
    onChange (value) {
      console.log(`Value is changed to ${value}`)
    }
  }
}
</script>

按钮样式

<c-radio-group
  :options="options"
  v-model="favorite"
  button
/>
<p>你选择的浏览器是：<c-icon type="fa" :name="favorite" /></p>

<script>
export default {
  data () {
    return {
      options: [
        { value: 'chrome', label: 'Chrome'},
        { value: 'edge', label: 'Edge'},
        { value: 'firefox', label: 'Firefox' },
        { value: 'internet-explorer', label: 'IE', disabled: true },
        { value: 'opera', label: 'Opera'}
      ],
      favorite: ''
    }
  }
}
</script>

属性	类型	默认值	说明
options	Array	无	单选框组提供的选项列表
button	Boolean	false	是否以按钮形式展示

Radio 单选框

基本用法

按钮样式

API

c-radio-group 属性