山姆极客
山姆极客

vue2.x plugin vue2-touch

今天小编想和大家分享一下Vue2.x的手势插件--简单来说就是Hammerjs的vue2.x plugin的封装。

前段时间，因项目需求为了更好地满足客户的体验需求需要加入手势事件，小编果断上npm官网搜了一下


vue2.x plugin vue2-touch_第1张图片

vue-touch，哎哟，不错呀，已经有大神封装好了，内心非常激动，但是万万没想到当小编点击进入一看，内心彻底崩溃啦


vue2.x plugin vue2-touch_第2张图片

Vue现在这么火，居然没兼容到2.x，这绝对不科学啊，后来小编又搜了后几个类似vue-touch现有的插件，都没有达到小编想要的效果，无奈！在项目进度的催促下，一拍脑门，自己写一个吧。

说干就干，小编先是学习了Hammerjs


vue2.x plugin vue2-touch_第3张图片

接着学习了vue2.x最新的plugin,directive的写法


vue2.x plugin vue2-touch_第4张图片

最后经过小编的不懈努力，终于 vue2-touch诞生了


vue2.x plugin vue2-touch_第5张图片

但是美中不足的目前版本仅支持es6的模块导入，希望热心的大神们可以一起完善其他模块的或版本的开发，谢谢大家~


NOTE: 开源地址[https://github.com/lenvonsam/vue2-touch]

你可能感兴趣的:(vue2.x plugin vue2-touch)

  • sublime个人设置 bawangtianzun sublimetext编辑器
    如何拥有jiangly蒋老师同款编译器(sublimec++配置竞赛向）_哔哩哔哩_bilibiliSublimeText4的安装教程（新手竞赛向）-知乎(zhihu.com)创建文件自动保存为c++打开SublimeText软件。转到"Tools"（工具）>"Developer"（开发者）>"NewPlugin"（新建插件）。在打开的新文件中，粘贴以下代码：importsublimeimport
  • maven-assembly-plugin 打包实例 带着二娃去遛弯
    1.先在pom.xml文件中添加assembly打包插件org.apache.maven.pluginsmaven-assembly-plugin2.6assembly/assembly.xmlmake-assemblypackagesingle说明:1.需要修改的可能就是descriptors标签下面的打包配置文件目录,指定assembly.xml的路径.2.可以添加多个打包配置文件,进行多种形
  • webstorm报错TypeError: this.cliEngine is not a constructor Blue_Color
    点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:
  • 推荐开源项目：Zotero引用计数管理器——学术研究的智能助手 蔡鸿烈Hope
    推荐开源项目：Zotero引用计数管理器——学术研究的智能助手zotero-citationcountsZoteropluginforauto-fetchingcitationcountsfromvarioussources项目地址:https://gitcode.com/gh_mirrors/zo/zotero-citationcounts项目介绍在学术界，每篇论文背后都承载着学者们辛勤的研究成
  • Zotero引文计数插件使用教程 齐飞锴Timothea
    Zotero引文计数插件使用教程zotero-citationcountsZoteropluginforauto-fetchingcitationcountsfromvarioussources项目地址:https://gitcode.com/gh_mirrors/zo/zotero-citationcounts项目介绍Zotero引文计数插件是由非盈利组织DigitalScholarshipCo
  • webpack 之 tapable 学习 weixin_34008784 webpackjavascriptViewUI
    前言webpack大家应该都耳熟能详了。个人感觉，webpack的本质就是让一堆的Loader和Plugin在webpack的可支配范围内，有序可控的执行，最终生成一堆可在浏览器中执行的code和一些状态信息。而这些Loader和Plugin，有用户自定义的，也有webpack自己内部定义的。Loader的运行机制，不是这篇文章讲述的内容，有需要的朋友，可以看下我之前的这篇文章：webpack之l
  • webapck由浅入深——（Tapable） weixin_33737134 webpackViewUI
    webpack系列文章webpack由浅入深——（webpack基础配置）webpack由浅入深——（webpack优化配置）webpack由浅入深——（tapable）webpack由浅入深——（webapck简易版）webpack由浅入深——（ast、loader和plugin）Tapable和webpackTapable是基于发布订阅模式实现的一个类库，提供了许多Hook类，可创建许多钩子。
  • Webpack插件核心原理 gogo2027 webpack
    引言围绕Webpack打包流程中最核心的机制就是所谓的Plugin机制。所谓插件即是webpack生态中最关键的部分，它为社区用户提供了一种强有力的方式来直接触及webpack的编译过程(compilationprocess)。今天，我们来聊聊Webpack中必不可少的核心Plugin机制～Plugin本质上在Webpack编译阶段会为各个编译对象初始化不同的Hook，开发者可以在自己编写的Plu
  • 深入学习-Gradle-自动化构建技术（五）Gradle-插件架构实现原理剖析- 2401_84002294 2024年程序员学习学习自动化架构
    6、AndroidGradlePluginV3.0.0（2017年10月）7、AndroidGradlePluginV2.3.0（2017年2月）三、Gradle构建核心流程解析1、LoadSettings2、Configure3、TaskGraph4、RunTasks5、Finished四、关于Gradle中依赖实现的原理1、通过MethodMissing机制，间接地调用DefaultDepen
  • 【idea实用系列7】Gradle构建项目中IDEA插件 BigDataMLApplication gradleideaintellij-ideajavaide
    【idea实用系列7】Gradle构建项目中IDEA插件文章目录【idea实用系列7】Gradle构建项目中IDEA插件使用任务配置自定义生成的文件合并禁用合并并进行完全覆盖钩入生成生命周期部分重写现有内容修改完全填充的领域对象修改XML表示形式识别附加的测试目录其他事项参考链接使用要使用IDEA插件，请在构建脚本中包含以下内容：plugins{id'idea'}IDEA插件会为项目添加一些任务。
  • 【Gradle】（一）在IDEA中初始化gradle项目及其核心概念解释 挥之以墨 #GradleDevOpsjavagradle
    这里写目录标题1.前言2.项目初始化及核心概念2.1.在IDEA中创建gradle项目2.2.gradle-wrapper2.2.1.gradle-wrapper的作用2.2.2.gradle-wrapper的初始化与配置2.3.setting.gradle2.4.build.gradle2.4.1.plugins2.4.2.版本定义2.4.3.仓库配置2.4.4.依赖管理3.总结1.前言本系列主
  • uniapp 获取当前位置和地理信息（微信小程序和APP） 火星代码 uni-app微信小程序小程序
    一、在微信小程序中获取位置信息1、首先引入amap-wx.130.js文件，在项目中可以新建文件夹common，在下面引入该js文件2、在使用的页面引入该js，importamapfrom'@/common/amap-wx.130.js'exportdefault{data(){return{amapPlugin:null}}}3、获取定位信息（注意先需要申请高德地图的key）申请方式如下连接vu
  • 【Webpack 踩坑】CSS加载缓慢 ①条咸鱼 webpackcssrust
    问题：使用webpack5，单独index.scss在assets/css目录下，但是不管是production还是development环境下，都会出现dom加载完后再渲染样式本意是想要将样式单独打包到一个文件夹，还有压缩css于是用了mini-css-extract-plugin这个loader（前提要先安装）//webpack.config.jsconstMiniCssExtractPlug
  • Installed Hexagon SDK, but cannot find the IDE PandaYoung(Niko) 软件开发环境配置ide
    问题场景：安装HexagonSDK时，确认勾选了eclipse选项，但最终SDK目录中仅有ide_plugins文件夹，没有eclipse程序。原因分析：可能是下载服务器问题导致的，偶尔包含完整的，大多数情况下仅包含ide_plugins。（嗯。。。我卸载了不下5次，不同版本也尝试了，还试过重装系统）解决方案：参考文档“C:/Qualcomm/Hexagon_SDK/docs/tools/setu
  • Webpack 概念速通：从入门到掌握构建工具的精髓 tabzzz 前端webpack前端
    Webpack基本概念这里我们先简单熟悉下Webpack的基本概念，我们在搭建项目的时候都会要用到的！这里我们分享的着重点是基本概念而不是具体配置项和使用方法依赖图(dependencygraph)模式(mode)入口(entry)输出(output)加载器(loader)插件(plugin)源映射(SourceMaps)开发服务器(devServer)依赖图（dependencygraph）依赖
  • webpack 配置 weixin_44101835 webpack前端node.js
    webpack.base.jsconstpath=require('path');constHtmlWebpackPlugin=require('html-webpack-plugin');constMiniCssExtractPlugin=require('mini-css-extract-plugin');modules.export=function(isDev){return{//入口文件
  • Webpack五大核心概念 前路茫茫——何处无香 webpackwebpack
    一、Entry入口（Entry）指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。二、Output输出（Output）指示Webpack打包后的资源bundles输出到那里去，以及如何命名。三、LoaderLoader让Webpack能够取处理那些非JavaScript文件（Webpack自身子理解JavaScript）四、Plugins插件（Plugins）可以用于执行范围更广
  • webpack - 五大核心概念和基本配置（打包一个简单HTML页面） 怕冷的火焰（~杰） nodejs和webpackwebpacknode.js
    //五大核心概念1.entry（入口）指示Webpack从哪个文件开始打包2.output（输出）指示Webpack打包完的文件输出到哪里去，如何命名等3.loader（加载器）webpack本身只能处理js，json等资源，其他资源如图片需要借助loader，webpack才能解析4.plugin（插件）扩展Webpack的功能5.mode（模式）主要有两种模式：开发模式（development
  • vue中给打包的文件指定自定义文件名以及加上哈希值解决每次打包上线存在缓存问题 miao_zz vuevue
    vue中给打包的文件指定自定义文件名以及加上哈希值解决每次打包上线存在缓存问题vue.config.jsvue.config.jsconstport=process.env.port||8081//端口constTimestamp=newDate().getTime();constMiniCssExtractPlugin=require("mini-css-extract-plugin")modu
  • UmiJS3基础 若梦plus React.jsreact.jsjavascript前端reactjsreact
    UmiJS3基础https://umijs.org/UmiJSUmiJS是一个类Next.JS的react开发框架。他基于一个约定，即pages目录下的文件即路由，而文件则导出react组件然后打通从源码到产物的每个阶段，并配以完善的插件体系，让我们能把umi的产物部署到各种场景里。安装umi源码create-umiumi-plugin-react文档umi-plugin-react源码umi-p
  • react-native mac 开发环境搭建Android SDK版本N/A问题，已解决 aaaaanqi reactnative
    react-nativemac开发环境搭建AndroidSDK版本N/A问题，已解决使用npxreact-nativedoctor校验开发环境，AndroidSDK报错但是开发环境配置和文档描述得没有什么差别，怀疑是bug，git仓库下的issue有提类似问题，直接使用npmrunandroid运行，报以下错>Failedtoapplyplugin'com.android.internal.app
  • Docker启动Elasticsearch(挂载数据、配置文件、插件) 程序员迪迦 项目实战Javaelasticsearchdocker
    Docker启动Elasticsearch拉取镜像dockerpullelasticsearch:7.4.2修改配置文件mkdir-p/mydata/elasticsearch/configmkdir-p/mydata/elasticsearch/data/mkdir-p/mydata/elasticsearch/pluginsecho"http.host:0.0.0.0">>/mydata/el
  • android studio程序打不开,Android Studio project 文件打不开问题解决 成长中的Elva老师 androidstudio程序打不开
    现象：Android项目的所有文件都打不开，搜了一圈，和此篇原因可能类似：解决：打开工程，Androidstudio右下角出现error提示：com.intellij.diagnostic.PluginException:TryingtooverridealreadyregisteredfiletypeMakefile[Plugin:name.kropp.intellij.makefile]atc
  • jquery打包到webpack项目 不cong明的亚子 前端webpackjqueryjavascript
    入口文件—index.jswindow.$=require('jquery')webpack.config.jsconstwebpack=require('webpack')module.exports={...plugins:[...newwebpack.ProvidePlugin({$:'jquery',jQuery:'jquery'})...]...}
  • idea2023版使用Free MyBatis plugin插件报错 涛哥是个大帅比 问题mybatisjavaidea
    项目场景：新版的idea使用FreeMyBatisplugin插件报错问题描述错误信息java.lang.Throwable:'#LineMarkerInfo(T,TextRange,Icon,int,Function,GutterIconNavigationHandler,Alignment)'isdeprecatedandgoingtoberemovedsoon.Pleaseuse`LineM
  • 使用yum 安装是出现 ： Loaded plugins: fastestmirror get200 linux
    [[email protected]]#yum–yinstallhttpdhttpd-develLoadedplugins:fastestmirror解决办法：1.修改插件配置文件[[email protected]]#vim/etc/yum/pluginconf.d/fastestmirror.conf[main]enabled=0//由1改成0，禁用该插件ver
  • Vision Pro的增强视觉：企业级Unity插件包实现主摄像头访问 花生糖@ 苹果眼镜（VisionapplevisionproAIunity
    在AR和VR技术的快速发展中，Unity作为跨平台游戏和应用开发的首选引擎，其插件生态的丰富性一直是开发者们关注的焦点。最近，一个专为VisionPro设计的Unity插件包——EnterpriseCameraAccessPlugin，因其能够通过企业API访问主摄像头的功能，引起了广泛关注。一、插件背景与需求VisionPro是一款面向企业级市场的AR设备，它通过企业API提供了对设备功能的高级
  • idea2024.2版本RESTFul-Tool插件无法使用 小玉起起 ideaidea插件
    1.idea版本更新到2024.2版本之后安装RESTFul-Tool插件无法使用2.下面是参考网友的解决办法操作了一把把2024.5.12.819的zip下载下来，解压zip，修改instrumented-RestfulTool2-2024.5.12.819.jar中plugin.xml对应idea-version属性（去掉until-build）然后再重新打成zip包导入idea就可以了，但是
  • Pinia持久化插件：pinia-plugin-persistedstate 正小安 vue杂谈vue.js前端
    Pinia持久化插件pinia-plugin-persistedstate是一个Pinia插件，用于持久化Piniastore的状态到本地存储（如localStorage或sessionStorage）。以下是关于pinia-plugin-persistedstate的使用及配置的详细说明：使用步骤安装插件使用以下命令安装pinia-plugin-persistedstate：pnpmaddpin
  • linux多个sh 同时执行命令,sh, 批量执行Linux命令 一颗橙子君 linux多个sh同时执行命令
    step1:创建一个sh批处理命令文件#vim/etc/batch_ssh/install_redis.shstep2：给当前用户，能够执行sh脚本权限#chmodinstall_redis.sh777step3:编写要批量执行的命令，read表示等待前端用户输入，sleep表示等待时间单位为秒。echo'\nbegintoinstall01plugin\n';yuminstallcpp-y;ec
  • java杨辉三角 3213213333332132 java基础
    package com.algorithm; /** * @Description 杨辉三角 * @author FuJianyong * 2015-1-22上午10:10:59 */ public class YangHui { public static void main(String[] args) { //初始化二维数组长度 int[][] y
  • 《大话重构》之大布局的辛酸历史 白糖_ 重构
    《大话重构》中提到“大布局你伤不起”，如果企图重构一个陈旧的大型系统是有非常大的风险，重构不是想象中那么简单。我目前所在公司正好对产品做了一次“大布局重构”，下面我就分享这个“大布局”项目经验给大家。   背景         公司专注于企业级管理产品软件，企业有大中小之分，在2000年初公司用JSP/Servlet开发了一套针对中
  • 电驴链接在线视频播放源码 dubinwei 源码电驴播放器视频ed2k
    本项目是个搜索电驴（ed2k）链接的应用,借助于磁力视频播放器（官网： http://loveandroid.duapp.com/ 开放平台），可以实现在线播放视频，也可以用迅雷或者其他下载工具下载。 项目源码： http://git.oschina.net/svo/Emule,动态更新。也可从附件中下载。 项目源码依赖于两个库项目，库项目一链接： http://git.oschina.
  • Javascript中函数的toString()方法 周凡杨 JavaScriptjstoStringfunctionobject
    简述     The toString() method returns a string representing the source code of the function.     简译之，Javascript的toString()方法返回一个代表函数源代码的字符串。 句法     function.
  • struts处理自定义异常 g21121 struts
    很多时候我们会用到自定义异常来表示特定的错误情况，自定义异常比较简单，只要分清是运行时异常还是非运行时异常即可，运行时异常不需要捕获，继承自RuntimeException，是由容器自己抛出，例如空指针异常。 非运行时异常继承自Exception，在抛出后需要捕获，例如文件未找到异常。 此处我们用的是非运行时异常，首先定义一个异常LoginException: /** * 类描述：登录相
  • Linux中find常见用法示例 510888780 linux
    Linux中find常见用法示例 ·find   path   -option   [   -print ]   [ -exec   -ok   command ]   {} \; find命令的参数；
  • SpringMVC的各种参数绑定方式 Harry642 springMVC绑定表单
    1. 基本数据类型(以int为例，其他类似)： Controller代码： @RequestMapping("saysth.do") public void test(int count) { } 表单代码： <form action="saysth.do" method="post&q
  • Java 获取Oracle ROWID aijuans javaoracle
    A ROWID is an identification tag unique for each row of an Oracle Database table. The ROWID can be thought of as a virtual column, containing the ID for each row. The oracle.sql.ROWID class i
  • java获取方法的参数名 antlove javajdkparametermethodreflect
    reflect.ClassInformationUtil.java package reflect; import javassist.ClassPool; import javassist.CtClass; import javassist.CtMethod; import javassist.Modifier; import javassist.bytecode.CodeAtt
  • JAVA正则表达式匹配 查找 替换 提取操作 百合不是茶 java正则表达式替换提取查找
    正则表达式的查找;主要是用到String类中的split();       String str;      str.split();方法中传入按照什么规则截取,返回一个String数组   常见的截取规则: str.split("\\.")按照.来截取 str.
  • Java中equals()与hashCode()方法详解 bijian1013 javasetequals()hashCode()
    一.equals()方法详解     equals()方法在object类中定义如下：  public boolean equals(Object obj) { return (this == obj); }    很明显是对两个对象的地址值进行的比较（即比较引用是否相同）。但是我们知道，String 、Math、I
  • 精通Oracle10编程SQL(4)使用SQL语句 bijian1013 oracle数据库plsql
    --工资级别表 create table SALGRADE ( GRADE NUMBER(10), LOSAL NUMBER(10,2), HISAL NUMBER(10,2) ) insert into SALGRADE values(1,0,100); insert into SALGRADE values(2,100,200); inser
  • 【Nginx二】Nginx作为静态文件HTTP服务器 bit1129 HTTP服务器
     Nginx作为静态文件HTTP服务器 在本地系统中创建/data/www目录，存放html文件(包括index.html) 创建/data/images目录，存放imags图片 在主配置文件中添加http指令   http { server { listen 80; server_name
  • kafka获得最新partition offset blackproof kafkapartitionoffset最新
    kafka获得partition下标，需要用到kafka的simpleconsumer   import java.util.ArrayList; import java.util.Collections; import java.util.Date; import java.util.HashMap; import java.util.List; import java.
  • centos 7安装docker两种方式 ronin47
          第一种是采用yum 方式              yum install -y docker           
  • java-60-在O(1)时间删除链表结点 bylijinnan java
    public class DeleteNode_O1_Time { /** * Q 60 在O(1)时间删除链表结点 * 给定链表的头指针和一个结点指针(!!)，在O(1)时间删除该结点 * * Assume the list is: * head->...->nodeToDelete->mNode->nNode->..
  • nginx利用proxy_cache来缓存文件 cfyme cache
    user  zhangy users; worker_processes 10; error_log  /var/vlogs/nginx_error.log  crit; pid        /var/vlogs/nginx.pid; #Specifies the value for ma
  • [JWFD开源工作流]JWFD嵌入式语法分析器负号的使用问题 comsci 嵌入式
        假如我们需要用JWFD的语法分析模块定义一个带负号的方程式，直接在方程式之前添加负号是不正确的，而必须这样做：     string str01 = "a=3.14;b=2.71;c=0;c-((a*a)+(b*b))"     定义一个0整数c,然后用这个整数c去
  • 如何集成支付宝官方文档 dai_lm android
    官方文档下载地址 https://b.alipay.com/order/productDetail.htm?productId=2012120700377310&tabId=4#ps-tabinfo-hash 集成的必要条件 1. 需要有自己的Server接收支付宝的消息 2. 需要先制作app，然后提交支付宝审核，通过后才能集成 调试的时候估计会真的扣款，请注意
  • 应该在什么时候使用Hadoop datamachine hadoop
    原帖地址：http://blog.chinaunix.net/uid-301743-id-3925358.html 存档，某些观点与我不谋而合，过度技术化不可取，且hadoop并非万能。 --------------------------------------------万能的分割线-------------------------------- 有人问我，“你在大数据和Hado
  • 在GridView中对于有外键的字段使用关联模型进行搜索和排序 dcj3sjt126com yii
    在GridView中使用关联模型进行搜索和排序 首先我们有两个模型它们直接有关联: class Author extends CActiveRecord { ... } class Post extends CActiveRecord { ... function relations() { return array( '
  • 使用NSString 的格式化大全 dcj3sjt126com Objective-C
    格式定义The format specifiers supported by the NSString formatting methods and CFString formatting functions follow the IEEE printf specification; the specifiers are summarized in Table 1. Note that you c
  • 使用activeX插件对象object滚动有重影 蕃薯耀 activeX插件滚动有重影
      使用activeX插件对象object滚动有重影   <object style="width:0;" id="abc" classid="CLSID:D3E3970F-2927-9680-BBB4-5D0889909DF6" codebase="activex/OAX339.CAB#
  • SpringMVC4零配置 hanqunfeng springmvc4
    基于Servlet3.0规范和SpringMVC4注解式配置方式，实现零xml配置，弄了个小demo，供交流讨论。     项目说明如下： 1.db.sql是项目中用到的表，数据库使用的是oracle11g 2.该项目使用mvn进行管理，私服为自搭建nexus,项目只用到一个第三方 jar，就是oracle的驱动； 3.默认项目为零配置启动，如果需要更改启动方式，请
  • 《开源框架那点事儿16》：缓存相关代码的演变 j2eetop 开源框架
    问题引入 上次我参与某个大型项目的优化工作，由于系统要求有比较高的TPS，因此就免不了要使用缓冲。 该项目中用的缓冲比较多，有MemCache，有Redis，有的还需要提供二级缓冲，也就是说应用服务器这层也可以设置一些缓冲。 当然去看相关实现代代码的时候，大致是下面的样子。 [java] view plain copy print ? public vo
  • AngularJS浅析 kvhur JavaScript
    概念 AngularJS is a structural framework for dynamic web apps. 了解更多详情请见原文链接：http://www.gbtags.com/gb/share/5726.htm Directive 扩展html，给html添加声明语句，以便实现自己的需求。对于页面中html元素以ng为前缀的属性名称，ng是angular的命名空间
  • 架构师之jdk的bug排查(一)---------------split的点号陷阱 nannan408 split
    1.前言.    jdk1.6的lang包的split方法是有bug的,它不能有效识别A.b.c这种类型,导致截取长度始终是0.而对于其他字符,则无此问题.不知道官方有没有修复这个bug. 2.代码 String[] paths = "object.object2.prop11".split("'"); System.ou
  • 如何对10亿数据量级的mongoDB作高效的全表扫描 quentinXXZ mongodb
      本文链接:  http://quentinXXZ.iteye.com/blog/2149440 一、正常情况下，不应该有这种需求 首先，大家应该有个概念，标题中的这个问题，在大多情况下是一个伪命题，不应该被提出来。要知道，对于一般较大数据量的数据库，全表查询，这种操作一般情况下是不应该出现的，在做正常查询的时候，如果是范围查询，你至少应该要加上limit。 说一下，
  • C语言算法之水仙花数 qiufeihu c算法
    /** * 水仙花数 */ #include <stdio.h> #define N 10 int main() { int x,y,z; for(x=1;x<=N;x++) for(y=0;y<=N;y++) for(z=0;z<=N;z++) if(x*100+y*10+z == x*x*x
  • JSP指令 wyzuomumu jsp
    jsp指令的一般语法格式： <%@ 指令名 属性 =”值 ” %> 常用的三种指令： page,include,taglib page指令语法形式： <%@ page 属性 1=”值 1” 属性 2=”值 2”%> include指令语法形式： <%@include file=”relative url”%> (jsp可以通过 include
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他