BIN-UI-DESIGN

Appearance

On this page

多选框 Checkbox ​

基本组件-多选框。主要用于一组可选项多项选择，或者单独用于标记切换某种状态。

基础用法 ​

   false
<template>
  <div>
    <b-checkbox v-model="value">多选框</b-checkbox>
    &nbsp;&nbsp;
    <span style="color: #ff4511">{{ value }}</span>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const value = ref(false)
</script>
<template>
  <div>
    <b-checkbox v-model="value">多选框</b-checkbox>
    &nbsp;&nbsp;
    <span style="color: #ff4511">{{ value }}</span>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const value = ref(false)
</script>

组合使用 ​

[ "facebook", "github" ]

[ "苹果" ]

<template>
  <div>
    <b-checkbox-group v-model="social">
      <b-checkbox label="twitter">
        <span>Twitter</span>
      </b-checkbox>
      <b-checkbox label="facebook">
        <span>Facebook</span>
      </b-checkbox>
      <b-checkbox label="github">
        <span>Github</span>
      </b-checkbox>
      <b-checkbox label="snapchat">
        <span>Snapchat</span>
      </b-checkbox>
    </b-checkbox-group>
    <p style="color: #ff4511; margin: 5px 0">{{ social }}</p>
    <b-checkbox-group v-model="fruit">
      <b-checkbox label="香蕉"></b-checkbox>
      <b-checkbox label="苹果"></b-checkbox>
      <b-checkbox label="西瓜"></b-checkbox>
    </b-checkbox-group>
    <p style="color: #ff4511; margin: 5px 0">{{ fruit }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const social = ref(['facebook', 'github'])
const fruit = ref(['苹果'])
</script>
<template>
  <div>
    <b-checkbox-group v-model="social">
      <b-checkbox label="twitter">
        <span>Twitter</span>
      </b-checkbox>
      <b-checkbox label="facebook">
        <span>Facebook</span>
      </b-checkbox>
      <b-checkbox label="github">
        <span>Github</span>
      </b-checkbox>
      <b-checkbox label="snapchat">
        <span>Snapchat</span>
      </b-checkbox>
    </b-checkbox-group>
    <p style="color: #ff4511; margin: 5px 0">{{ social }}</p>
    <b-checkbox-group v-model="fruit">
      <b-checkbox label="香蕉"></b-checkbox>
      <b-checkbox label="苹果"></b-checkbox>
      <b-checkbox label="西瓜"></b-checkbox>
    </b-checkbox-group>
    <p style="color: #ff4511; margin: 5px 0">{{ fruit }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const social = ref(['facebook', 'github'])
const fruit = ref(['苹果'])
</script>

禁用 ​

<template>
  <div>
    <b-checkbox v-model="disabledSingle" disabled>Checkbox</b-checkbox>
    <b-checkbox-group v-model="disabledGroup">
      <b-checkbox label="香蕉" disabled></b-checkbox>
      <b-checkbox label="苹果" disabled></b-checkbox>
      <b-checkbox label="西瓜"></b-checkbox>
    </b-checkbox-group>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const disabledSingle = ref(true)
const disabledGroup = ref(['苹果'])
</script>
<template>
  <div>
    <b-checkbox v-model="disabledSingle" disabled>Checkbox</b-checkbox>
    <b-checkbox-group v-model="disabledGroup">
      <b-checkbox label="香蕉" disabled></b-checkbox>
      <b-checkbox label="苹果" disabled></b-checkbox>
      <b-checkbox label="西瓜"></b-checkbox>
    </b-checkbox-group>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const disabledSingle = ref(true)
const disabledGroup = ref(['苹果'])
</script>

全选 ​

[ "香蕉", "西瓜" ] - false
<template>
  <div style="border-bottom: 1px solid #e9e9e9; padding-bottom: 6px; margin-bottom: 6px">
    <b-checkbox v-model="checkAll" :indeterminate="indeterminate" @change="handleCheckAll">
      全选
    </b-checkbox>
    <span style="color: #ff4511; margin: 5px 0">{{ checkAllGroup }} - {{ checkAll }}</span>
  </div>
  <b-checkbox-group v-model="checkAllGroup" @change="checkAllGroupChange">
    <b-checkbox label="香蕉"></b-checkbox>
    <b-checkbox label="苹果"></b-checkbox>
    <b-checkbox label="西瓜"></b-checkbox>
    <b-checkbox label="草莓"></b-checkbox>
  </b-checkbox-group>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const all = ['香蕉', '西瓜', '苹果', '草莓']

const indeterminate = ref(false)
const checkAll = ref(false)
const checkAllGroup = ref(['香蕉', '西瓜'])

function handleCheckAll(val) {
  checkAllGroup.value = val ? all : []
  indeterminate.value = false
}

function checkAllGroupChange(value) {
  if (value.length === all.length) {
    indeterminate.value = false
    checkAll.value = true
  } else if (value.length > 0) {
    indeterminate.value = true
    checkAll.value = false
  } else {
    indeterminate.value = false
    checkAll.value = false
  }
}
</script>
<template>
  <div style="border-bottom: 1px solid #e9e9e9; padding-bottom: 6px; margin-bottom: 6px">
    <b-checkbox v-model="checkAll" :indeterminate="indeterminate" @change="handleCheckAll">
      全选
    </b-checkbox>
    <span style="color: #ff4511; margin: 5px 0">{{ checkAllGroup }} - {{ checkAll }}</span>
  </div>
  <b-checkbox-group v-model="checkAllGroup" @change="checkAllGroupChange">
    <b-checkbox label="香蕉"></b-checkbox>
    <b-checkbox label="苹果"></b-checkbox>
    <b-checkbox label="西瓜"></b-checkbox>
    <b-checkbox label="草莓"></b-checkbox>
  </b-checkbox-group>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const all = ['香蕉', '西瓜', '苹果', '草莓']

const indeterminate = ref(false)
const checkAll = ref(false)
const checkAllGroup = ref(['香蕉', '西瓜'])

function handleCheckAll(val) {
  checkAllGroup.value = val ? all : []
  indeterminate.value = false
}

function checkAllGroupChange(value) {
  if (value.length === all.length) {
    indeterminate.value = false
    checkAll.value = true
  } else if (value.length > 0) {
    indeterminate.value = true
    checkAll.value = false
  } else {
    indeterminate.value = false
    checkAll.value = false
  }
}
</script>

限制数量 ​

可以控制被勾选的数量限制

[ "香蕉", "西瓜" ]
<template>
  <div>
    <b-checkbox-group v-model="checkAllGroup" :min="1" :max="2">
      <b-checkbox label="香蕉"></b-checkbox>
      <b-checkbox label="苹果"></b-checkbox>
      <b-checkbox label="西瓜"></b-checkbox>
      <b-checkbox label="草莓"></b-checkbox>
    </b-checkbox-group>
    <span style="color: #ff4511; margin: 5px 0">{{ checkAllGroup }}</span>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const checkAllGroup = ref(['香蕉', '西瓜'])
</script>
<template>
  <div>
    <b-checkbox-group v-model="checkAllGroup" :min="1" :max="2">
      <b-checkbox label="香蕉"></b-checkbox>
      <b-checkbox label="苹果"></b-checkbox>
      <b-checkbox label="西瓜"></b-checkbox>
      <b-checkbox label="草莓"></b-checkbox>
    </b-checkbox-group>
    <span style="color: #ff4511; margin: 5px 0">{{ checkAllGroup }}</span>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const checkAllGroup = ref(['香蕉', '西瓜'])
</script>

Checkbox props ​

参数说明类型可选值默认值
modelValue只在单独使用时有效。可以使用 v-model 双向绑定数据Boolean—false
label组合使用时有效。指定当前选项的 value 值，组合会自动判断是否选中String/Number/Boolean——
disabled是否禁用当前项Boolean—false
true-label选中值String、Number——
false-label没选中的值String、Number——
indeterminate设置 indeterminate 状态，只负责样式控制Boolean—false

Checkbox events ​

事件名说明返回值
change只在单独使用时有效。在选项状态发生改变时触发，通过修改外部的数据改变时不会触发true/false

CheckboxGroup props ​

参数说明类型可选值默认值
value指定选中项目的集合，可以使用 v-model 双向绑定数据String/ Number—''
disabled是否禁用所有选项Boolean—false
min最小数量Number——
max最大数量Number——

CheckboxGroup events ​

事件名说明返回值
change在选项状态发生改变时触发，返回已选中的数组。通过修改外部的数据改变时不会触发[...]

MIT Licensed | Copyright © 2023-present bin-ui-design