vue2+vant 适配PC端

安装模块
npm i @vant/touch-emulator -S
main.js引入
import '@vant/touch-emulator';

van-swipe-cell 滑动阻止冒泡失效

<van-swipe-cell :stop-propagation="true" @open="open" @close="open">
  <template #left>
    <van-button square type="primary" text="选择" />
  </template>
  <van-cell @click="touchstartFn" :border="false" title="单元格" value="内容" />
  <template #right>
    <van-button square type="danger" text="删除" />
    <van-button square type="primary" text="收藏" />
  </template>
</van-swipe-cell>

// 在data内定义变量
data(){
 return{
    offClick: false
  }
}
methods: {
 // 滑动和关闭同一方法,改变状态阻止列表点击事件
  open(){
    this.offClick = true
  },
 // 列表点击事件
  touchstartFn() {
    if (!this.offClick) {
      // 这里是自己的逻辑
    } else {
      this.offClick = false;
    }
  }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值