Radio 单选框

未选中项选中项选中禁用态未选中禁用态

<template>
    <div>
        <t-radio>未选中项</t-radio>
        <t-radio :checked="true">选中项</t-radio>
        <t-radio :checked="true" disabled>选中禁用态</t-radio>
        <t-radio disabled>未选中禁用态</t-radio>
    </div>
</template>

复制代码

<template>
  <div class="demo-block-column">
    <div class="demo-radio-row">
        <t-radio-group
        name="city"
        v-model="value"
        :options="options"
        @change="onChange"
      ></t-radio-group>
    </div>
    <div class="demo-radio-row">
        <t-radio-group default-value="1" @change="onChange">
            <t-radio value="1">选项一</t-radio>
            <t-radio value="2">选项二</t-radio>
            <t-radio value="3">选项三</t-radio>
            <t-radio value="4" disabled>选项四</t-radio>
        </t-radio-group>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      options: [
        {
          value: '1',
          label: '选项一',
        },
        {
          value: '2',
          label: '选项二',
        },
        {
          value: '3',
          label: '选项三',
        },
        {
          value: '4',
          label: () => '选项四',
        },
      ],
    };
  },
  methods: {
    onChange(checkedValues) {
      console.log('checkedValues:', this.value, checkedValues);
    },
  },
};
</script>

复制代码

# 单选框

# 基础单选框

# 成组的多项选择框