lshop

安装

npm i lshop

main.js中使用

// 全局注册组件 import LShop from 'LShop' Vue.use(LShop)

页面中使用

<LShop
  :shopList="shopList"
  :allselected="allselected"
  :emptyTitle="emptyTitle"
  :money="money"
  :num="num"
  :showIcon="showIcon"
  :noneIcon="noneIcon"
  :deleteIcon="deleteIcon"
  @delerte="delerte"
  @radios="radios"
  @btn_add="btn_add"
  @btn_minute="btn_minute"
  @Allradios="Allradios"
  @GetSave="GetSave"
>
</LShop>

参数描述

     是否全选
      allselected: false,
      showIcon:"",
      noneIcon:"",
      deleteIcon:"",
      // 空数据状态
      emptyTitle: "购物车为空~",
      //默认总价
      money: 0,
      //默认总数量
      num: 0,
      //购物车假数据
      shopList: [
        {
          name: "购物车插件",
          num: 1,
          money: 10,
          src: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-110c136f-036c-47c5-af52-fcf8719fbf54/6d89bb46-efd4-4bba-a195-d38129f9e747.jpg",
          title: "仅仅是一个简单的自定义购物车插件",
          selected: true,
        },
        {
          name: "购物车插件",
          num: 1,
          money: 10,
          src: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-110c136f-036c-47c5-af52-fcf8719fbf54/6d89bb46-efd4-4bba-a195-d38129f9e747.jpg",
          title: "仅仅是一个简单的自定义购物车插件",
          selected: false,
        },
        {
          name: "购物车插件",
          num: 1,
          money: 10,
          src: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-110c136f-036c-47c5-af52-fcf8719fbf54/6d89bb46-efd4-4bba-a195-d38129f9e747.jpg",
          title: "仅仅是一个简单的自定义购物车插件",
          selected: true,
        },
      ],
# 方法
 /**
     * 输入框计算总价以及数量
     */
    bnt_input(index) {
      // 这里设置限制最大
      console.log(index);
      var shopList = this.shopList;
      var num = parseInt(shopList[index].num);
      if (num > 1 && num < 100) {
        this.allPrice();
      } else {
        shopList[index].num = 1;
        this.$mess;
      }
    },
    //总价总数量方法   方便调用   再次多写了一次[可以跟初始化封装为一个方法]
    allPrice: function () {
      var price = 0;
      var numb = 0;
      var shopList = this.shopList;
      for (var i = 0; i < shopList.length; i++) {
        if (shopList[i].selected) {
          price += parseInt(shopList[i].num) * shopList[i].money;
          numb += parseInt(shopList[i].num);
        }
      }
      this.money = price;
      this.num = numb;
    },
    //删除购物车列表
    delerte: function (index) {
      this.shopList.splice(index, 1);
      this.allPrice();
    },
    //选中未选中
    radios: function (index) {
      var shopList = this.shopList;
      shopList[index].selected = !shopList[index].selected;
      this.allPrice();
    },
    //添加
    btn_add: function (index) {
      var shopList = this.shopList;
      var num = parseInt(shopList[index].num);
      num = num + 1;
      shopList[index].num = num;
      this.allPrice();
    },
    //减去
    btn_minute: function (index) {
      var shopList = this.shopList;
      var num = parseInt(shopList[index].num);
      if (num > 1) {
        num = num - 1;
        shopList[index].num = num;
      }
      this.allPrice();
    },
    /**
     * 全选
     */
    Allradios() {
      var that = this;
      // 第一步更改全选状态  true/false
      that.allselected = !that.allselected;
      // 循环遍历购物车数据
      for (var i in this.shopList) {
        // 全选为true时,列表购物车都选中、false时列表购物车都不选中
        if (that.allselected) {
          this.shopList[i].selected = true;
        } else {
          this.shopList[i].selected = false;
        }
      }
      // 刷新一下总价
      this.allPrice();
    },
    /**
     * 提交
     */
    GetSave() {
      var list = [];
      list = this.shopList.filter((item) => {
        if (item.selected) {
          return true;
        }
      });
        console.log("提交",list);
    },