HUI

# Radio 单选框

# Radio 概述

基本组件-单选框。主要用于一组可选项的单选，或者单独用于切换到选中状态。

# Radio 代码演示

# 单独使用

使用 v-model 可以双向绑定数据。

false

<template>
  <div>
    <h-radio v-model="single" @on-change="change">Radio</h-radio>
    <p class="demo-data">{{ single }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      single: false,
    };
  },
  methods: {
    change() {
      console.log("状态已经发生变化");
    },
  },
};
</script>
显示代码 复制代码

# 组合使用

使用 Radio-group实现一组互斥的选项组。在组合使用时， Radio 使用 label 来自动判断。每个 Radio 的内容可以自定义，如不填写则默认使用 label 的值。

apple

爪哇犀牛

<template>
  <div slot="demo">
    <h-radio-group v-model="phone" @on-change="change">
      <h-radio label="apple">
        <h-icon name="mail"></h-icon>
        <span>Apple</span>
      </h-radio>
      <h-radio label="android">
        <h-icon name="mail"></h-icon>
        <span>Android</span>
      </h-radio>
      <h-radio label="windows">
        <h-icon name="mail"></h-icon>
        <span>Windows</span>
      </h-radio>
    </h-radio-group>
    <p class="demo-data">{{ phone }}</p>
    <h-radio-group v-model="animal" size="large">
      <h-radio label="金斑蝶"></h-radio>
      <h-radio label="爪哇犀牛"></h-radio>
      <h-radio label="印度黑羚"></h-radio>
    </h-radio-group>
    <p class="demo-data">{{ animal }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      phone: "apple",
      animal: "爪哇犀牛",
    };
  },
  methods: {
    change() {
      console.log("状态已发生变化");
    },
  },
};
</script>
显示代码 复制代码

# 不可用

通过设置 disabled属性来禁用单选框

true

爪哇犀牛

<template>
  <div>
    <h-radio v-model="disabledSingle" disabled>Radio</h-radio>
    <p class="demo-data">{{ disabledSingle }}</p>
    <h-radio-group v-model="disabledGroup">
      <h-radio label="金斑蝶" disabled></h-radio>
      <h-radio label="爪哇犀牛"></h-radio>
      <h-radio label="印度黑羚"></h-radio>
    </h-radio-group>
    <p class="demo-data">{{ disabledGroup }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      disabledSingle: true,
      disabledGroup: "爪哇犀牛",
    };
  },
};
</script>
显示代码 复制代码

# 垂直

设置属性 vertical 可以垂直显示，按钮样式下无效。

<template>
  <div>
    <h-radio-group v-model="vertical" vertical>
      <h-radio label="apple">
        <h-icon name="mail"></h-icon>
        <span>Apple</span>
      </h-radio>
      <h-radio label="android">
        <h-icon name="mail"></h-icon>
        <span>Android</span>
      </h-radio>
      <h-radio label="windows">
        <h-icon name="mail"></h-icon>
        <span>Windows</span>
      </h-radio>
    </h-radio-group>
  </div>
</template>
<script>
export default {
  data() {
    return {
      vertical: "apple",
    };
  },
};
</script>
显示代码 复制代码

# 按钮样式

组合使用时可以设置属性 type为 button 来应用按钮的样式。

北京

北京

北京

<template>
  <div slot="demo">
    <h-radio-group v-model="button1" type="button">
      <h-radio label="北京"></h-radio>
      <h-radio label="上海"></h-radio>
      <h-radio label="深圳"></h-radio>
      <h-radio label="杭州"></h-radio>
    </h-radio-group>
    <p class="demo-data">{{ button1 }}</p>
    <h-radio-group v-model="button2" type="button">
      <h-radio label="北京"></h-radio>
      <h-radio label="上海" disabled></h-radio>
      <h-radio label="深圳"></h-radio>
      <h-radio label="杭州"></h-radio>
    </h-radio-group>
    <p class="demo-data">{{ button2 }}</p>
    <h-radio-group v-model="button3" type="button">
      <h-radio label="北京" disabled></h-radio>
      <h-radio label="上海" disabled></h-radio>
      <h-radio label="深圳" disabled></h-radio>
      <h-radio label="杭州" disabled></h-radio>
    </h-radio-group>
    <p class="demo-data">{{ button3 }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      button1: "北京",
      button2: "北京",
      button3: "北京",
    };
  },
};
</script>
显示代码 复制代码

# 尺寸

通过设置属性 size 为 large 或 small 将按钮样式设置为大和小尺寸，不设置为默认(中)尺寸。

北京

北京

北京

<template>
  <div slot="demo">
    <h-radio-group v-model="button4" type="button" size="large">
      <h-radio label="北京"></h-radio>
      <h-radio label="上海"></h-radio>
      <h-radio label="深圳"></h-radio>
      <h-radio label="杭州"></h-radio>
    </h-radio-group>
    <p class="demo-data">{{ button4 }}</p>
    <h-radio-group v-model="button5" type="button">
      <h-radio label="北京"></h-radio>
      <h-radio label="上海"></h-radio>
      <h-radio label="深圳"></h-radio>
      <h-radio label="杭州"></h-radio>
    </h-radio-group>
    <p class="demo-data">{{ button5 }}</p>
    <h-radio-group v-model="button6" type="button" size="small">
      <h-radio label="北京"></h-radio>
      <h-radio label="上海"></h-radio>
      <h-radio label="深圳"></h-radio>
      <h-radio label="杭州"></h-radio>
    </h-radio-group>
    <p class="demo-data">{{ button6 }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      button4: "北京",
      button5: "北京",
      button6: "北京",
    };
  },
};
</script>
显示代码 复制代码

# 可取消选中

属性 canCancel ,默认为false，设为true后，再次点击该radio选项就可以取消选择。

当前值：0

当前值：

当前值：

<template>
  <div>
    <h-radio
      v-model="single2"
      size="large"
      true-value="1"
      false-value="0"
      :canCancel="true"
      >Radio</h-radio
    >
    <p class="demo-data">当前值：{{ single2 }}</p>

    <h-radio-group v-model="phone1" :canCancel="true">
      <h-radio label="apple" size="large">
        <h-Icon name="clock"></h-Icon>
        <span>Apple</span>
      </h-radio>
      <h-radio label="android" size="large">
        <h-Icon name="clock"></h-Icon>
        <span>Android</span>
      </h-radio>
      <h-radio label="windows" size="large">
        <h-Icon name="clock"></h-Icon>
        <span>Windows</span>
      </h-radio>
    </h-radio-group>
    <p class="demo-data">当前值：{{ phone1 }}</p>
    <h-radio-group v-model="animal1">
      <h-radio label="金斑蝶" :canCancel="canCancel"></h-radio>
      <h-radio label="爪哇犀牛"></h-radio>
      <h-radio label="印度黑羚"></h-radio>
    </h-radio-group>
    <h-button @click="changeCanCancel"
      >金斑蝶选项可否取消选中:{{ canCancel }}</h-button
    >
    <p class="demo-data">当前值：{{ animal1 }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      single2: 0,
      phone1: "",
      animal1: "",
      canCancel: true,
    };
  },
  methods: {
    changeCanCancel() {
      this.canCancel = !this.canCancel;
    },
  },
};
</script>
显示代码 复制代码

# Radio API

# Radio props

属性 说明 类型 默认值
value 只在单独使用时有效。可以使用 v-model 双向绑定数据 Boolean false
label 只在组合使用时有效。指定当前选项的 value 值，组合会自动判断当前选择的项目 String | Number -
disabled 是否禁用当前项 Boolean false
size 多选框的尺寸，可选值为 large、small、default 或者不设置 String -
true-value 选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用 String, Number, Boolean true
false-value 没有选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用 String, Number, Boolean false
tabindex 设置输入框tabindex (v1.0.47) String | Number 0
canCancel 再次点击该radio选项是否可以取消选择 (v1.0.72) Boolean false

# Radio events

事件名 说明 返回值
on-change 在选项状态发生改变时触发，返回当前状态。通过修改外部的数据改变时不会触发 ...
on-click 点击时触发（此属性只支持1.0.19版本以及以上） ...
on-focus 聚焦时触发（此属性只支持1.0.49版本以及以上） ...
on-blur 失焦时触发（此属性只支持1.0.49版本以及以上） ...

# RadioGroup props

属性 说明 类型 默认值
value 指定当前选中的项目数据。可以使用 v-model 双向绑定数据 String | Number -
type 可选值为 button 或不填，为 button 时使用按钮样式 String -
size 尺寸，只对按钮样式生效，可选值为large和small或者不设置 String -
vertical 是否垂直排列，按钮样式下无效 Boolean false
btnIcon 是否显示按钮样式下的单选图标【此属性仅在1.0.21及其以上版本使用】 Boolean false
btnIconOnlyChecked 当显示按钮样式下的图标时，是否仅显示选中状态下的单选图标【此属性仅在1.0.21及其以上版本使用】 Boolean false
text 显示文字，层级高于label，低于slot(v1.0.39) String, Number null
tabindex 设置输入框tabindex（v1.0.47） String | Number 0
canCancel 再次点击该radio-group下radio选项是否可以取消选择（v1.0.72） Boolean false

# RadioGroup events

事件名 说明 返回值
on-change 在选项状态发生改变时触发，返回当前选中的项。通过修改外部的数据改变时不会触发 ...
on-click 点击时触发（此属性只支持1.0.19版本以及以上） ...

# RadioGroup Methods

方法 说明 返回值
focus 鼠标聚焦 RadioGroup 下的 radio 组件，聚焦时可以左右切换选中（该键盘操作由浏览器提供，目前已知 ie 不支持）（v1.0.40） 无
blur RadioGroup 下的 radio 组件失去焦点（v1.0.40） 无