第八十二篇：Vue购物车(三) 实现全选功能

好家伙，

继续完善购物车相应功能

1.如何实现全选和反全选

1.1.全选框的状态显示(父传子)

来一波合理分析:

在页面中,有三个商品中

三个商品中的第二个未选择,

我么使用一个计算属性(fullState)来遍历一遍三个商品的选择状态

遍历过程中发现第二个是false,另外两个为true

那么计算属性fullState的状态也是false了,

三个都是true,这个计算属性才是true

然后将这个值传给全选框的组件,

如果值是false

那么我看到的全选框就是灰色的

反之,如果值是true

那么全选框那个位置就是亮的

我们来添加一个计算属性来动态判断每一项的勾选状态

全选为true,

非全选为false

computed:{
    //用于全选状态的计算属性
    //动态计算出全选的状态是true还是false
    fullState(){
      return this.list.every(item=>item.goods_state)
    }
  },

在App.vue的组件调用中:

<Footer :isfull="fullState"
    @full-change="getFullState"></Footer>

随后我们将这个值传给子组件

通过props传值

Footer.vue组件代码如下:

<template>
  <div class="footer-container">
    <!-- 左侧的全选 -->
    <div class="custom-control custom-checkbox">
      <!-- 全选框状态与isFull绑定 -->
      <input type="checkbox"
      class="custom-control-input"
      id="cbFull"
      :checked="isfull"
      @change="fullChange" />
      <label class="custom-control-label" for="cbFull">全选</label>
    </div>

    <!-- 中间的合计 -->
    <div>
      <span>合计：</span>
      <span class="total-price">￥{{ 0 }}</span>
    </div>

    <!-- 结算按钮 -->
    <button type="button" class="btn btn-primary btn-settle">结算（{{ 0 }}）</button>
  </div>
</template>

<script>
export default {
  props:{
    isfull:{
      type:Boolean,
      default:true
    }
  },
  methods:{
    //监听到全选状态的变化
    fullChange(e){
      this.$emit('full-change',e.target.checked)
    }
  }
}
</script>

<style lang="less" scoped>
.footer-container {
  font-size: 12px;
  height: 50px;
  width: 100%;
  border-top: 1px solid #efefef;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}

.custom-checkbox {
  display: flex;
  align-items: center;
}

#cbFull {
  margin-right: 5px;
}

.btn-settle {
  height: 80%;
  min-width: 110px;
  border-radius: 25px;
  font-size: 12px;
}

.total-price {
  font-weight: bold;
  font-size: 14px;
  color: red;
}
</style>

来看其中选择框的部分

<input type="checkbox"
      class="custom-control-input"
      id="cbFull"
      :checked="isfull"
      @change="fullChange" />

由全选框中的input把这个是否全选的状态渲染出来

接口定义:

props:{
    isfull:{
      type:Boolean,
      default:true
    }
  },

至此,显示"是否全选"的功能实现了

1.2.点击全选框后,选择全部商品

再次点击,取消全择

大概的思路分析:

我们在子组件中拿到全选框的状态(e.target.checked),

然后,我们用一个自定事件(full-change)把这个状态传给父组件,

随后用一个方法(getFullState)把每一个商品的状态改为全选框的状态

最后Goods.vue组件中渲染出来的状态,自然就是全选框的状态了

上代码,来看看如何实现

Footer.vue组件勾选框:

<input type="checkbox"
      class="custom-control-input"
      id="cbFull"
      :checked="isfull"
      @change="fullChange" />

勾选框状态改变,触发方法fullChange,

methods:{
    //监听到全选状态的变化
    fullChange(e){
      this.$emit('full-change',e.target.checked)
    }
  }

App.vue的组件调用中:

<Footer :isfull="fullState"
    @full-change="getFullState"></Footer>

getFullState方法:

 getFullState(val){
      console.log('在App中拿到了全选的状态')
      this.list.forEach(item=>(item.goods_state = val))
    }

此处val的值就是前面fullChange传过来的值(e.target.checked)

将所有商品的勾选状态改为全选框的值

于是,这个功能完成了

 

至此,全选功能完成,