Vue Amazing UI

Appearance

复选框 Checkbox ​

复选框

何时使用 ​

  • 在一组可选项中进行多项选择时
  • 单独使用可以表示两种状态之间的切换，和 Switch 类似

基本使用 ​

Checkbox
Show Code
vue
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import type { CheckboxProps } from 'vue-amazing-ui'
const checked = ref<CheckboxProps['checked']>(false)
watchEffect(() => {
  console.log('checked', checked.value)
})
function onChange(value: boolean) {
  console.log('change', value)
}
</script>
<template>
  <Checkbox v-model:checked="checked" @change="onChange">Checkbox</Checkbox>
</template>

选项列表 ​

北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
Show Code
vue
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import type { CheckboxProps, CheckboxOption } from 'vue-amazing-ui'
const options = ref<CheckboxOption[]>([
  {
    label: '北京市',
    value: 1
  },
  {
    label: '纽约市',
    value: 2
  },
  {
    label: '布宜诺斯艾利斯',
    value: 3
  },
  {
    label: '伊斯坦布尔',
    value: 4
  },
  {
    label: '拜占庭',
    value: 5
  },
  {
    label: '君士坦丁堡',
    value: 6
  }
])
const selectedOptions = ref<CheckboxProps['value']>([2])
watchEffect(() => {
  console.log('selectedOptions', selectedOptions.value)
})
function onChange(value: (string | number)[]) {
  console.log('change', value)
}
</script>
<template>
  <Checkbox :options="options" v-model:value="selectedOptions" @change="onChange" />
</template>

禁用 ​

北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
import type { CheckboxProps, CheckboxOption } from 'vue-amazing-ui'
const options = ref<CheckboxOption[]>([
  {
    label: '北京市',
    value: 1
  },
  {
    label: '纽约市',
    value: 2
  },
  {
    label: '布宜诺斯艾利斯',
    value: 3
  },
  {
    label: '伊斯坦布尔',
    value: 4
  },
  {
    label: '拜占庭',
    value: 5
  },
  {
    label: '君士坦丁堡',
    value: 6
  }
])
const selectedOptions = ref<CheckboxProps['value']>([2])
</script>
<template>
  <Checkbox :options="options" v-model:value="selectedOptions" disabled />
</template>

禁用选项 ​

北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
Show Code
vue
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import type { CheckboxProps, CheckboxOption } from 'vue-amazing-ui'
const optionsDisabled = ref<CheckboxOption[]>([
  {
    label: '北京市',
    value: 1
  },
  {
    label: '纽约市',
    value: 2,
    disabled: true
  },
  {
    label: '布宜诺斯艾利斯',
    value: 3
  },
  {
    label: '伊斯坦布尔',
    value: 4
  },
  {
    label: '拜占庭',
    value: 5
  },
  {
    label: '君士坦丁堡',
    value: 6
  }
])
const selectedOptions = ref<CheckboxProps['value']>([2])
watchEffect(() => {
  console.log('selectedOptions', selectedOptions.value)
})
</script>
<template>
  <Checkbox :options="optionsDisabled" v-model:value="selectedOptions" />
</template>

全选 ​

Check All
北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
Show Code
vue
<script setup lang="ts">
import { ref, watch, watchEffect } from 'vue'
import type { CheckboxProps, CheckboxOption } from 'vue-amazing-ui'
const options = ref<CheckboxOption[]>([
  {
    label: '北京市',
    value: 1
  },
  {
    label: '纽约市',
    value: 2
  },
  {
    label: '布宜诺斯艾利斯',
    value: 3
  },
  {
    label: '伊斯坦布尔',
    value: 4
  },
  {
    label: '拜占庭',
    value: 5
  },
  {
    label: '君士坦丁堡',
    value: 6
  }
])
const selectedOptions = ref<CheckboxProps['value']>([2])
watchEffect(() => {
  console.log('selectedOptions', selectedOptions.value)
})
const checkAll = ref<CheckboxProps['checked']>(false) // 是否全选
const indeterminate = ref<CheckboxProps['indeterminate']>(false) // 全选样式控制
watch(
  selectedOptions,
  (to: any) => {
    indeterminate.value = 0 < to.length && to.length < options.value.length
    checkAll.value = to.length === options.value.length
  },
  {
    immediate: true
  }
)
function onCheckAllChange(checked: boolean) {
  if (checked) {
    selectedOptions.value = options.value.map((option) => option.value)
  } else {
    selectedOptions.value = []
  }
}
</script>
<template>
  <Space vertical>
    <Checkbox :indeterminate="indeterminate" v-model:checked="checkAll" @change="onCheckAllChange">Check All</Checkbox>
    <Checkbox :options="options" v-model:value="selectedOptions" />
  </Space>
</template>

垂直排列 ​

北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
Show Code
vue
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import type { CheckboxProps, CheckboxOption } from 'vue-amazing-ui'
const options = ref<CheckboxOption[]>([
  {
    label: '北京市',
    value: 1
  },
  {
    label: '纽约市',
    value: 2
  },
  {
    label: '布宜诺斯艾利斯',
    value: 3
  },
  {
    label: '伊斯坦布尔',
    value: 4
  },
  {
    label: '拜占庭',
    value: 5
  },
  {
    label: '君士坦丁堡',
    value: 6
  }
])
const selectedOptions = ref<CheckboxProps['value']>([2])
watchEffect(() => {
  console.log('selectedOptions', selectedOptions.value)
})
</script>
<template>
  <Checkbox :options="options" vertical v-model:value="selectedOptions" />
</template>

自定义选项名 ​

北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
Show Code
vue
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import type { CheckboxProps, CheckboxOption } from 'vue-amazing-ui'
const options = ref<CheckboxOption[]>([
  {
    label: '北京市',
    value: 1
  },
  {
    label: '纽约市',
    value: 2
  },
  {
    label: '布宜诺斯艾利斯',
    value: 3
  },
  {
    label: '伊斯坦布尔',
    value: 4
  },
  {
    label: '拜占庭',
    value: 5
  },
  {
    label: '君士坦丁堡',
    value: 6
  }
])
const selectedOptions = ref<CheckboxProps['value']>([2])
watchEffect(() => {
  console.log('selectedOptions', selectedOptions.value)
})
</script>
<template>
  <Checkbox :options="options" v-model:value="selectedOptions">
    <template #default="{ option, label, index }">
      <span v-if="index === 1" style="color: #ff6900">{{ label }}</span>
      <span v-if="index === 3" style="color: #1677ff">{{ option.label }}</span>
    </template>
  </Checkbox>
</template>

自定义间距 ​

北京市
纽约市
布宜诺斯艾利斯
伊斯坦布尔
拜占庭
君士坦丁堡
Show Code
vue
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import type { CheckboxProps, CheckboxOption } from 'vue-amazing-ui'
const options = ref<CheckboxOption[]>([
  {
    label: '北京市',
    value: 1
  },
  {
    label: '纽约市',
    value: 2
  },
  {
    label: '布宜诺斯艾利斯',
    value: 3
  },
  {
    label: '伊斯坦布尔',
    value: 4
  },
  {
    label: '拜占庭',
    value: 5
  },
  {
    label: '君士坦丁堡',
    value: 6
  }
])
const selectedOptions = ref<CheckboxProps['value']>([2])
watchEffect(() => {
  console.log('selectedOptions', selectedOptions.value)
})
const horizontalGap = ref(16)
const verticalGap = ref(8)
</script>
<template>
  <Flex vertical>
    <Row :gutter="24">
      <Col :span="12">
        <Flex gap="small" vertical>
          horizontal gap: <Slider v-model:value="horizontalGap" />
        </Flex>
      </Col>
      <Col :span="12">
        <Flex gap="small" vertical>
          vertical gap: <Slider v-model:value="verticalGap" />
        </Flex>
      </Col>
    </Row>
    <Checkbox :gap="[horizontalGap, verticalGap]" :options="options" v-model:value="selectedOptions" />
  </Flex>
</template>

APIs ​

Checkbox ​

参数说明类型默认值
options复选框选项数据Option[][]
disabled是否禁用booleanfalse
vertical是否垂直排列booleanfalse
value
v-model
当前选中的值，配合 options 使用(string | number)[][]
gap多个复选框之间的间距；垂直排列时为垂直间距，单位 px；数组间距用于水平排列折行时：[水平间距, 垂直间距]number8
indeterminate全选时的样式控制booleanfalse
checked
v-model
当前是否选中booleanfalse

Option Type ​

名称说明类型默认值
label选项名stringundefined
value选项值string | numberundefined
disabled?是否禁用选项booleanundefined

Slots ​

名称说明类型
default自定义选项名v-slot:default="{ option, label, index }"

Events ​

名称说明类型
change变化时回调函数(value: boolean | (string | number)[]) => void

Released under the MIT License.

Copyright © 2023-present the Muse Catcher