Vue+Vant制作单选全选全不选以及删除按钮van-checkbox
在官网上看到vant组件特别好用，就尝试使用checkbox制作单选全选，由于是下午头脑不清楚所以没想通思路，导致了一部分的错误，经过我的老大指点，才想通如此简单的思路，就是都亮和都不亮的区别。
全选全不选
1. 引入组件
import Vue from ‘vue’;
import { Checkbox, CheckboxGroup } from ‘vant’;
Vue.use(Checkbox).use(CheckboxGroup);
2. 基础用法
通过v-model绑定 checkbox 的勾选状态
复选框
export default {
data() {
return {
checked: true
};
}
};
3. 做出的效果：全选全亮；取消全选全部不亮；单选时全选不亮。
4. 基础代码如下：
删除功能
包括了调用接口的删除，在文中会注明的。
<template>
<div>
<div>我是关注店铺</div>
<div class="lyy-bg">
<div class="lyy-hei"></div>
<div class="lyy-neia lyy-gs1" v-for="(items,index) in list" :key="index">
<!-- @click="handleShopSelect1()" -->
<!-- :value="items.id" -->
<van-checkbox
style="padding:0px 5px 0px 0px"
v-show="isShow"
v-model="items.checked"
@change="choose"
checked-color="#07c160"
></van-checkbox>
<div class="lyy-nei">
<div class="lyy-gs">
<div class="lyy-gs1">
<div class="lyy-tu">
<img :src="items.shop_logo" width="68px" height="68px" />
</div>
<div class="lyy-jl">
<div class="lyy-word">{{items.shop_name}}</div>
<div class="lyy-word2">
<span>
<img src="@/img/xing.png" width="12px" height="11px" />
</span>
<span>{{items.num}}</span>人已关注
</div>
</div>
<div class="lyy-word3">进店逛逛 ></div>
</div>
</div>
</div>
</div>
<!-- 全选管理按钮 -->
<div class="lyy-qx lyy-gs1" v-show="isShow">
<div>
<van-checkbox
class="lyy-qx2"
v-model="checked"
checked-color="#07c160"
@click="allCheck"
>全选</van-checkbox>
<!-- @click="handleShopSelect" -->
</div>
<div class="lyy-del" @click="deleteData">删除</div>
</div>
<div class="lyy-gl" @click="toggle()">
<div class="lyy-gl2">
<div class="lyy-gl3">
<img src="@/img/zfx2.png" width="28px" height="28px" />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
checked: false, //全选
isShow: false,
//测试数据
list: [
{
id: "1",
shop_name: "若萱旗舰店",
num: 5,
shop_logo: require("@/img/tu.png"),
checked: false
},
{
id: "2",
shop_name: "小白旗舰店",
num: 2,
shop_logo: require("@/img/tu.png"),
checked: false
}
]
};
},
created() {
this.followData();
this.addData();
},
methods: {
toggle() {
this.isShow = !this.isShow;
},
//全选
allCheck() {
let a = !this.checked;
this.list = this.list.map(e => {
e.checked = a;
return e;
});
},
//单选
choose() {
let a = true;
this.list.forEach(e => {
if (e.checked === false) {
a = false;
}
});
this.checked = a;
},
//删除
deleteData() {
let arr = [];
// var len = this.list.length;
this.list.forEach(e => {
e.checked ? 0 : arr.push(e);
});
this.list = arr;
},
followData() {//这里是接口的调用
// this.$http
// .get("/apis/Member/concern", {
// params: {
// uid: 10
// }
// })
// .then(res => {
// console.log(res);
// this.list = res.data.data.map(e => {
// e.checked = false;
// return e;
// });
// })
// .catch(err => {
// console.log(err);
// });
},
addData() {
let _self = this;
let data = {
shop_id: 9,
uid: 10
};
_self.$http
.get("/apis/Member/followShop", {
//关注店铺的
params: data
})
.then(res => {
console.log(res);
res = res.data;
})
.catch(err => {
console.log(err);
});
}
}
};
</script>
<style scoped>
.lyy-bg {
background-color: #f8f6f6;
}
.lyy-hei {
height: 5px;
}
.lyy-nei {
width: 100%;
background: rgba(255, 255, 255, 1);
border-radius: 4px;
}
.lyy-neia {
padding: 0px 0px 5px 0px;
margin: 0px 9px 0px 9px;
}
.lyy-tu {
width: 68px;
height: 68px;
background: rgba(255, 255, 255, 1);
border: 0px solid rgba(238, 238, 238, 1);
}
.lyy-gs {
padding: 17px 0px 16px 18px;
flex-direction: row;
}
.lyy-gs1 {
display: flex;
justify-content: space-between;
}
.lyy-word {
font-size: 12px;
font-family: "PingFang SC";
font-weight: 400;
color: rgba(51, 51, 51, 1);
line-height: 18px;
padding: 0px 0px 16px 0px;
}
.lyy-word2 {
font-size: 13px;
font-family: "Adobe Heiti Std";
font-weight: normal;
color: #999999;
}
.lyy-word3 {
font-size: 11px;
font-family: PingFang SC;
font-weight: 400;
color: rgba(114, 117, 115, 1);
line-height: 18px;
padding: 15px 13px 0px 0px;
}
.lyy-jl {
padding: 0px 40px 0px 16px;
}
.lyy-gl {
/* width: 64px;
height: 25px;
border-radius: 60px; */
/* background-color: #6fb22f; */
/* color: white; */
/* text-align: center; */
position: fixed;
bottom: 4rem;
right: 1.5rem;
}
.lyy-gl2 {
width: 44px;
height: 44px;
border-radius: 100%;
background-color: #030303;
}
.lyy-gl3 {
padding:6px 8px;
}
.lyy-qx {
/* width: 320px; */
height: 51px;
width: 100%;
position: fixed;
bottom: 0rem;
/* right: 0.5rem; */
background: white;
}
.lyy-del {
width: 65px;
height: 26px;
border-radius: 13px;
background: rgba(241, 13, 59, 1);
color: white;
text-align: center;
position: relative;
top: 10px;
right: 10px;
line-height: 24px;
font-size: 12px;
font-family: "Microsoft YaHei";
font-weight: 400;
color: rgba(255, 255, 255, 1);
}
.lyy-qx2 {
position: relative;
top: 10px;
left: 10px;
}
</style>
效果如下：
