Checkbox 复选框 #

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

const value1 = ref(true)
const value2 = ref(false)
const value3 = ref(true)
const value4 = ref(false)
</script>

<template>
  <vi-flex gap="18px">
    <span>请选择你的武器</span>
    <vi-checkbox v-model="value1" label="AK-47" />
    <vi-checkbox v-model="value2" label="AWP" />
    <vi-checkbox v-model="value3" label="M4A4" />
    <vi-checkbox v-model="value4" label="M4A1-S" />
  </vi-flex>
</template>

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

const value1 = ref(true)
const value2 = ref(false)
const value3 = ref(true)
const value4 = ref(false)
</script>

<template>
  <vi-flex gap="18px">
    <span>请选择你的武器</span>
    <vi-checkbox v-model="value1" label="AK-47" disabled />
    <vi-checkbox v-model="value2" label="AWP" />
    <vi-checkbox v-model="value3" label="M4A4" />
    <vi-checkbox v-model="value4" label="M4A1-S" disabled />
  </vi-flex>
</template>

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

const value1 = ref(true)
const value2 = ref(false)
const value3 = ref(true)
const value4 = ref(false)
</script>

<template>
  <vi-flex gap="18px">
    <span>请选择你的武器</span>
    <vi-checkbox v-model="value1" label="AK-47" border />
    <vi-checkbox v-model="value2" label="AWP" border />
    <vi-checkbox v-model="value3" label="M4A4" border disabled />
    <vi-checkbox v-model="value4" label="M4A1-S" border />
  </vi-flex>
</template>

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

const value = ref(['AK-47'])
</script>

<template>
  <vi-flex gap="18px">
    <span>请选择你的武器</span>
    <vi-checkbox-group v-model="value" gap="18px" border>
      <vi-checkbox label="AK-47" />
      <vi-checkbox label="AWP" />
      <vi-checkbox label="M4A4" disabled />
      <vi-checkbox label="M4A1-S" />
    </vi-checkbox-group>
  </vi-flex>
</template>

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

const value = ref(['AK-47'])
</script>

<template>
  <vi-flex gap="18px">
    <span>请选择你的武器</span>
    <vi-checkbox-group v-model="value" is-button>
      <vi-checkbox label="AK-47" />
      <vi-checkbox label="AWP" />
      <vi-checkbox label="M4A4" disabled />
      <vi-checkbox label="M4A1-S" />
    </vi-checkbox-group>
  </vi-flex>
</template>

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

const value = ref(['AK-47'])
</script>

<template>
  <vi-flex gap="18px">
    <span>请选择你的武器</span>
    <vi-checkbox-group v-model="value" :min="1" :max="3">
      <vi-checkbox label="AK-47" />
      <vi-checkbox label="AWP" />
      <vi-checkbox label="M4A4" />
      <vi-checkbox label="M4A1-S" />
    </vi-checkbox-group>
  </vi-flex>
</template>