uview中Checkbox 复选框自定义内容

在UView UI库中，Checkbox（复选框）默认提供了一个简洁的视觉样式，如果你想在Vue应用中为其添加自定义的内容，可以借助Vue的模板系统以及UView提供的`u-checkbox-group`组件。你可以通过以下几个步骤来实现：

1. 首先，在你的Vue单文件组件里，引入`u-checkbox`组件，并设置v-model绑定到数据状态，如`selectedItems`数组。

<template>
  <div>
    <u-checkbox-group v-model="selectedItems">
      <!-- 自定义内容将放在这里 -->
      <u-checkbox label="自定义内容1" :key="1"></u-checkbox>
      <u-checkbox label="自定义内容2" :key="2"></u-checkbox>
      <!-- 添加更多的复选框，每个都有对应的自定义文本 -->
    </u-checkbox-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItems: [], // 存储选中的项
    };
  },
};
</script>

2. 在`label`属性中，你可以插入HTML元素，包括文字、图片或者其他自定义元素。例如，如果你想显示一个带图标和文字的复选框：

<u-checkbox label="<img src='你的图片路径'> 我选择这个" :key="3"></u-checkbox>

这样，当用户点击复选框时，`selectedItems`数组会反映出他们的选择，而复选框的文字内容会被替换为你自定义的内容。