QinUi

# Checkbox 复选框

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

# 基础用法

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

# 按钮用法

type="button" gap="16rpx"

<template>
  <qinui-checkbox-group v-model="checkboxValue" type="button" gap="16rpx">
    <qinui-checkbox
      v-for="(item, index) in checkboxList"
      :key="index"
      :label="item.name"
      :name="item.name"
    ></qinui-checkbox>
  </qinui-checkbox-group>
</template>
<script>
  export default {
    data() {
      return {
        checkboxValue: ['苹果'],
        checkboxList: [
          {
            name: '苹果',
          },
          {
            name: '香蕉',
          },
          {
            name: '橙子',
          },
        ],
      };
    },
  };
</script>

# 自定义形状

shape="circle"

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

# 禁用

在 qinui-checkbox 上面添加 disabled

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

# 自定义颜色

设置 labelColor

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

# 横向排列形式

设置 placement="col"

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

# 组合使用

设置 placement="col"

<template>
  <qinui-checkbox-group v-model="checkboxValue" placement="col">
    <div v-for="(item, index) in checkboxList" :key="index">
      <qinui-space align="start">
        <qinui-checkbox
          :name="item.name"
          :shape="index === 0 ? 'circle' : ''"
        ></qinui-checkbox>
        <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-checkbox-group>
</template>
<script>
  export default {
    data() {
      return {
        checkboxValue: ['苹果'],
        diyCheckboxValue: ['苹果2'],
        // 基本案列数据
        checkboxList: [
          {
            name: '苹果',
            disabled: false,
          },
          {
            name: '香蕉',
            labelColor: '#f00',
            disabled: false,
          },
          {
            name: '橙子',
            disabled: false,
          },
        ],
      };
    },
  };
</script>

# API

# CheckboxGroup Props

参数 说明 类型 默认值 可选值 版本
value / v-model 选中name的值，eg：['a','b'] Array [] - -
value 绑定的值 Array [] - -
shape 形状，circle-圆形，square-方形 String square square | circle -
disabled 是否禁用全部checkbox Boolean false true | false -
yesColor 选中状态下的颜色，如子Checkbox组件设置此值，将会覆盖本值 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 -
iconStyle 自定义图标样式 String - - 1.13.0+
diyStyle 自定义样式，某些事件需要用到调整位置等作用 String - - -

# Checkbox Props

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

参数 说明 类型 默认值 可选值
name checkbox的名称 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 - -

# CheckboxGroup Events

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

← Code 验证码倒计时 →