chat-app/src/components/checkBox/index.vue

<template>
  <div @click.stop="onCheck">
    <tm-image :width="size" :height="size" :src="imageSrc"></tm-image>
  </div>
</template>

<script setup>
import { defineProps, computed, defineEmits } from 'vue'
import circle from '@/static/image/checkBox/circle@2x.png'
import zu6039 from '@/static/image/checkBox/zu6039@2x.png'
import zu6040 from '@/static/image/checkBox/zu6040@2x.png'
import checkBoxDisabled from '@/static/image/checkBox/disabled.png'

const props = defineProps({
  modelValue: {
    type: String,
    default: 'noChecked', // noChecked, checked, halfChecked, disabled
  },
  size: {
    type: Number,
    default: 28,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['update:modelValue', 'change'])

const imageSrc = computed(() => {
  if (props.disabled) {
    return checkBoxDisabled
  }
  switch (props.modelValue) {
    case 'noChecked':
      return circle
    case 'checked':
      return zu6039
    case 'halfChecked':
      return zu6040
  }
})

const onCheck = () => {
  if (props.disabled) return
  switch (props.modelValue) {
    case 'noChecked':
      emit('update:modelValue', 'checked')
      emit('change', 'checked')
      break
    case 'checked':
      emit('update:modelValue', 'noChecked')
      emit('change', 'noChecked')
      break
    case 'halfChecked':
      emit('update:modelValue', 'checked')
      emit('change', 'checked')
      break
  }
}
</script>
<style scoped lang="less"></style>