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