Vue中手写checkbox自定义复选框、单选全选

Vue中手写checkbox自定义复选框、单选框
可以自定义各种样式的单选复选框，比一些组件用起来方便。
案例展示，样式就不多阐述了，自己根据情况写。

<div>
  <div v-for="(item, index) in shareList" :key="index" class="item-box"@click="btnCheck(item)">
    <img class="checkbox-img" v-show="item.isCheck" src="../icon/checked.png"/>
	<img class="checkbox-img" v-show="!item.isCheck" src="../icon/uncheck.png"/>
    <p class="title">{{ item.title }}</p>
 </div>
//全选
 <div class="fixed-container">
    <div class="flex-s">
      <div class="check-icon-box flex-s" v-if="!isAllCheck" @click="chooseAll">
        <img src="../icon/all-uncheck.png" class="icon" />
        <span>全选</span>
      </div>
      <div class="check-icon-box flex-s" v-else @click="chooseAll">
        <img src="../icon/checked.png" class="icon" />
        <span>全选</span>
      </div>
    </div>
 </div>
</div>

<script>
export default {
  data() {
    return {
      shareList: [],
      result: [],
      isEdit: false,
      isAllCheck: false, // 全选
    };
  },
  created() {
    if (!localStorage.token) {
      this.$router.push({
        path: "/login",
      });
    } else {
      this.init();
    }
  },
  methods: {
    init() {
      return new Promise((resolve) => {
        let param = {
          url: `/wfcm-api/lingdu/share/me/page`,
          data: {
            shareId: this.$route.query.id,
          },
        };
        util.getData(param).then((res) => {
          if (res.errCode == 0) {
            let course = {};
            let list = [];
            // 给接口返回的数据处理，添加未选择isCheck状态
            res.data.list.forEach((item) => {
              course = {
                ...item,
                isCheck: false, //重点：给数组的每一项添加自定义isCheck，之后根据这个来区分选择状态
              };
              list.push(course);
            });
            this.shareList = list;
          } else {
            util.checkLogin(this, res, this.$route.query.inviteId);
          }
          resolve();
        });
      });
    },
    // 单选
    btnCheck(item) {
      item.isCheck = !item.isCheck;
      this.result = this.shareList.filter((item) => {
        return item.isCheck;
      });
      let flag = this.shareList.every((item) => {
        return item.isCheck == true;
      });
      this.isAllCheck = flag;
    },
    // 全选
    chooseAll() {
      this.isAllCheck = !this.isAllCheck;
      this.shareList.forEach((item, index) => {
        item.isCheck = this.isAllCheck;
      });
      this.result = this.shareList.filter((item) => {
        return item.isCheck;
      });
    },
  },
};
</script>