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>