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

超人不会飞2021

已于 2023-07-21 15:12:34 修改

阅读量1k

点赞数 1

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2023-07-21 15:09:23 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_48585264/article/details/131851926

版权

vue 专栏收录该内容

16 篇文章

订阅专栏

该文章展示了在Vue中如何手写复选框和单选框，通过v-for指令遍历数据并结合点击事件处理选择状态。同时，文章提到了可以根据需求定制不同的样式，且提供了全选功能的实现，通过维护一个isAllCheck的状态来控制所有选项的选中状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>