Checkbox 多选框 ​

<template>
  <div class="">
    <w-title class="mb-4">默认</w-title>
    <div class="mb-4">
      <w-checkbox v-model="checked2" label="选项 1" size="large" />
      <w-checkbox v-model="checked1" label="选项 2" />
      <w-checkbox v-model="checked3" label="选项 3" size="small" />
    </div>
    <w-title>禁用：设置 disabled 属性即可。</w-title>
    <div class="mb-4">
      <w-checkbox v-model="checked4" disabled size="large" label="选项 4" />
      <w-checkbox v-model="checked5" disabled size="default" label="选项 5" />
      <w-checkbox v-model="checked6" disabled size="small" label="选项 6" />
    </div>
    <w-title>带边框：设置border属性可以渲染为带有边框的多选框。</w-title>
    <div class="mb-4">
      <w-checkbox v-model="checked7" label="选项 7" size="large" border />
      <w-checkbox v-model="checked8" label="选项 8" size="large" border />
      <w-checkbox v-model="checked9" label="选项 9" border />
      <w-checkbox v-model="checked10" label="选项 10" border />
      <w-checkbox v-model="checked11" label="选项 11" border />
      <w-checkbox v-model="checked12" label="选项 12" border />
      <w-checkbox v-model="checked13" label="选项 13" border disabled />
      <w-checkbox v-model="checked14" label="选项 14" border disabled />
    </div>
  </div>
</template>

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

const checked1 = ref(true)
const checked2 = ref(false)
const checked3 = ref(true)
const checked4 = ref(false)
const checked5 = ref(true)
const checked6 = ref(true)
const checked7 = ref(false)
const checked8 = ref(true)
const checked9 = ref(false)
const checked10 = ref(true)
const checked11 = ref(true)
const checked12 = ref(false)
const checked13 = ref(true)
const checked14 = ref(false)
</script>

<style scoped lang="scss">
.w3-checkbox {
  margin-bottom: 12px;
}
</style>

<template>
  <w-checkbox-group v-model="checkList">
    <w-checkbox label="选项 A" value="Value A" />
    <w-checkbox label="选项 B" value="Value B" />
    <w-checkbox label="选项 C" value="Value C" />
    <w-checkbox label="禁用" value="Value disabled" disabled />
    <w-checkbox
      label="已选中且禁用"
      value="Value selected and disabled"
      disabled
    />
  </w-checkbox-group>
</template>

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

const checkList = ref(['Value selected and disabled', 'Value A'])
</script>

<template>
  <w-checkbox
    v-model="checkAll"
    :indeterminate="isIndeterminate"
    @change="handleCheckAllChange"
  >
    全选
  </w-checkbox>
  <w-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <w-checkbox v-for="city in cities" :key="city" :label="city" :value="city">
      {{ city }}
    </w-checkbox>
  </w-checkbox-group>
</template>

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

import type { CheckboxValueType } from 'win-design-next'

const checkAll = ref(false)
const isIndeterminate = ref(true)
const checkedCities = ref(['内科', '外科'])
const cities = ['内科', '外科', '妇产科', '新生儿科']

const handleCheckAllChange = (val: CheckboxValueType) => {
  checkedCities.value = val ? cities : []
  isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value: CheckboxValueType[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}
</script>

<template>
  <w-checkbox-group v-model="checkedCities" :min="1" :max="2">
    <w-checkbox v-for="city in cities" :key="city" :label="city" :value="city">
      {{ city }}
    </w-checkbox>
  </w-checkbox-group>
</template>

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

const checkedCities = ref(['外科', '内科'])
const cities = ['内科', '外科', '妇产科', '新生儿科']
</script>

<template>
  <div>
    <w-checkbox-group v-model="checkboxGroup1" size="large">
      <w-checkbox-button v-for="city in cities" :key="city" :value="city">
        {{ city }}
      </w-checkbox-button>
    </w-checkbox-group>
  </div>
  <div class="demo-button-style">
    <w-checkbox-group v-model="checkboxGroup2">
      <w-checkbox-button v-for="city in cities" :key="city" :value="city">
        {{ city }}
      </w-checkbox-button>
    </w-checkbox-group>
  </div>
  <div class="demo-button-style">
    <w-checkbox-group v-model="checkboxGroup3" size="small">
      <w-checkbox-button
        v-for="city in cities"
        :key="city"
        :value="city"
        :disabled="city === 'Beijing'"
      >
        {{ city }}
      </w-checkbox-button>
    </w-checkbox-group>
  </div>
  <div class="demo-button-style">
    <w-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
      <w-checkbox-button v-for="city in cities" :key="city" :value="city">
        {{ city }}
      </w-checkbox-button>
    </w-checkbox-group>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const checkboxGroup1 = ref(['内科'])
const checkboxGroup2 = ref(['内科'])
const checkboxGroup3 = ref(['内科'])
const checkboxGroup4 = ref(['内科'])
const cities = ['内科', '外科', '妇产科', '新生儿科']
</script>

<style scoped>
.demo-button-style {
  margin-top: 24px;
}
</style>