Combo UI

Appearance

On this page

Checkbox 勾选框 ​

说实话原生 input 元素的 checkbox 表现很怪，所以还是决定重制一个。



true
默认
 
 
尺寸
 
 
 
自定义图标
 
🏡

事件
 
vue
<script setup>
import { CCheckbox } from '../../src'
import { ref } from 'vue-demi'
import { AmericanFootballSharp } from '@vicons/ionicons5'
const checkboxvalue = ref(true)
const change = (value) => {
  alert('changed', value)
}
</script>
<template>
  <br />
  <br />
  {{ checkboxvalue }}
  <br />
  默认
  <br />
  <CCheckbox v-model:value="checkboxvalue"></CCheckbox>&nbsp;
  <CCheckbox v-model:value="checkboxvalue" disabled></CCheckbox>&nbsp;
  <br />
  尺寸
  <br />
  <CCheckbox v-model:value="checkboxvalue" size="s"></CCheckbox>&nbsp;
  <CCheckbox v-model:value="checkboxvalue" size="m"></CCheckbox>&nbsp;
  <CCheckbox v-model:value="checkboxvalue" size="l"></CCheckbox>&nbsp;
  <br />
  自定义图标
  <br />
  <CCheckbox
    v-model:value="checkboxvalue"
    size="l"
    :icon="AmericanFootballSharp"
  ></CCheckbox
  >&nbsp;
  <CCheckbox v-model:value="checkboxvalue" size="l" icon="🏡"></CCheckbox>
  <br />
  事件
  <br />
  <CCheckbox v-model:value="checkboxvalue" @c_change="change"></CCheckbox>&nbsp;
</template>