//html代码
<div class="select-buyer"> <checklist :options="fullValues"></checklist> <span>id: {{selectedData}}</span> <div class="weui-cells weui-cells_checkbox"> <label v-for='(item, index) in checkboxData' :key="item.id" class="weui-cell weui-check_label"> <div class="weui-cell__hd"> <input :value="item.id" v-model="checkBox.items[index]" @click="handleInputChange" type="checkbox" name="vux-checkbox" class="weui-check"> <i class="weui-icon-checked vux-checklist-icon-checked"></i> </div> <div class="weui-cell__bd"> <p>{{item.value}}价格：{{item.price}}</p> </div> </label> </div> <footer :class="{footer:!isAllChecked}" class="pay-area"> <p class="price-area"> <span @click='checkedAll' class="pay-text weui-cells weui-cells_checkbox"> <label class="weui-cell weui-check_label"> <div class="weui-cell__hd"> <input v-model="isAllChecked" type="checkbox" name="vux-checkbox" class="weui-check"> <i class="weui-icon-checked vux-checklist-icon-checked"></i> </div> <div class="weui-cell__bd"> <p>全选</p> </div> </label> </span> <span class="pay-text">应付金额</span> <span class="pay-money">¥{{calculatedTotal}}</span> </p> <p v-if="totalPurchasers == 0" class="pay-btn">结算</p> <p v-else class="pay-btn">结算({{totalPurchasers}})</p> </footer></div>
.vue代码
<template src="./index.html"></template><script>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: "选择购卡学生" }; }};</script><style src="./index.less" lang="less"></style>.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;}GitHub地址：git@github.com:justjavaz/-vue-checkbox-vux-.git
