w3h5

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

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

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

Vue modal.png Vue使用定时器修改属性,a-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://www.w3h5.com/post/464.html

赞 (0)
分享到: +More |

评论 沙发

换个身份