QinUi

# radio 单选框

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

# 基础用法

<template>
  <qinui-radio-group v-model="radioValue">
    <qinui-radio
      v-for="(item, index) in radioList"
      :key="index"
      :label="item.name"
      :name="item.name"
    ></qinui-radio>
  </qinui-radio-group>
</template>
<script>
  export default {
    data() {
      return {
        radioValue: '苹果',
        radioList: [
          {
            name: '苹果',
            disabled: false,
          },
          {
            name: '香蕉',
            labelColor: '#f00',
            disabled: false,
          },
          {
            name: '橙子',
            disabled: false,
          },
        ],
      };
    },
  };
</script>

# 按钮用法

type="button" gap="16rpx"

<template>
  <qinui-radio-group v-model="radioValue" type="button" gap="16rpx">
    <qinui-radio
      :diyStyle="`margin-bottom: 8rpx;${index===0?'min-width:112rpx;font-size:40rpx;':''}`"
      v-for="(item, index) in radioList2"
      :key="index"
      :label="item.name"
      :labelColor="item.labelColor"
      :name="item.name"
      :disabled="item.disabled"
    ></qinui-radio>
  </qinui-radio-group>
</template>
<script>
  export default {
    data() {
      return {
        radioValue: '苹果',
        radioList: [
          {
            name: '香蕉',
            labelColor: '#0f0',
            disabled: true,
          },
          {
            name: '橙子橙子橙子橙子',
            disabled: false,
          },
          {
            name: '橙子',
          },
        ],
      };
    },
  };
</script>

# 自定义形状

shape="circle"

<template>
  <qinui-radio-group v-model="radioValue" shape="circle">
    <qinui-radio
      :diyStyle="{ marginBottom: '8px' }"
      v-for="(item, index) in radioList"
      :key="index"
      :label="item.name"
      :name="item.name"
    ></qinui-radio>
  </qinui-radio-group>
</template>
<script>
  export default {
    data() {
      return {
        radioValue: '苹果',
        radioList: [
          {
            name: '苹果',
            disabled: false,
          },
          {
            name: '香蕉',
            labelColor: '#f00',
            disabled: false,
          },
          {
            name: '橙子',
            disabled: false,
          },
        ],
      };
    },
  };
</script>

# 禁用

在 qinui-radio 上面添加 disabled

<template>
  <qinui-radio-group v-model="radioValue" shape="circle">
    <qinui-radio
      :diyStyle="{ marginBottom: '8px' }"
      v-for="(item, index) in radioList"
      :key="index"
      :label="item.name"
      :name="item.name"
      :disabled="index !== 1"
    ></qinui-radio>
  </qinui-radio-group>
</template>
<script>
  export default {
    data() {
      return {
        radioValue: '苹果',
        radioList: [
          {
            name: '苹果',
            disabled: false,
          },
          {
            name: '香蕉',
            labelColor: '#f00',
            disabled: false,
          },
          {
            name: '橙子',
            disabled: false,
          },
        ],
      };
    },
  };
</script>

# 自定义颜色

设置 labelColor

<template>
  <qinui-radio-group v-model="diyradioValue">
    <qinui-radio
      labelColor="red"
      name="苹果1"
      label="苹果1"
    ></qinui-radio>
    <qinui-radio
      labelColor="red"
      noColor="green"
      yesColor="yellow"
      name="苹果2"
      label="苹果2"
    ></qinui-radio>
    <qinui-radio
      labelColor="red"
      name="苹果3"
      label="苹果3"
    ></qinui-radio>
  </qinui-radio-group>
</template>
<script>
  export default {
    data() {
      return {
        diyradioValue: '苹果2',
      };
    },
  };
</script>

# 横向排列形式

设置 placement="col"

<template>
  <qinui-radio-group v-model="radioValue" placement="col">
    <qinui-radio name="apple" label="苹果"></qinui-radio>
    <qinui-radio name="banana" label="香蕉"></qinui-radio>
  </qinui-radio-group>
</template>
<script>
  export default {
    data() {
      return {
        radioValue: '苹果',
      };
    },
  };
</script>

# 组合使用

设置 placement="col"

<template>
  <qinui-radio-group v-model="radioValue" placement="col">
    <div v-for="(item, index) in radioList" :key="index">
      <qinui-space align="start">
        <qinui-radio
          :name="item.name"
          :shape="index === 0 ? 'circle' : ''"
        ></qinui-radio>
        <div style="flex: 1">
          <qinui-space align="center" justifyContent="space-between">
            <div class="demo-title-box">
              <qinui-title size="40" content="标题"></qinui-title>
            </div>
            <qinui-text
              content="编辑"
              style="width: 200rpx"
              type="primary"
              center
            ></qinui-text>
          </qinui-space>
          <qinui-box :padding="['small', 'none', 'none']">
            <qinui-space placement="col">
              <qinui-space :size="24">
                <qinui-text type="secondary" content="身份证"></qinui-text>
                <qinui-text
                  type="secondary"
                  content="13011805800"
                ></qinui-text>
              </qinui-space>
              <qinui-space :size="24">
                <qinui-text type="secondary" content="手机号"></qinui-text>
                <qinui-text
                  type="secondary"
                  content="13011805800"
                ></qinui-text>
              </qinui-space>
            </qinui-space>
          </qinui-box>
        </div>
      </qinui-space>
    </div>
  </qinui-radio-group>
</template>
<script>
  export default {
    data() {
      return {
        radioValue: '苹果',
        diyradioValue: '苹果2',
        // 基本案列数据
        radioList: [
          {
            name: '苹果',
            disabled: false,
          },
          {
            name: '香蕉',
            labelColor: '#f00',
            disabled: false,
          },
          {
            name: '橙子',
            disabled: false,
          },
        ],
      };
    },
  };
</script>

# API

# radioGroup Props

参数 说明 类型 默认值 可选值
value / v-model 选中name的值，eg：['a','b'] Array [] -
value 绑定的值 Array [] -
shape 形状，circle-圆形，square-方形 String square square | circle
disabled 是否禁用全部radio Boolean false true | false
yesColor 选中状态下的颜色，如子radio组件设置此值，将会覆盖本值 String #2979ff -
noColor 未选中的颜色 String #c8c9cc -
placement 布局方式，row-横向，col-纵向 String row row | col
labelColor label的字体颜色 String #303133 -
labelDisabled 是否禁止点击文本操作 Boolean false true | false
iconColor 图标颜色 String #ffffff -
iconPlacement 勾选图标的对齐方式，left-左边，right-右边 String left left | right
borderBottom 竖向配列时，是否显示下划线 Boolean false true | false
diyStyle 自定义样式，某些事件需要用到调整位置等作用 Object - -

# radio Props

注意：radio和radio-group二者同名参数中，radio的参数优先级更高。

参数 说明 类型 默认值 可选值
name radio的名称 String | Number | Boolean - -
shape 形状，square为方形，circle为圆型 String square square | circle
size 整体的大小 String | Number - -
checked 是否默认选中 Boolean false true | false
disabled 是否禁用 String | Boolean - -
yesColor 选中状态下的颜色，如设置此值，将会覆盖parent的yesColor值 String - -
noColor 未选中的颜色 String - -
iconColor 图标颜色 String - -
label label提示文字。如果文本较长存在文本不换行的问题，使用diyStyle设置一个宽度即可，eg：diyStyle="maxWidth: 300rpx;" String | Number - -
labelColor label的颜色 String - -
labelDisabled 是否禁止点击提示语选中单选框 String | Boolean - -
diyStyle 自定义外部样式，如：设置边框等样式 String - -

# radioGroup Events

事件名 说明 回调参数
@change 点击事件 -

← Checkbox 复选框 →