radio 单选框组件

复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便

📌平台差异说明

APP(vue)	H5	微信小程序	支付宝小程序
✔	✔	✔	✔

🏯基本使用示例

<!-- 全局使用 -->
<hy-radio v-model="value" :columns="columns"></hy-radio>

import { ref } from 'vue';

const columns = [
    {
        label: '苹果',
        value: 'apply',
    },
    {
        label: '香蕉',
        value: 'banana',
    },
];
const value = ref('apply');

自定义columns键

<hy-radio v-model="value" :columns="columns" :fieldNames="fieldNames"></hy-radio>

import { HyCheckobox } from 'hy-app';
import { ref } from 'vue';

const columns = [
    {
        name: '苹果',
        value_1: 'apply',
    },
    {
        name: '香蕉',
        value_1: 'banana',
    },
];
const value = ref('');
const fieldNames = ref({
    label: 'name',
    value: 'value_1',
    checked: 'checked',
});

自定义形状

可以通过设置shape为square或者circle，将复选框设置为方形或者圆形

<hy-radio v-model="value" :columns="columns" shape="square"></hy-radio>
<hy-radio v-model="value" :columns="columns" shape="circle"></hy-radio>

自定义颜色

<hy-radio v-model="value" :columns="columns" activeColor="red"></hy-radio>

排列形式

可以通过设置placement为row或者column，将复选框设置为横向排列或者竖向排列

<hy-radio v-model="value" :columns="columns" placement="row"></hy-radio>
<hy-radio v-model="value" :columns="columns" placement="column"></hy-radio>

横向两端排列形式

可以通过设置iconPlacement为left或者right，将复选框勾选图标的对齐设置为左对齐或者右对齐

<hy-radio v-model="value" :columns="columns" iconPlacement="right" placement="row"></hy-radio>
<hy-radio v-model="value" :columns="columns" iconPlacement="left" placement="row"></hy-radio>

禁用

<!-- 全部禁用 -->
<hy-radio v-model="value" :columns="columns" disabled></hy-radio>

import { ref } from 'vue';

const columns = [
    {
        label: '苹果',
        value: 'apply',
        disabled: true, // 禁用单个
    },
    {
        label: '香蕉',
        value: 'banana',
    },
];
const value = ref('apply');

插槽

• label：自定义label文本,传值为label
• icon：自定义选项框里icon,传值为iconColor和iconSize

<hy-radio v-model="value" :columns="columns">
    <template #label="{ label }">
        <view>{{label}}</view>
    </template>
    <template #icon="{ iconColor, iconSize }">
        <view>{{iconColor}}</view>
        <view>{{iconSize}}</view>
    </template>
</hy-radio>

import { ref } from 'vue';

const columns = [
    {
        label: '苹果',
        value: 'apply',
    },
    {
        label: '香蕉',
        value: 'banana',
    },
];
const value = ref('apply');

API

Radio Props

参数	说明	类型	默认值
v-model	双向绑定值，数组类型	string|number	-
columns	接收数组值	CheckboxColumnsVo[]	-
fieldNames	自定义接收columns的键	IFieldNames	{label: "label",value: "value",checked: "checked"}
shape	复选框形状[1]	circle|square	circle
size	复选框大小[2]	string|number	medium
disabled	是否禁用	boolean	false
activeColor	选中状态下的颜色	string	-
inactiveColor	未选中的颜色	string	#c8c9cc
iconSize	图标的大小，数值默认单位px	string|number	20
iconColor	图标颜色	string	-
label	label提示文字	string	-
labelSize	label的字体大小，px单位	string|number	-
labelColor	label的颜色	string	-
iconPlacement	勾选图标的对齐方式	left|right	left
borderBottom	竖向配列时，是否显示下划线	boolean	false
labelDisabled	是否禁止点击提示语选中复选框	boolean	false
placement	布局方式[3]	row|column	row
customStyle	定义需要用到的外部样式	CSSProperties	-

Events

事件名	说明	回调参数
change	任一个radio状态发生变化时触发，回调为一个对象	detail = array( [元素为被选中的radio的value] )

Slots

插槽名	说明	传值
icon	自定义icon内容	iconColor | iconSize
label	自定义label内容	record

typing

类型说明

interface CheckboxColumnsVo extends FieldNamesType {
    /**
     * 显示文本内容
     * */
    label?: string;
    /**
     * 值
     * */
    value?: string | number;
    /**
     * 是否选中
     * */
    checked?: boolean;

    /**
     * 是否禁用
     * */
    disabled?: boolean;
}

export interface IFieldNames {
    /**
     * 自定义columns的文本键
     * */
    label: string;
    /**
     * 自定义columns的值键
     * */
    value: string;
    /**
     * 自定义columns的选中键
     * */
    checked: string;
}

03:29

---

1. circle：两边为半圆；square：方形带圆角 ↩︎

2. normal：默认尺寸；large：大尺寸； small：小尺寸； ↩︎

3. row: 横向；column：纵向 ↩︎