vue购物车php,关于vue的购物车checkbox全选和反选等功能实例分析

本文主要为大家分享一篇关于vue的购物车checkbox全选和反选等功能实例分析，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧。

由于逻辑相对简单，直接附上代码咯！愿君多采撷~~~~

html代码:

id: {{selectedData}}

{{item.value}}价格：{{item.price}}

.Vue文件代码:

import { Checklist } from "vux";

export default {

name: "selectBuyer",

data() {

return {

fullValues: [],

checkboxData: [

{

id: "1",

value: "苹果4S",

price: 110

},

{

id: "2",

value: "苹果5C",

price: 250

},

{

id: "3",

value: "苹果6P",

price: 340

}

],

selectedData: [],

totalPrice: 0.00,

isAllChecked: true,

checkBox: {

checked: false,

items: {}

}

};

},

mounted() {

this.checkboxData.forEach((item, index) => {

this.selectedData.push(item.id);

this.$set(this.checkBox.items, index, !this.checkBox.checked);

});

},

computed: {

totalPurchasers() {

return this.selectedData.length;

},

calculatedTotal() {

this.totalPrice = 0.00;

this.selectedData.map((item1, index) => {

let curItem1 = item1;

this.checkboxData.map((item2, index) => {

if(this.checkboxData[index].id == curItem1){

this.totalPrice += this.checkboxData[index].price;

}

});

});

return this.totalPrice;

}

},

methods: {

//全选点击事件

checkedAll() {

let trueNum = 0;

let checkBoxNum = 0;

Object.keys(this.checkBox.items).forEach(key => {

checkBoxNum++;

if (this.checkBox.items[key] === true) {

trueNum++;

}

});

if (trueNum != 0) {

if (

trueNum != this.checkboxData.length ||

checkBoxNum < this.checkboxData.length

) {

this.checkboxDataMap(!this.checkBox.checked);

} else {

this.checkboxDataMap(this.checkBox.checked);

}

} else {

this.checkboxDataMap(!this.checkBox.checked);

}

},

//遍历改变checkbox状态

checkboxDataMap(checked) {

let checkboxDataId = [];

this.checkboxData.forEach((item, index) => {

this.checkBox.items[index] = checked;

checkboxDataId.push(item.id);

});

if (checked == true) {

this.selectedData = this.arrayMerging(

this.selectedData,

checkboxDataId

);

} else {

this.selectedData.splice(0, this.selectedData.length);

}

},

//input输入框change事件

handleInputChange(e) {

setTimeout(() => {

if (this.selectedData.indexOf(e.target.value) > -1) {

this.remove(this.selectedData, e.target.value);

} else {

this.selectedData.push(e.target.value);

}

if (this.selectedData.length < this.checkboxData.length) {

this.isAllChecked = false;

} else {

this.isAllChecked = true;

}

}, 0);

},

//数组删除

remove(arr, val) {

var index = arr.indexOf(val);

if (index > -1) {

arr.splice(index, 1);

}

},

//数组合并去重

arrayMerging(arr1, arr2) {

var arr = arr1.concat();

for (var i = 0; i < arr2.length; i++) {

if (arr.indexOf(arr2[i]) === -1) {

arr.push(arr2[i]);

}

}

return arr;

}

},

components: {

Checklist

},

metaInfo() {

return {

title: "选择购卡学生"

};

}

};

less样式文件：@import (reference) "../../style/common.less";

.select-buyer {

.weui-cells_checkbox {

margin-top: -25px !important;

font-size: 28px;

.weui-cell {

padding: 40px 30px !important;

.vux-label-desc {

font-size: inherit;

}

}

& .weui-icon-checked:before {

font-size: 48px;

}

& .weui-check:checked+.vux-checklist-icon-checked:before {

color: @g-main-green;

}

}

.footer .weui-cells_checkbox .weui-check:checked+.weui-icon-checked:before {

content: '\EA01';

}

.footer .weui-cells_checkbox .weui-check:checked+.vux-checklist-icon-checked:before {

color: #C9C9C9;

}

}

.pay-area {

position: fixed;

height: 94px;

background-color: @g-white;

display: flex;

width: 100%;

left: 0;

bottom: 0;

.pay-btn {

width: 220px;

text-align: center;

font-size: 36px;

/* px */

line-height: 94px;

color: @g-white;

background-color: @g-main-green;

.loading-img {

width: 40px;

vertical-align: -3px;

margin: 0 3px;

}

}

.pay-text {

font-size: 28px;

color: @g-font-default-color;

line-height: 54px;

/* px */

display: inline-block;

vertical-align: top;

margin-right: 10px;

}

.pay-money {

font-size: 48px;

/* px */

line-height: 54px;

/* px */

color: @g-font-dark-color;

}

.price-area {

flex: 1;

padding: 20px 30px;

}

}

.error {

padding-left: 15px;

line-height: 28px;

color: #888;

font-size: 12px;

}

相关推荐：