Checkbox 多选框 ​

<template>
  <div class="">
    <w-title class="mb-4">单个使用</w-title>
    <div class="mb-4">
      <wi-checkbox v-model="checked1" label="选项 1">
        <div class="flex items-center">
          <span class="mr-4">李医生团队</span>
          <w-tag type="success">最优</w-tag>
        </div>
      </wi-checkbox>
      <wi-checkbox v-model="checked2" label="选项 2">
        <div class="flex items-center">
          <span class="mr-4">李医生团队</span>
          <w-tag type="success">最优</w-tag>
        </div>
      </wi-checkbox>
      <wi-checkbox v-model="checked3" label="选项 3" disabled>
        <div class="flex items-center">
          <span class="mr-4">李医生团队</span>
          <w-tag type="success">最优</w-tag>
        </div>
      </wi-checkbox>
    </div>
  </div>
</template>

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

const checked1 = ref(true)
const checked2 = ref(false)
const checked3 = ref(true)
</script>

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

<template>
  <wi-checkbox-group v-model="checkList" @change="handleChange">
    <wi-checkbox label="选项 A" value="Value A">
      <div class="flex items-center">
        <span class="mr-4">李医生团队</span>
        <w-tag type="success">最优</w-tag>
      </div>
    </wi-checkbox>
    <wi-checkbox label="选项 B" value="Value B">
      <div class="flex items-center">
        <span class="mr-4">李医生团队</span>
        <w-tag type="success">最优</w-tag>
      </div>
    </wi-checkbox>
    <wi-checkbox label="选项 C" value="Value C">
      <div class="flex items-center">
        <span class="mr-4">李医生团队</span>
        <w-tag type="success">最优</w-tag>
      </div>
    </wi-checkbox>
    <wi-checkbox label="禁用" value="Value disabled" disabled>
      <div class="flex items-center">
        <span class="mr-4">李医生团队</span>
        <w-tag type="success">最优</w-tag>
      </div>
    </wi-checkbox>
    <wi-checkbox
      label="已选中且禁用"
      value="Value selected and disabled"
      disabled
    >
      <div class="flex items-center">
        <span class="mr-4">李医生团队</span>
        <w-tag type="success">最优</w-tag>
      </div>
    </wi-checkbox>
  </wi-checkbox-group>

  <div style="margin-top: 24px">
    <w-title>对象绑定：</w-title>
    <wi-checkbox-group v-model="selectedObjs" @change="handleObjChange">
      <wi-checkbox v-for="item in options" :key="item.id" :value="item">
        {{ item.name }}
      </wi-checkbox>
    </wi-checkbox-group>
  </div>
</template>

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

const checkList = ref(['Value selected and disabled', 'Value A'])

const handleChange = (val: string[]) => {
  console.log(val)
}

interface Option {
  id: number
  name: string
}

const options: Option[] = [
  { id: 1, name: '选项 A' },
  { id: 2, name: '选项 B' },
  { id: 3, name: '选项 C' },
]

const selectedObjs = ref<Option[]>([{ id: 1, name: '选项 A' }])

const handleObjChange = (val: Option[]) => {
  console.log(val)
}
</script>