vue長按事件touch示例詳解
1.touch事件
以下是四種touch事件
touchstart: //手指放到屏幕上時(shí)觸發(fā)
touchmove: //手指在屏幕上滑動(dòng)式觸發(fā)
touchend: //手指離開屏幕時(shí)觸發(fā)
touchcancel: //系統(tǒng)取消touch事件的時(shí)候觸發(fā),這個(gè)好像比較少用
2.長按彈出刪除按鈕,點(diǎn)擊刪除
<div v-for="item in list" @touchstart.native="showDeleteButton(item.id)" @touchend.native="clearLoop(item.id)"> 內(nèi)容... </div>
showDeleteButton(e) { clearTimeout(this.Loop); //再次清空定時(shí)器,防止重復(fù)注冊定時(shí)器 this.Loop = setTimeout(function() { this.$dialog.confirm({ //這是個(gè)彈出框,用的ydui title: '溫馨提示', mes: '是否刪除此條消息', opts: () => { this.$dialog.loading.open('刪除中...'); this.$http.post(this.$store.state.ip + '...', { id: e }, { headers: {}, }).then((response) => { this.$dialog.loading.close(); this.$dialog.toast({ mes: response.body.info, timeout: 1000 }); var data = this.rulist console.log(data) for(var i in data) { if(data[i].id == e) { data.splice(i, 1) } } console.log(data) this.rulist=data }).catch(function(response) { }); } }); }.bind(this), 1000); }, clearLoop(e) { clearTimeout(this.Loop); },
補(bǔ)充:下面看下Vue長按觸摸事件
開始觸摸:
@touchstart="touchClose()"
觸摸結(jié)束:
@touchend="touchOpen()"
使用示例:
到此這篇關(guān)于vue長按事件touch的文章就介紹到這了,更多相關(guān)vue長按事件touch內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue-cli-service?build?自定義參數(shù)方式
這篇文章主要介紹了vue-cli-service?build?自定義參數(shù)方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue.js仿hover效果的實(shí)現(xiàn)方法示例
這篇文章主要介紹了vue.js仿hover效果的實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了vue.js事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01element的el-upload組件上傳文件跨域問題的幾種解決
跨域問題網(wǎng)上搜索很多,感覺情況都不一樣,本文主要介紹了element的el-upload組件上傳文件跨域問題的幾種解決,具有一定的參考價(jià)值,感興趣的可以了解一下2024-03-03el-table?fixed固定列導(dǎo)致錯(cuò)位的解決方法介紹
ElementUI中el-table設(shè)置指定列固定不動(dòng),不受滾動(dòng)條影響,下面這篇文章主要給大家介紹了關(guān)于el-table?fixed固定列導(dǎo)致錯(cuò)位的解決方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11vue解決this.$refs.xx在mounted中獲取DOM元素為undefined問題
這篇文章主要介紹了vue解決this.$refs.xx在mounted中獲取DOM元素為undefined問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03利用Vue3 (一)創(chuàng)建Vue CLI 項(xiàng)目
這篇文章主要介紹利用Vue3 創(chuàng)建Vue CLI 項(xiàng)目,下面文章內(nèi)容附有官方文檔鏈接,安裝過程,需要的可以參考一下2021-10-10Vue使用Echarts實(shí)現(xiàn)橫向柱狀圖,并通過WebSocket即時(shí)通訊更新
這篇文章主要介紹了Vue使用Echarts實(shí)現(xiàn)橫向柱狀圖,并通過WebSocket即時(shí)通訊更新方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03vue項(xiàng)目實(shí)現(xiàn)記住密碼到cookie功能示例(附源碼)
本篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)記住密碼到cookie功能示例(附源碼),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01vue實(shí)現(xiàn)自定義表格工具擴(kuò)展
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)自定義表格工具擴(kuò)展,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04