Handwritten checkbox custom check box and radio box in Vue
You can customize radio check boxes in various styles, which is more convenient to use than some components.
The case shows, the style will not be elaborated, and I will write it according to the situation.
<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>