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

零到壹度
リリース: 2018-03-29 10:10:06
オリジナル
5793 人が閲覧しました

この記事では主に、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.js は完全選択と逆選択を実装しますチェックボックスの全選択と逆選択を実現する3つの方法

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

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート