vue3+ts 模仿写单选框，但是勾选样式必须是复选框的样式

在 Vue3 中使用 TypeScript 模拟一个单选框但外观类似复选框，可以创建一个自定义组件，比如一个“Checkbox-like Radio”组件。首先，你需要安装 Vue 的官方推荐库 Vuetify，它提供了一套丰富的 UI 组件，包括复选框样式。假设你还没有安装，可以这样做：

npm install vuetify

然后，在组件文件（如 SingleCheckbox.vue）中，你可以这样实现：

<template>
  <v-container>
    <v-row>
      <v-col>
        <!-- 使用 Vuetify 的 Checkbox 组件，并设置单选模式 -->
        <v-checkbox
          v-model="selectedValue"
          color="primary"   // 设置复选框样式
          @change="handleChange"
          multiple="false"   // 将默认的多选改为单选
          class="custom-radio"
        ></v-checkbox>
      </v-col>
    </v-row>
  </v-container>
</template>

<script lang="ts">
import { VuetifyComponentOptions } from 'vue-vuetify';
import { PropType } from 'vue';

export default {
  components: {},
  name: 'SingleCheckbox',
  props: {
    value: {
      type: String,
      required: true,
    },
  } as VuetifyComponentOptions,

  data() {
    return {
      selectedValue: '',
    };
  },

  methods: {
    handleChange(event) {
      if (event.target.value === this.value) {
        this.selectedValue = event.target.value;
      }
    },
  },
};
</script>

<style scoped>
.custom-radio + .v-input__slot:before {
  /* 自定义样式，模拟复选框的样子 */
  content: "";
  border: 2px solid #007bff;
  border-radius: 4px;
  margin-right: 8px;
}
</style>

在这个例子中，我们使用了 `v-checkbox` 组件并设置了 `multiple` 属性为 `false` 使其成为单选模式。同时，通过 CSS 选择器 `.custom-radio + .v-input__slot:before` 来改变单选按钮前的背景和边框样式，使其看起来像复选框。