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";

const props = defineProps({
  modelValue: {
    type: String,
    default: "noChecked", // noChecked, checked, halfChecked
  },
  size: {
    type: Number,
    default: 28,
  },
});

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

const imageSrc = computed(() => {
  switch (props.modelValue) {
    case "noChecked":
      return circle;
    case "checked":
      return zu6039;
    case "halfChecked":
      return zu6040;
  }
});

const onCheck = () => {
  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>