# Checkbox 复选框

<template>
  <Flex gap="160px">
    <Flex gap="24px">
      <Checkbox v-model="value" value="A">A</Checkbox>
      <Checkbox v-model="value" value="B">B</Checkbox>
    </Flex>
    <Flex gap="24px">
      <Checkbox v-model="value" value="A" disabled>A</Checkbox>
      <Checkbox v-model="value" value="B" disabled>B</Checkbox>
    </Flex>
  </Flex>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { Flex, Checkbox } from 'comz'

export default defineComponent({
  components: {
    Flex,
    Checkbox
  },
  setup() {
    return {
      value: ref([])
    }
  }
})
</script>

<template>
  <pre>value: <code>{{ JSON.stringify(value, null, 0) }}</code></pre>

  <Flex gap="24px">
    <Checkbox v-model="value" :value="`string`">String</Checkbox>
    <Checkbox v-model="value" :value="123">Number</Checkbox>
    <Checkbox v-model="value" :value="['arr1', 'arr2']">Array</Checkbox>
    <Checkbox v-model="value" :value="true">Boolean</Checkbox>
    <Checkbox v-model="value" :value="{ key: 'value' }">Object</Checkbox>
  </Flex>

  <br />

  <pre>Invalid value: <code>{{ JSON.stringify(value2, null, 0) }}</code></pre>

  <Flex gap="24px">
    <Checkbox v-model="value2" :value="() => {}">Function</Checkbox>
    <Checkbox v-model="value2" :value="null">Null</Checkbox>
    <Checkbox v-model="value2" :value="[new Map(), () => {}]">Array</Checkbox>
    <Checkbox v-model="value2" :value="{ key: () => {} }">Object</Checkbox>
  </Flex>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { Flex, Checkbox } from 'comz'

export default defineComponent({
  components: {
    Flex,
    Checkbox
  },
  setup() {
    return {
      value: ref([]),
      value2: ref([])
    }
  }
})
</script>

<template>
  <Flex gap="160px">
    <Flex gap="24px">
      <Checkbox v-model="value" value="image1">
        <Icon size="64px" color="#d2d2d2"><CardImage /></Icon>
      </Checkbox>
      <Checkbox v-model="value" value="image2">
        <Icon size="64px" color="#d2d2d2"><CardImage /></Icon>
      </Checkbox>
      <Checkbox v-model="value" value="image3">
        <Icon size="64px" color="#d2d2d2"><CardImage /></Icon>
      </Checkbox>
    </Flex>
  </Flex>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { Flex, Checkbox, Icon } from 'comz'
import { CardImage } from '@comz/icons'

export default defineComponent({
  components: {
    Flex,
    Checkbox,
    Icon,
    CardImage
  },
  setup() {
    return {
      value: ref([])
    }
  }
})
</script>