Radio 单选框

使用指南

单选框

代码演示

查看代码

<template>
  <div class="list">
    <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';
export default {
  name: 'DemoRadio',
  components: {
    H3Radio,
    H3RadioGroup: H3Radio.Group,
  },
  props: {},
  data () {
    return {
      radios: '小学',
      radios1: 'key1',
      radios2: 'key1',
      radios3: 'key1',
      radios4: 'key1',
      radios5: 'key5',
      radioListopions: [
        '小学',
        '高中',
        '人大',
        '浙大',
        '复旦',
        '北航',
        '上交',
        '奥哲氚云研发中心奥哲氚云研发中心深圳大学',
        '中科大',
        '武大',
      ],
      radioListopions1: [
        {
          value: 'key1',
          label: '奥哲氚云研发中心奥哲氚云研发中心深圳大学',
        },
        {
          value: 'key2',
          label: '高中',
        },
        {
          value: 'key3',
          label: '中科大',
        },
        {
          value: 'key4',
          label: '武大',
        },
      ],
    };
  },
  methods: {
    agreeFn () {
      console.log('点击了同意条款!');
    },
    agreeItemChange (checked, value, label) {
      console.log('agree change....', checked, value, label);
    },
  },
};
</script>
<style lang="less" scoped>
.list {
  background-color: #fff;
  padding: 0 15px;
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px;
  }
}
</style>

与h3-mobile-vue组件的区别以及迁移

旧组件库输入框与field组件过于耦合，因此新组件单独做成一个纯粹的radio的组件，同时提供radio-group组件，来增强使用性。

弃用 h3-radio-item h3-radio-list 组件。

若要做迁移请参考

1. 弃用的props：showMode options title defaultValue required editable tip defaultChecked returnValue onChange placeholder cancelText cancelText
2. 替换的props：
3. 新增的props label

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
mode	呈现标签样式tag还是列表项样式item，在h3-radio-group组件下无效	string	'tag'
control	是否自行控制checked，在h3-radio-group组件下无效	boolean	false

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)

Prop RadioGroup

参数	说明	类型	默认值
value	value，v-model绑定值	string|number	''
disabled	是否组级别禁用	boolean	false
name	组内DOM元素的name	string	-
layout	布局，可选值：horizontal | vertical	string	'horizontal'

Event RadioGroup

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