今天负责对接口的同事找到我说, setTimeout()
定时器修改 modal 绑定的属性值后,无法正常显示弹窗。
项目使用 Vue 开发,前端 UI 库使用的 Ant Design Vue 的 Modal 组件,长按列表的 item 弹窗提示“删除”确认。但是发现长按可以修改 data 的属性值,但是 Modal 组件不能正常弹出。
![Vue modal.png Vue使用定时器修改属性,a-modal无法弹出的解决方法 经验总结](https://www.w3h5.com/zb_users/upload/2020/01/202001021577966790196725.png)
下面的他的部分代码:
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
就能正常弹出了。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。