Vueのショッピングカートチェックボックスの全選択・逆選択などの機能の解析例

この記事では主に、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: '\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;
}

関連推奨事項:

Vue.js は完全選択と逆選択を実装しますチェックボックスの全選択と逆選択を実現する3つの方法

チェックボックスの全選択と逆選択の効果はjsで実現します

以上がVueのショッピングカートチェックボックスの全選択・逆選択などの機能の解析例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。