山姆极客
山姆极客

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)

  • 2018-09-27 aop相关 蒋超_58dc
    1.静态织入，需要使用aspectj专用的compilermaven工程可以采用：https://www.mojohaus.org/aspectj-maven-plugin/2.动态织入，配合spring，创建代理来执行3.
  • webpack 浅谈系列之 Loader KimYYX
    webpack拥有六大核心部分：Entry、Output、Loaders、Plugins、Mode、BrowserCompatibility，这里就我的理解来稍微聊聊Loaders这个部分。1.认识Loader先放出我对loader的理解：Loader是用来逐个处理指定类型的文件。emmm...下面我们对上面那句话稍微解释下。首先我们要先明确，一个Loader是如何在webpack中配置的，见下面
  • ROS2编写一个简单的插件 CrimsonEmber ROS笔记ROS2笔记学习
    1.createabaseclasspackageros2pkgcreate--build-typeament_cmake--licenseApache-2.0--dependenciespluginlib--node-namearea_nodepolygon_base编辑ros2_ws/src/polygon_base/include/polygon_base/regular_polygon.h
  • 解决 Webpack 报错 “No module factory available for dependency type: CssDependency“ 的方法 cmmav33990 webpackrust前端
    这个错误表明Webpack在处理CSS依赖时找不到合适的模块工厂，通常发生在配置不完整或依赖冲突的情况下。以下是详细的解决方案：核心解决方案方案1：安装并配置正确的CSS处理器（最推荐）bashnpminstall--save-devcss-loaderstyle-loader#或使用mini-css-extract-plugin替代style-loadernpminstall--save-dev
  • 【亲测免费】 探索PF4J：Java插件框架的革命性选择 农优影
    探索PF4J：Java插件框架的革命性选择项目介绍PF4J（PluginFrameworkforJava）是一个开源的、轻量级的Java插件框架，旨在将传统的单体Java应用转变为模块化应用。PF4J的核心理念是保持简单且高度可扩展，它通过插件机制允许第三方扩展应用功能，同时支持定义和实现扩展点。PF4J不仅依赖少（仅依赖slf4j-api），而且体积小巧（约100KB），是构建现代Java应用的
  • 前端基础知识Vue3系列 - 04（Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同）
    开始之前CompositionAPI可以说是Vue3的最大特点，那么为什么要推出CompositionApi，解决了什么问题？通常使用Vue2开发的项目，普遍会存在以下问题：代码的可读性随着组件变大而变差每一种代码复用的方式，都存在缺点TypeScript支持有限以上通过使用CompositionApi都能迎刃而解正文一、OptionsApiOptionsAPI，即大家常说的选项API，即以vue
  • Anaconda插件开发 黑客法 技术支持深度学习
    Anaconda插件开发挑战赛技术文章大纲一、引言：插件生态的价值Anaconda在数据科学生态中的核心地位插件系统对平台扩展性的关键作用挑战赛对开发者生态建设的意义二、开发环境搭建#示例：创建插件开发环境condacreate-nplugin-devpython=3.9condaactivateplugin-devpipinstallanaconda-plugin-sdk三、插件架构剖析核心组件
  • 揭秘MavenShading和Maven依赖优先级：解决依赖冲突的终极方案 lifallen Java开发语言javaidemaven
    MavenShading的原理MavenShading是一种在构建项目时，用来解决Java项目中“依赖冲突”问题的技术。当你的项目或者你项目所依赖的库，同时引用了另一个库的不同版本时，就可能出现依赖冲突，这会导致程序在运行时出现ClassNotFoundException或NoSuchMethodError等错误。MavenShading的核心原理是通过maven-shade-plugin插件，将
  • maven-shade-plugin插件将项目打成可执行的jar包 九师兄 工具-maven
    使用maven-shade-plugin插件将项目打成可执行的jar包1、在pom.xml文件中添加maven-shade-plugin插件全部文件：maven-compiler-plugin1.61.6org.apache.maven.plugins<
  • 使用maven-shade-plugin解决依赖版本冲突
    项目里引入多个版本依赖时，最后只会使用其中一个，一般可以通过排除不使用的依赖处理，但是如果需要同时使用多个版本，可以使用maven-shade-plugin解决。以最典型的poi为例，poi版本兼容性很低，如果出现找不到类或者类未定义之类的错误，一般就是因为poi版本不兼容。项目有这样一个需求，需要使用poi-tl-ext实现word导出富文本，poi-tl-ext里使用的是poi4.1.2，而原
  • java第三方控件的使用,pf4j: PF4J 是一个 Java 的插件框架，为第三方提供应用扩展的渠道。使用 PF4J 你可以轻松将一个普通的 Java 应用转成一个模块化的应用。PF4J 本身非常...
    PluginFrameworkforJava(PF4J)Apluginisawayforathirdpartytoextendthefunctionalityofanapplication.Apluginimplementsextensionpointsdeclaredbyapplicationorotherplugins.Alsoaplugincandefineextensionpoints.N
  • PF4J+SpringBoot QingyunChen javaspringboot后端java
    plugin-commonpom.xml相关配置pub.qingyunplugin-common0.0.1-SNAPSHOT插件配置类org.pf4jpf4j3.12.0org.apache.maven.pluginsmaven-assembly-plugintruecommon-impl0.0.1jar-with-dependenciesmake-assemblypackagesingle插件服
  • 【自主探索】frontier_exploration 源码解析 玳宸 ROSROS源码解析ros机器人算法
    各文件运行顺序：\exploration_server\launch\exploration.launch\exploration_server\src\plugin_client.cpp\exploration_server\src\exploration_server_node.cpp\exploration_server\src\exploration_server.cpp\frontier
  • elasticsearch-ik分词器 菁菁兰花月 elasticsearch搜索引擎大数据
    这里用的分词器版本是elasticsearch-analysis-ik-7.16.1.zip，和elasticsearch是相同的版本，这样不容易出错。每个节点的elasticsearch中都要安装elasticsearch-analysis-ik。安装过程1.linux安装zip解压器yum-yinstallunzip2.在原来的elasticsearch安装目录中的plugins目录下创建一个
  • 【亲测免费】 Elasticsearch-analysis-ik中文分词插件 徐忱澜
    Elasticsearch-analysis-ik中文分词插件【下载地址】Elasticsearch-analysis-ik中文分词插件elasticsearch-analysis-ik是一款专为Elasticsearch设计的中文分词插件，版本7.17.6。它能够高效处理中文文本，提供精准的分词功能，极大提升搜索体验。安装简单，只需下载、解压并放置到Elasticsearch的plugins目录
  • Elasticsearch-ik分析器 mykyle elasticsearchjenkins大数据
    CLI安装步骤1、停止Elasticsearch（如果正在运行）：在安装插件之前，确保Elasticsearch没有在运行。命令：systemctlstopelasticsearch2、安装插件：使用elasticsearch-plugin命令安装IK插件。进入到你的es的安装目录：如/usr/local/software/elasticsearch[root@localhostelasticse
  • 解决Maven“无法将类 XXXXX 中的构造器 XXXXXX 应用到给定类型”错误 二饭 Web错误集锦mavenjavaspring
    在Maven的install过程中编译器提示如“无法将类XXXXX中的构造器XXXXXX应用到给定类型”的错误。如果代码没有报错，只是在编译阶段才报错，那基本可以确定是lombok问题。我遇到这个问题是因为在将当前项目打包成Maven依赖时加入了如下插件：org.apache.maven.pluginsmaven-compiler-plugin3.8.1org.springframework.bo
  • httpd安装、虚拟主机配置以及相关访问控制 佐岸的咖啡
    (一)、Centos7系统下实现httpd-2.2的安装，并分别实现prefork、worker、event等几种工作方式.尝试直接yum安装httpd程序[root@CentOS7~]#yuminstallhttpd-2.2Loadedplugins:fastestmirror,langpacksLoadingmirrorspeedsfromcachedhostfile*base:mirrors
  • 教程 | 来吧！分发你的 R 脚本，让两万人受益！ 生信石头
    写在前面前述，我已提及，元旦假期我做了一个有趣的事情。亦即，为TBtools量身打造了一个跨平台的Rsever插件（windows和MacOS）用户均可使用。经过了系列测试，目前已经对外释放。插件本身无实际作用，但却可以使得任何人都可以在这个插件的基础上，快速打造属于自己的TBtoolsRplugin！同时还可以分享给课题组的朋友，分享给所有TBtools用户。为了让这个过程看起来更为简单，我决定
  • 从MacOS goland无法debug到dns无法解析localhost zmc@ macosdebuggolang
    背景MacOS13.0.1GoLand2022.2GoLand开发golang项目，可以run，但是无法debug...​/Applications/GoLand.app/Contents/plugins/go/lib/dlv/mac/dlv--listen=10.xx.xxx.129:63466--headless=true--api-version=2--check-go-version=fa
  • 【安卓笔记】RxJava的Hook机制，整体拦截器 liosen 安卓笔记androidrxjavahook
    0.环境：电脑：Windows10AndroidStudio:2024.3.2编程语言:JavaGradleversion：8.11.1CompileSdkVersion：35Java版本：Java111.使用场景整个项目都是用了RxJava，需要对整个/部分项目的RxJava进行监听（拦截）就会使用到Hook技术下面请看代码：publicvoidhookConfig(){RxJavaPlugin
  • gradle微服务依赖模版
    1、父工程依赖模版注：ext里的内容需要配合设置云效仓库参数到环境变量及gradle使用-CSDN博客使用plugins{id'org.springframework.boot'version'2.3.12.RELEASE'//引入dependency-management插件id'io.spring.dependency-management'version'1.0.11.RELEASE'}gr
  • idea git token modaoshi51991 运维知识vue3+ts项目实战搭建自己的网站intellij-ideagitjava
    笔者今天push代码的时候遇到了一件事，idea向我索要token，不然就acessdenied正常来说是不需要输入token的，如果系统提示你需要token，说明你安装并启用了GitLab插件取消办法File->settings->plugins搜索GitLab取消勾选Apply应用这样正常输入git账号密码即可完成push
  • windows 11 下git软件提交正常，idea git提交总提示需要token dotnet90 gitintellij-ideajava
    在使用IntelliJIDEA进行Git操作时频繁提示输入Token，通常是因为IDEA默认启用了GitLab插件导致的身份验证冲突。以下是解决方法：解决方案‌禁用GitLab插件‌进入IDEA设置（File/Settings）选择"Plugins"搜索并禁用"GitLab"插件‌使用账号密码登录‌完成插件禁用后，重新进行Git操作（如pull/commit/push）时，系统会提示输入账号密码而
  • webpack原理 浮游本尊 javascript原型模式开发语言
    JavaScript的模块打包工具(modulebundler)。通过分析模块之间的依赖，最终将所有模块打包成一份或者多份代码包(bundler)，供HTML直接引用。实质上，Webpack仅仅提供了打包功能和一套文件处理机制，然后通过生态中的各种Loader和Plugin对代码进行预编译和打包。因此Webpack具有高度的可拓展性，能更好的发挥社区生态的力量。Entry:入口文件，Webpack
  • npm build报错Cannot find module ‘webpack/lib/rules/BasicEffectRulePlugin‘解决方法 奔跑吧邓邓子 常见问题解答（FAQ）npm前端webpack
    提示：“奔跑吧邓邓子”的常见问题专栏聚焦于各类技术领域常见问题的解答。涵盖操作系统（如CentOS、Linux等）、开发工具（如AndroidStudio）、服务器软件（如Zabbix、JumpServer、RocketMQ等）以及远程桌面、代码克隆等多种场景。针对如远程桌面无法复制粘贴、Kubernetes报错、自启动报错、各类软件安装报错、内存占用问题、网络连接问题等提供了详细的问题描述与有效
  • Android Studio中java项目添加kotlin代码方法 李艺为 javaandroidstudiokotlin
    根目录下build.gradle修改：添加如下代码id'org.jetbrains.kotlin.android'version'1.9.0'applyfalse完成后应该如下//Top-levelbuildfilewhereyoucanaddconfigurationoptionscommontoallsub-projects/modules.plugins{id'com.android.app
  • 【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器 患得患失949 前端库前端编辑器
    使用vueDevTools插件并修改默认打开编辑器一文搞懂vite-plugin-vue-devtools的使用方式与如何设置默认打开编辑器（包括VSCode、WebStorm，甚至Trae）。什么是vueDevTools？vite-plugin-vue-devtools是一个为Vite+Vue项目提供开发时调试能力的插件，它能在浏览器中实时显示组件结构、props、emits等信息，并支持点击组
  • 尚庭公寓----------分页查询 设计师小聂！ 尚庭公寓java开发语言mavenspringmybatis
    根据条件分页查询公寓列表进行分页配置packagecom.nie.lease.common.mybatisplus;importcom.baomidou.mybatisplus.annotation.DbType;importcom.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;importcom.baomidou.my
  • jQuery.jsonview.js 简单用法 聂曦r
    Title测试结果：切换展开折叠$.get('/protocol/plugin/test/',{},function(r){if(r.code==200){$("#test_result").JSONView(r.ret,{collapsed:true,nl2br:true,recursive_collapser:true});$('#collapse-btn').on('click',funct
  • 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其他