1.0.4 • Published 4 years ago
lshop v1.0.4
安装
npm i lshop
main.js中使用
// 全局注册组件 import LShop from 'LShop' Vue.use(LShop)
页面中使用
<LShop
:shopList="shopList"
:allselected="allselected"
:emptyTitle="emptyTitle"
:money="money"
:num="num"
:showIcon="showIcon"
:noneIcon="noneIcon"
:deleteIcon="deleteIcon"
@delerte="delerte"
@radios="radios"
@btn_add="btn_add"
@btn_minute="btn_minute"
@Allradios="Allradios"
@GetSave="GetSave"
>
</LShop>
参数描述
是否全选
allselected: false,
showIcon:"",
noneIcon:"",
deleteIcon:"",
// 空数据状态
emptyTitle: "购物车为空~",
//默认总价
money: 0,
//默认总数量
num: 0,
//购物车假数据
shopList: [
{
name: "购物车插件",
num: 1,
money: 10,
src: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-110c136f-036c-47c5-af52-fcf8719fbf54/6d89bb46-efd4-4bba-a195-d38129f9e747.jpg",
title: "仅仅是一个简单的自定义购物车插件",
selected: true,
},
{
name: "购物车插件",
num: 1,
money: 10,
src: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-110c136f-036c-47c5-af52-fcf8719fbf54/6d89bb46-efd4-4bba-a195-d38129f9e747.jpg",
title: "仅仅是一个简单的自定义购物车插件",
selected: false,
},
{
name: "购物车插件",
num: 1,
money: 10,
src: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-110c136f-036c-47c5-af52-fcf8719fbf54/6d89bb46-efd4-4bba-a195-d38129f9e747.jpg",
title: "仅仅是一个简单的自定义购物车插件",
selected: true,
},
],
# 方法
/**
* 输入框计算总价以及数量
*/
bnt_input(index) {
// 这里设置限制最大
console.log(index);
var shopList = this.shopList;
var num = parseInt(shopList[index].num);
if (num > 1 && num < 100) {
this.allPrice();
} else {
shopList[index].num = 1;
this.$mess;
}
},
//总价总数量方法 方便调用 再次多写了一次[可以跟初始化封装为一个方法]
allPrice: function () {
var price = 0;
var numb = 0;
var shopList = this.shopList;
for (var i = 0; i < shopList.length; i++) {
if (shopList[i].selected) {
price += parseInt(shopList[i].num) * shopList[i].money;
numb += parseInt(shopList[i].num);
}
}
this.money = price;
this.num = numb;
},
//删除购物车列表
delerte: function (index) {
this.shopList.splice(index, 1);
this.allPrice();
},
//选中未选中
radios: function (index) {
var shopList = this.shopList;
shopList[index].selected = !shopList[index].selected;
this.allPrice();
},
//添加
btn_add: function (index) {
var shopList = this.shopList;
var num = parseInt(shopList[index].num);
num = num + 1;
shopList[index].num = num;
this.allPrice();
},
//减去
btn_minute: function (index) {
var shopList = this.shopList;
var num = parseInt(shopList[index].num);
if (num > 1) {
num = num - 1;
shopList[index].num = num;
}
this.allPrice();
},
/**
* 全选
*/
Allradios() {
var that = this;
// 第一步更改全选状态 true/false
that.allselected = !that.allselected;
// 循环遍历购物车数据
for (var i in this.shopList) {
// 全选为true时,列表购物车都选中、false时列表购物车都不选中
if (that.allselected) {
this.shopList[i].selected = true;
} else {
this.shopList[i].selected = false;
}
}
// 刷新一下总价
this.allPrice();
},
/**
* 提交
*/
GetSave() {
var list = [];
list = this.shopList.filter((item) => {
if (item.selected) {
return true;
}
});
console.log("提交",list);
},