Radio 单选框

使用指南

用于从一系列选项中选择其中一个，目前有常规样式和勾选样式两种

代码演示

查看代码

<template>
  <div class="list">
    <p class="sub-title">
      常规样式
    </p>

    <p class="sub-title">
      文字选项
    </p>
    <h3-radio-group v-model="radios1">
      <h3-radio
        v-for="item in radioListopions1"
        :key="item.value"
        :value="item.value"
        :label="item.label"
        :disabled="item.disabled"
      />
    </h3-radio-group>

    <p class="sub-title">
      自定义选项内容
    </p>
    <h3-radio-group v-model="radios2">
      <h3-radio
        v-for="item in radioListopions1"
        :key="item.value"
        :value="item.value"
        :label="item.label"
        :disabled="item.disabled"
      >
        <template #default>
          <div class="radio-cell-wrap">
            <h3-avatar class="radio-cell-img" name="tingle" />
            <span>{{ item.label }}</span>
          </div>
        </template>
      </h3-radio>
    </h3-radio-group>

    <p class="sub-title">
      勾选样式
    </p>

    <p class="sub-title">
      文字选项
    </p>
    <h3-radio-group v-model="radios3" align="right">
      <h3-radio
        v-for="item in radioListopions1"
        :key="item.value"
        :value="item.value"
        :label="item.label"
        :disabled="item.disabled"
      />
    </h3-radio-group>

    <p class="sub-title">
      不显示选中标识
    </p>
    <h3-radio-group v-model="radios4" align="right">
      <h3-radio
        v-for="item in radioListopions2"
        :key="item.value"
        :showSelectedIcon="false"
        :value="item.value"
        :label="item.label"
        :disabled="item.disabled"
      />
    </h3-radio-group>

    <p class="sub-title">
      与图标组合
    </p>
    <h3-radio-group v-model="radios5" align="right">
      <h3-radio
        v-for="item in radioListopions2"
        :key="item.value"
        :showSelectedIcon="false"
        :value="item.value"
        :label="item.label"
        :disabled="item.disabled"
      >
        <template #icon>
          <h3-icon type="IconShareLinkStroke" :size="16" style="margin-right: 12px" />
        </template>
      </h3-radio>
    </h3-radio-group>

    <!--
    <p class="sub-title">
      基本用法
    </p>
    <h3-radio value="测试" />
    <h3-radio value="测试" disabled />
    <h3-radio value="测试" checked disabled />
    <h3-radio value="测试" checked>
      测试
    </h3-radio>
    <h3-radio value="测试" mode="item" />
    <p class="sub-title">
      插槽 点击阻止默认事件可以不触发默认事件
    </p>
    <h3-radio @change="agreeItemChange" value="agree" label="同意">
      同意<a @click.prevent="agreeFn($event)" style="color:blue">&lt;&lt;阅读条款&gt;&gt;</a>
    </h3-radio>
    <p class="sub-title">
      在 h3-radio-group 下使用 适合跟field 或 popup-modal组合使用 (垂直布局)
    </p>
    <h3-radio-group v-model="radios" layout="vertical">
      <h3-radio :key="item" v-for="item in radioListopions" :value="item" />
    </h3-radio-group>
    <p class="sub-title">
      在 h3-radio-group 下使用 适合跟field组合使用(水平布局)
    </p>
    <h3-radio-group v-model="radios1" layout="horizontal">
      <h3-radio
        :key="item.value"
        v-for="item in radioListopions1"
        :value="item.value"
        :label="item.label"
      />
    </h3-radio-group>
    <p class="sub-title">
      在 h3-radio-group 组级别disabled
    </p>
    <h3-radio-group v-model="radios3" disabled>
      <h3-radio
        :key="item.value"
        v-for="item in radioListopions1"
        :value="item.value"
        :label="item.label"
      />
    </h3-radio-group>
    <p class="sub-title">
      在 h3-radio-group 包含子项disabled 且未选中
    </p>
    <h3-radio-group v-model="radios4">
      <h3-radio
        :key="item.value"
        v-for="item in radioListopions1"
        :value="item.value"
        :label="item.label"
      />
      <h3-radio label="额外" value="key5" disabled />
    </h3-radio-group>
    <p class="sub-title">
      在 h3-radio-group 包含子项disabled 且选中
    </p>
    <h3-radio-group v-model="radios5">
      <h3-radio
        :key="item.value"
        v-for="item in radioListopions1"
        :value="item.value"
        :label="item.label"
      />
      <h3-radio label="额外" value="key5" disabled />
    </h3-radio-group>
  -->
  </div>
</template>
<script>
import H3Radio from '@/components/h3-radio';
import H3Avatar from '@/components/h3-avatar/';
import H3Icon from '@/components/h3-icon';
export default {
  name: 'DemoRadio',
  components: {
    H3Radio,
    H3RadioGroup: H3Radio.Group,
    H3Avatar,
    H3Icon,
  },
  props: {},
  data () {
    return {
      radios1: 'key2',
      radios2: 'key1',
      radioListopions1: [
        {
          value: 'key1',
          label: '未选中',
        },
        {
          value: 'key2',
          label: '已选中 不可用状态',
          disabled: true,
        },
        {
          value: 'key3',
          label: '未选中 不可用状态',
          disabled: true,
        },
        {
          value: 'key4',
          label: '名称超长名称超长名称超长名称超长名称',
        },
      ],
      radios3: 'key2',
      radios4: 'key1',
      radios5: 'key2',

      radioListopions2: [
        {
          value: 'key1',
          label: '菜单选项 选中状态',
        },
        {
          value: 'key2',
          label: '菜单选项 不可用状态',
          disabled: true,
        },
        {
          value: 'key3',
          label: '菜单选项',
        },
        {
          value: 'key4',
          label: '菜单选项',
        },
      ],

      radios: '小学',

      radioListopions: [
        '小学',
        '高中',
        '人大',
        '浙大',
        '复旦',
        '北航',
        '上交',
        '奥哲氚云研发中心奥哲氚云研发中心深圳大学',
        '中科大',
        '武大',
      ],
    };
  },
  methods: {
    agreeFn () {
      console.log('点击了同意条款!');
    },
    agreeItemChange (checked, value, label) {
      console.log('agree change....', checked, value, label);
    },
  },
};
</script>
<style lang="less" scoped>
.list {
  // padding: 0 15px;
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px;
  }
  .radio-cell-wrap {
    display: flex;
    align-items: center;
    .radio-cell-img {
      position: absolute;
    }
    span {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-left: 48px;
    }
  }
  .h3think-radio--disabled {
    .radio-cell-img {
      opacity: 0.5;
    }
  }
}
</style>

与thinking-ui 2.0版组件的区别以及迁移

按照新的单选组件规范修改相关样式

若要做迁移请参考

Radio

1. 弃用的props：mode
2. 新增的props showSelectedIcon
3. 新增的slot icon

RadioGroup

1. 弃用的props：layout
2. 新增的props align

API

Prop Radio

属性	说明	类型	默认值
value	radio对应的value，在h3-radio-group组件内必须存在，通过该值与h3-radio-group的value比较是否选择	string|number	-
label	呈现的选项值，若无则取value	string|number	-
name	DOM元素的name	string	-
checked	是否选中，v-model绑定值，在h3-radio-group组件下无效	boolean	false
disabled	是否禁用	boolean	false
control	是否自行控制checked，在h3-radio-group组件下无效	boolean	false
showSelectedIcon	是否选中图标，目前仅在 align 为 right时生效	boolean	true

Event Radio

事件名	说明	参数
click	点击事件触发的回调函数，返回checked的值是点击时组件是否checked的值	(checked: boolean, value: string|number|boolean, label: string|number)
input	change事件触发的回调函数，v-model绑定事件，control:true下失效	(checked: boolean)
change	点击触发事件，在h3-radio-group组件下无效	(checked: boolean, value: string|number, label: string|number)

Slots

参数	说明
default	选项内容插槽
icon	左侧图标插槽

Prop RadioGroup

参数	说明	类型	默认值
value	value，v-model绑定值	string|number	''
disabled	是否组级别禁用	boolean	false
name	组内DOM元素的name	string	-
align	选中图标出现在左边还是右边，值为 left right, 默认左边	string	left

Event RadioGroup

事件名	说明	参数
input	变化时触发，v-model绑定事件	选中的数据(value: string|number)
change	点击触发事件	选中的数据(value: string|number, label: string|number)