집 > 기사 > 웹 프론트엔드 > Vue의 장바구니 체크박스 전체 선택, 역선택 등의 기능에 대한 분석 예시

Vue의 장바구니 체크박스 전체 선택, 역선택 등의 기능에 대한 분석 예시

零到壹度원래의: 2018-03-29 10:10:065700검색

이 글은 주로 Vue의 장바구니 체크박스 전체 선택 및 역선택 기능에 대한 예제 분석을 공유합니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다. 편집자를 따라가서 살펴보겠습니다.

로직이 비교적 간단해서 코드를 직접 첨부하겠습니다! 더 많이 고를 수 있기를 바랍니다~~~~

html 코드:

<p class="select-buyer">
    <checklist :options="fullValues"></checklist>
    <span>id: {{selectedData}}</span>
    <p class="weui-cells weui-cells_checkbox">
        <label v-for=&#39;(item, index) in checkboxData&#39; :key="item.id" class="weui-cell weui-check_label">
            <p 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>
            </p>
            <p class="weui-cell__bd">
                <p>{{item.value}}价格：{{item.price}}</p>
            </p>
        </label>
    </p>
</p>

.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: &#39;\EA01&#39;;
    }
    .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;
}

Vue의 장바구니 체크박스 전체 선택, 역선택 등의 기능에 대한 분석 예시

관련 기사