VUE移动商城开发过程笔记

前言

本人前端小白一枚，以下问题及解决方法是本人应用vue2+vant组件库制作一个移动商城时所遇到的问题，通过论坛及朋友帮助找到解决方法（以标注提供解决思路的论坛或文档）。特意记录，以便之后开发快速提供思路、也希望可以帮助像我这样自己自学摸索的童鞋们😊，在前端大佬们看来内容有些幼稚。但却是我现在真正的程度。不喜请勿喷，谢谢！！！😊😊😊

正文

1.购物车中步进器，设置输入内容必须为正整数

在input标签中添加

@input="item.number = Number($event.target.value.replace(/\D+/,''))"
<input type="text" class="text" @input="item.number = Number($event.target.value.replace(/\D+/,''))" v-model="item.number" >

相关链接

https://download.youkuaiyun.com/download/weixin_38601390/13126577

2.步进器中设置限制，例：当input中值小于零时，减少键禁用

<button class="sub" @click="handleSub(index)" :disabled="disabled">-</button>
data() {
    return {
      // checked:true,
      //  value: 1,
      disabled:false,
      }
      },
      methods:{
      handleSub(index){

      if(this.list[index].number <= 0){
       this.list[index].disabled = true
      }else{
      return this.list[index].number--; 
        
      }
    },
      }

3,对数组处理的常用函数

例：购物车板块中实现全选使用every(),用于检测数组所有元素是否都符合指定条件（通过函数提供）
如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。
（some（）检测数组有一个满足条件就返回true）

 //template部分
  <van-checkbox v-model="isAllSelected" class="check" checked-color="#ff9e4f">
        全选
      </van-checkbox>
      //script部分
  computed:{
    //isAllSelected判断全选按钮是否选中，isSelected判断数组中的各项是否选中，其属性值均为boolean值
    isAllSelected:{
      get(){
        if(this.list.length == 0){
          return false
        }else{
        return this.list.every(ele => ele.isSelected)

        }
      },
      set(val){
        this.list.forEach(ele =>{
          ele.isSelected = val
        })
      }
    },
    }

4.购物车中结算计算，使用reduce(),接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

> 详细说明

        <span class="price"><i>￥</i>{{totals}} </span>

 computed:{
 //返回的total，商品的结算价格
 totals(){
      return this.list.reduce((total,current) =>{
        if(current.isSelected){
          return total + current.number * current.price
        }else{
          return total
        }
      },0)
    },
 }

5.商品右滑删除及多选删除

//template部分
      <van-swipe-cell>
           列表内容
        <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click=" deleteItem(index)" />
        </template>
       </van-swipe-cell>
  // 右滑删除
    deleteItem(id){
       Dialog.confirm({
        title: '确认删除?',
        theme: 'round-button',
     })
    .then(()=>{
      this.list.splice(id,1)
      // Toast.success('删除成功')
      Toast.success('删除成功')
    })
    .catch(() => {
    // on cancel
      Toast.fail('删除失败')
      // Toast('删除失败')
    });
      
      
    },
     

<van-button  class="delete" round size="small" color="#ff9e4f" @click="deleteAll"  v-if="isDelete">删除</van-button>
    // 多选删除
    deleteAll(){
     Dialog.confirm({
     title: '确认删除?',
     theme: 'round-button',
  })
  .then(() => {
    // on confirm
    let newArray = this.list.filter(item=>{
        return item.isSelected == false
      })
      this.list = newArray
      // Toast('删除成功');
      Toast.success('删除成功')
  })
   .catch(() => {
    // on cancel
    Toast.fail('删除失败')
    // Toast('删除失败');
  });
      
    
      },

    

若需要修改没有提供属性的样式，可以浏览器控制台中寻找对应的类名，并在全局样式中进行样式修改（加!important）