<template>
? <div>
? ? <div class="test" @touchstart="gtouchstart()" @touchmove="gtouchmove()" @touchend="gtouchend()">試一試呀!</div>
? </div>
</template>

<script>
export default {
? data () {
? ? return {? ? ? ??
? ? }
? },
? ? methods:{
? ? ? ? gtouchstart(){
? ? ? ? ? ? window.console.log('1，按下啦啦啦啦啦')
? ? ? ? },
? ? ? ? gtouchmove(){
? ? ? ? ? ? window.console.log('2，按下并且在移動(dòng)呢')
? ? ? ? },
? ? ? ? gtouchend(){
? ? ? ? ? ? window.console.log('3，松開啦啦啦啦啦')
? ? ? ? }
? ? }
}
</script>

<style scoped>
? ? .test{
? ? ? ? width: 100%;
? ? ? ? height: 50px;;
? ? ? ? text-align: center;
? ? ? ? background-color: red;
? ? ? ? line-height: 50px;
? ? ? ? font-size: 50px;
? ? }?
</style>

看結(jié)果：

鼠標(biāo)在紅色區(qū)域內(nèi)按下會(huì)輸出1，

按下鼠標(biāo)不松開然后移動(dòng)會(huì)輸出2，

松開后就會(huì)輸出3，

根據(jù)自己的情況在三個(gè)函數(shù)里寫入相應(yīng)的功能。

解決touchstart touchend事件無效失效

?? ?<van-button
? ? ? ? ? :disabled="isLoading"
? ? ? ? ? plain
? ? ? ? ? type="info"
? ? ? ? ? @touchstart.native.prevent="touchstart"
? ? ? ? ? @touchend.native.prevent="touchend"
? ? ? ? ? style="width:40%;height: 40px;"
? ? ? ? ? round>對(duì)比原圖
? ? ? ? </van-button>

@touchstart.native.prevent=“touchstart”
@touchend.native.prevent=“touchend”

增加 .native.prevent

? ? touchstart() {
? ? ? console.log('touchstart')
? ? },
? ? touchend() {
? ? ? console.log('touchend')
? ? },

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue中后端做Excel導(dǎo)出功能返回?cái)?shù)據(jù)流前端的處理操作
這篇文章主要介紹了vue中后端做Excel導(dǎo)出功能返回?cái)?shù)據(jù)流前端的處理操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
Vue之關(guān)于Eslint自動(dòng)加分號(hào)的問題及解決
這篇文章主要介紹了Vue之關(guān)于Eslint自動(dòng)加分號(hào)的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
基于vue3+antDesign2+echarts?實(shí)現(xiàn)雷達(dá)圖效果
這篇文章主要介紹了基于vue3+antDesign2+echarts?實(shí)現(xiàn)雷達(dá)圖,本文通過實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-08-08
vue如何修改瀏覽器的標(biāo)題title
這篇文章主要介紹了vue如何修改瀏覽器的標(biāo)題title問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
詳解Vue開發(fā)微信H5微信分享簽名失敗問題解決方案
這篇文章主要介紹了詳解Vue開發(fā)微信H5微信分享簽名失敗問題解決方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-08-08
基于 Vue.js 2.0 酷炫自適應(yīng)背景視頻登錄頁(yè)面實(shí)現(xiàn)方式
本文講述如何實(shí)現(xiàn)擁有酷炫背景視頻的登錄頁(yè)面，瀏覽器窗口隨意拉伸，背景視頻及前景登錄組件均能完美適配，背景視頻可始終鋪滿窗口，前景組件始終居中，視頻的內(nèi)容始終得到最大限度的保留，可以得到最好的視覺效果
2018-01-01
vue項(xiàng)目引入ts步驟(小結(jié))
這篇文章主要介紹了vue項(xiàng)目引入ts步驟(小結(jié)),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
基于Vue設(shè)計(jì)實(shí)現(xiàn)一個(gè)彈幕組件
這篇文章主要給大家分享一個(gè)開發(fā)中常見的需求，接下來將為大家詳細(xì)介紹彈幕的實(shí)現(xiàn)以及設(shè)計(jì)思路一步一步描述出來，希望大家能夠喜歡
2023-06-06
Vue中使用和移除總線Bus的注意事項(xiàng)詳解
Vue中的總線Bus是一種通信機(jī)制，可用于組件間的數(shù)據(jù)傳遞和事件觸發(fā)。使用時(shí)需要注意Bus的命名和定義、監(jiān)聽和觸發(fā)事件的方法、移除和銷毀Bus的時(shí)機(jī)和方式等問題。合理使用總線Bus可以提高組件的復(fù)用性和可維護(hù)性，但過度依賴可能會(huì)導(dǎo)致代碼耦合和難以維護(hù)
2023-04-04
淺談vue的iview列表table render函數(shù)設(shè)置DOM屬性值的方法
下面小編就為大家?guī)硪黄獪\談vue的iview列表table render函數(shù)設(shè)置DOM屬性值的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09