【Vue项目复习笔记】汇总工具栏的封装

新建CartBottomBar，将其导入到cart，注册使用。
其中CartBottomBar如下：

<template>
<div class="bottom-bar">
  <div class="check-content">
    <check-button class="checked-all"
    ></check-button>
    <span>全选</span>
  </div>
  <div class="totalPrice">
    合计：{{totalPrice}}
  </div>
  <div class="calculate">
    去计算：{{checkLength}}
  </div>
</div>
</template>

<script>
import CheckButton from '@/components/content/checkButton/CheckButton';
export default {
  name: 'CartBottomBar',
  components:{
    CheckButton
  },
  computed:{
    totalPrice(){
   return this.$store.state.cartList.filter((item) => {
            return item.checked;
          }).reduce((preValue, item) => {
            return preValue + item.price * item.count;
            // preValue 上一次的值
          }, 0).toFixed(2)
       //toFixed(2)保留两位小数
    },
    checkLength() {
      return this.$store.state.cartList.filter((item) => item.checked).length;
    },
};
</script>

<style scoped>
.bottom-bar {
  position: relative;
  display: flex;
  height: 60px;
  line-height: 60px;
  bottom: 20px;
  background-color: #eeeeee;
}
.check-content {
  display: flex;
  align-items: center;
  margin-left: 10px;
  width: 60px;
}
.checked-all {
  width: 20px;
  height: 20px;
  line-height: 20px;
  margin-right: 5px;
}
.totalPrice {
  margin-left: 20px;
  flex: 1;
}
.calculate {
  width: 90px;
  background-color: #fb7299;
  text-align: center;
  color: #ffffff;
}
</style>

全选按钮状态显示

所有商品都被选中的时候，全选才会被选中。判断有一个不选中，全选就不选中。

  <check-button class="checked-all"
                  :is-checked="isSelectAll"
    ></check-button>

   isSelectAll(){
      if(this.$store.state.cartList.length===0) return false;
      //因为如果购物车里面没有内容this.$store.state.cartList.find(item=>!item.checked)这个返回的就是undefined，取反就是true
      return  !this.$store.state.cartList.find(item=>!item.checked)
      //this.$store.state.cartList.find(item=>!item.checked)找到一个不选中的这个就是true
      //取反就是false，此时全选是false
    }
  },

全选按钮的点击效果

先要监听点击

 <check-button class="checked-all"
                  :is-checked="isSelectAll"
    @click.native="checkClick"
    ></check-button>

点击全选，如果原来都是选中，点击一次，全部不选中；如果原来都是不选中（某些不选中），全部选中。

 methods:{
     checkClick(){
      if (this.isSelectAll){
        //全部选中
        this.$store.state.cartList.forEach(item=>item.checked=false)
      }else { //部分或者全部不选中
        this.$store.state.cartList.forEach(item=>item.checked=true)
      }
    },
  }