VUE: 移动端长按弹出确认删除地址

时间：2022-07-19 17:56:59

　　收货地址的删除方式可能有很多种，我目前见过的暂时只有两种（1、在编辑页删除  2、长按某一条收货地址弹出是否删除地址）

在开发的项目上要求第二种删除方法，于是记录一下我写的代码 ~

　　1.首先，在移动端，手指点击一个元素，会经过：touchstart --> touchmove --> touchend -->click。

在temlate里面写长按事件（@touchstart.prevent：触摸开始 touchend.prevent：触摸结束，手指离开时）

<ul>
    <li v-for="(item,idx) in addressList" :key="idx"  @touchstart.prevent="touchin(item)"  @touchend.prevent="cleartime(item)">
      <div>
        <p class="name">{{item.nickname}} <span>{{item.tel}}</span> </p>
        <div class="addrInfo">
            <span class="span">{{item.areaId}}</span><span>{{item.address}}</span>
        </div>
      <p class="edit" @click="add(item)">编辑</p>
    </li>
</ul>

　　2.data里面的数据（为了方便给大家展示，写的是死数据）

data () {
      return {
        addressList: [
            {nickname：‘齐一‘,  tel：15065124120, areaId: ‘某某省某某市某某区‘, address: ‘123路几座几号楼502‘}，
            {nickname：‘齐一‘,  tel：15065124120, areaId: ‘某某省某某市某某区‘, address: ‘123路几座几号楼502‘}
        ]
    }
}

　　3.1用js写方法（我这里引入了一个mint-ui的确认是否删除的弹窗  import { MessageBox } from ‘mint-ui‘）

methods: {
      /*
      * 长按显示删除地址
      */
      touchin (item) {
        console.log(item)
        // 再次清空定时器，防止重复注册定时器
        clearInterval(this.loop)
        this.Loop = setTimeout(function () {
          MessageBox.confirm(‘确认删除吗？‘).then(res => {
                this.addressList.splice(item, 1)
          }).catch(() => {
          })
        }.bind(this), 1000)
      },
      /*
      *  将每次手指移出之后将计时器清零
      */
      cleartime (idx) {
        clearInterval(this.Loop)
      }
    }

 

　　3.2.这是我接好后台接口时候的数据，方便我自己看，你们看上面那个然后自己套数据就好了（当然不套自己项目的数据也是能实现功能的~）

methods: {/*
      * 长按显示删除地址
      */
      touchin (item) {
        console.log(item)
        // 再次清空定时器，防止重复注册定时器
        clearInterval(this.loop)
        this.Loop = setTimeout(function () {
          MessageBox.confirm(‘确认删除吗？‘).then(res => {
            let _formData = {
              cusmallToken: getStore(‘cusmallToken‘),
              addressId: item.id
            }
            commonDkApiFun(_formData, ‘/ttmb/api/member/delAddress‘).then(res => {
              if (res.data.ret === 0) {
                this.addressList.splice(item, 1)
              }
            }).catch(err => {
              console.log(err)
            })
          }).catch(() => {
          })
        }.bind(this), 1000)
      },
      /*
      *  将每次手指移出之后将计时器清零
      */
      cleartime (idx) {
        clearInterval(this.Loop)
      }
    }

 

相关文章