Vue中的移動(dòng)端事件插件vue-touch詳解
更新時(shí)間：2026年02月13日 09:06:47 作者：yuanliy
文章介紹了vue-touch庫(kù),它提供了單擊、雙擊、長(zhǎng)按、縮放等手勢(shì)事件,通過(guò)npm安裝后,開(kāi)發(fā)者可以在Vue項(xiàng)目中使用這些手勢(shì)事件,文章還分享了使用vue-touch的基本方法,并鼓勵(lì)讀者參考和支持腳本之家
Vue移動(dòng)端事件插件vue-touch
vue-touch包括單擊、雙擊、長(zhǎng)按、縮放等手勢(shì)事件
npm安裝
npm install vue-touch@next --save
//main.js中引入：
import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})
用法如下：
//html代碼
<template>
<v-touch v-on:swipeleft="swiperleft" v-on:swiperight="swiperright" class="wrapper">
<div class="menu-container" ref="menuContainer">
<!-- 這個(gè)是內(nèi)容 -->
</div>
</v-touch>
</template>
- js：
export default {
name: 'Queue',
data () {
return {
}
},
methods: {
swiperleft: function () {
console.log("左劃")
},
swiperright: function () {
console.log("右滑")
}
}
}
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue-element-admin?導(dǎo)出json和導(dǎo)入json文件的方法
這篇文章主要介紹了Vue-element-admin導(dǎo)出json和導(dǎo)入json文件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
Vue實(shí)戰(zhàn)之項(xiàng)目開(kāi)發(fā)時(shí)常見(jiàn)的幾個(gè)錯(cuò)誤匯總
vue作為前端主流的3大框架之一,目前在國(guó)內(nèi)有著非常廣泛的應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)戰(zhàn)之項(xiàng)目開(kāi)發(fā)時(shí)常見(jiàn)的幾個(gè)錯(cuò)誤匯總的相關(guān)資料,對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-03-03
vue watch監(jiān)控對(duì)象的簡(jiǎn)單方法示例
這篇文章主要給大家介紹了關(guān)于vue watch監(jiān)控對(duì)象的簡(jiǎn)單方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
路由是可以傳遞參數(shù)的，一般使用query進(jìn)行傳參，有兩種方式，本溫酒通過(guò)代碼示例給大家介紹這兩種傳遞方式，感興趣的小伙伴可以參考閱讀2023-06-06
讓 babel webpack vue 配置文件支持智能提示的方法
這篇文章主要介紹了讓 babel webpack vue 配置文件支持智能提示的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
淺談vue單一組件下動(dòng)態(tài)修改數(shù)據(jù)時(shí)的全部重渲染
下面小編就為大家分享一篇淺談vue單一組件下動(dòng)態(tài)修改數(shù)據(jù)時(shí)的全部重渲染，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
組件(Component)是 Vue.js 最強(qiáng)大的功能之一。 組件可以擴(kuò)展 HTML 元素,封裝可重用的代碼。下面這篇文章主要給大家介紹了關(guān)于Vue.js組件間循環(huán)引用的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2017-12-12
這篇文章主要介紹了vue-router的使用方法及含參數(shù)的配置方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
在vue中嵌入外部網(wǎng)站的實(shí)現(xiàn)
這篇文章主要介紹了在vue中嵌入外部網(wǎng)站的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue的transition-group與Virtual Dom Diff算法的使用
這篇文章主要介紹了Vue的transition-group與Virtual Dom Diff算法的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12