Vue使用定时器修改属性，a-modal无法弹出的解决方法

德顺

发布于 2020-01-03 10:11:31

2.8K0

发布于 2020-01-03 10:11:31

文章被收录于专栏：前端资源

今天负责对接口的同事找到我说， setTimeout() 定时器修改 modal 绑定的属性值后，无法正常显示弹窗。

项目使用 Vue 开发，前端 UI 库使用的 Ant Design Vue 的 Modal 组件，长按列表的 item 弹窗提示“删除”确认。但是发现长按可以修改 data 的属性值，但是 Modal 组件不能正常弹出。

下面的他的部分代码：

HTML：

<ul>
  <li v-for="item in result" @touchstart="gotouchstart(item.id)" @touchmove="gotouchmove" @touchend="gotouchend">
    <router-link :to="`/JobDetails?id=`+item.id">
      <span v-text="item.jobName"></span>
      <span>{{item.salary}}</span>
      <p>发布时间{{item.releaseTime}}</p>
    </router-link>
  </li>
</ul>
<a-modal :closable="false"
         centered
         v-model="DeleteSt"
         width="80%"
         >
  <template slot="footer">
    <a-button @click="()=>this.DeleteSt=false" type="link">
      取消
    </a-button>
    <a-button @click="JobDelete" type="link">
      确定
    </a-button>
  </template>
  <h4>提示</h4>
  <h4>确定要删除该职位么？</h4>
</a-modal>

JS：长按删除

data () {
  return {
    result: [{
      "id": 1,
      "jobName": "职位1",
      "salary": "300",
      "releaseTime": "2020-01-02 15:48:01",
    },{
      "id": 2,
      "jobName": "职位2",
      "salary": "400",
      "releaseTime": "2020-01-02 15:48:01",
    },{
      "id": 3,
      "jobName": "职位3",
      "salary": "500",
      "releaseTime": "2020-01-02 15:48:01",
    },],
    timeOutEvent:0,
    DeleteId:'',
    DeleteSt:false,
  }
},
/*长按删除实现*/
gotouchstart(id){
  let that = this;
  clearTimeout(that.timeOutEvent);//清除定时器
  that.timeOutEvent = 0;
  // =============================================================
  that.timeOutEvent = setTimeout(function(){
    //执行长按要执行的内容，
    this.DeleteId = id;
    this.DeleteSt = true;
  },1000);//这里设置定时
},
//手释放，如果在2000毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
gotouchend(){
  clearTimeout(this.timeOutEvent);
  if( this.timeOutEvent!=0){
    //这里写要执行的内容（尤如onclick事件）
  }
},
//如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
gotouchmove(){
  clearTimeout(this.timeOutEvent);//清除定时器
  this.timeOutEvent = 0;
},

CSS 我就不贴了。

在 gotouchstart() 方法内，let 了一个 that ，设置了一个定时器，2秒后执行修改 DeleteSt 属性的值，当值为 true 时，弹窗会弹出，但是不管怎么按，都不显示弹窗。

gotouchstart(id){
  let that = this;
  clearTimeout(that.timeOutEvent);//清除定时器
  that.timeOutEvent = 0;
  that.timeOutEvent = setTimeout(function(){
    //执行长按要执行的内容，
    that.DeleteId = id;
    that.DeleteSt = true;
  },1000);//这里设置定时
},

修改了一下，将定时器内的 this 改为 that 就能正常弹出了。

声明：本文由w3h5原创，转载请注明出处：《Vue使用定时器修改属性，a-modal无法弹出的解决方法》 https://cloud.tencent.com/developer/article/1563824

本文已加入腾讯云自媒体分享计划 (点击加入)

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js