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>
