vant自定义复选框

来，先看看效果图

 <van-checkbox-group v-model="data.weak" direction="horizontal">
            <van-checkbox class="A-box" v-for="(item, index) in data.repeatData" :key="index" :name="item.index">
              <template #icon="props">
                <!-- 头像 -->
                <img :src="getAssetsFile(item.img)" alt="" />
                <!-- 显示隐藏的图标 -->
                <img class="rigth-img" src="@/assets/img/idolTelephone/icon_checkbox_dis-1.png" alt="" />
                <img class="rigth-img" v-if="props.checked" src="@/assets/img/idolTelephone/ee.png" alt="" />
                <p>{{ item.name }}</p>
              </template>
            </van-checkbox>
          </van-checkbox-group>

const data = reactive({
  weak: [],// 这里是最终输出的index   改为自己想要的就行
  repeatData: [
    { name: '乔巴', img: 'img/yer.png', index: 112233 },
    { name: '路飞', img: 'img/yer.png', index: 2 },
    { name: '娜美', img: 'img/yer.png', index: 3 },
    { name: '三治', img: 'img/yer.png', index: 4 },
    { name: '三治', img: 'img/yer.png', index: 41 },
    { name: '索隆', img: 'img/yer.png', index: 5 }
  ]
})

console.log(data.weak)//打印结果为[2,3,5]