精华内容
下载资源
问答
  • vue3-touch-events 在vue.js 3.x中的任何HTML DOM元素上启用点击,滑动,触摸,按住,鼠标按下,鼠标向上事件。 使交互式vue.js内容易于移动的最简单方法。 将v-touch事件添加到元素时,它会使用完全声明性的语法...
  • vue开发手机端项目时,我们经常会遇到touch和click共存的情况,比如城市选择页面的字母滑动 touch事件在手机端会触发浏览器滑动,所以应给touch事件添加阻止默认行为touchmove.prevent。注意阻止默认行为事件不要...
  • vue自定义移动端touch事件,点击、滑动、长按事件.将以上代码保存到一个js文件内,引入到页面vue库文件之后、用户js文件之前。这样就可以使用vue的触屏事件了。
  • Vue-touch的使用 有时候我们不止需要有返回键,也要有手势滑动切换页面的功能时,这个时候vue-touch就派上用场了 API地址: https://github.com/vuejs/vue-touch/tree/next 安装 npm insall vue-touch@next --save ...
  • 使用技术:vue2.0 webpack vue-touch 一些简单的javascript; (注意:vue-touch 使用的是2.0.0版本 需要与vue2.0.0兼容) vue-touch(地址:https://github.com/vuejs/vue-touch 注意是next 分支) 左侧导航可滑动...
  • <p>main.js如何引用vue-touch,我这里报错显示找不到v-touch组件</p>
  • vue-touch for vue2.xxx

    千次阅读 2017-10-27 16:00:12
    https://github.com/vuejs/vue-touch/tree/next ...Touch events plugin for Vue.js this is a BETA Release   This is a component wrapper for Hammer.js 2.0. Install This plugin require...

    https://github.com/vuejs/vue-touch/tree/next

     

     

    vue-touch

    Touch events plugin for Vue.js this is a BETA Release

     

    This is a component wrapper for Hammer.js 2.0.

    Install

    This plugin requires Vue >= 2.0. For the Vue 1.*-compatible version, see the 1.0 branch

    npm

    Available through npm as vue-touch. As this version is currently in BETA, you have to install with the next tag.

    npm install vue-touch@next
    var VueTouch = require('vue-touch')
    Vue.use(VueTouch, {name: 'v-touch'})

    You can pass an options object as the second argument, which at the moment accepts one property, name. It's used to define the name of the component that is registered with Vue and defaults to 'v-touch'.

    Direct include

    You can also directly include it with a <script> tag when you have Vue and Hammer.js already included globally. It will automatically install itself, and will add a global VueTouch.

    Usage

    Using the <v-touch> component

    <!-- Renders a div element by default -->
    <v-touch v-on:swipeleft="onSwipeLeft">Swipe me!</v-touch>
    
    <!-- Render as other elements with the 'tag' prop -->
    <v-touch tag="a" v-on:tap="onTap">Tap me!</v-touch>

    API

    Component Events

    vue-touch supports all Hammer Events ot of the box, just bind a listener to the component with v-on and vue-touch will setup the Hammer Manager & Recognizer for you.

    RecognizerEventsExample
    Panpanpanstartpanmovepanendpancancel
    panleftpanrightpanuppandown
    v-on:panstart="callback"
    Pinchpinchpinchstartpinchmove,pinchend
    pinchcancelpinchinpinchout
    v-on:pinchout="callback"
    Presspresspressupv-on:pressup="callback"
    Rotaterotaterotatestartrotatemove
    rotateendrotatecancel,
    v-on:rotateend="callback"
    Swipeswipeswipeleftswiperight
    swipeupswipedown
    v-on:swipeleft="callback"
    Taptapv-on:tap="callback"

    Component Props

    Event Option Props

    You can use the matching *-options props to pass Hammer options such as direction and threshold:

    Example

    <!-- detect only horizontal pans with a threshold of 100 -->
    <v-touch
      v-on:panstart="onPanStart"
      v-bind:pan-options="{ direction: 'horizontal', threshold: 100 }">
    </v-touch>

    There's one prop per Recognizer available.

    RecognizerProp
    Panv-bind:pan-options
    Pinchv-bind:pinch-options
    Rotatev-bind:rotate-options
    Swipev-bind:swipe-options
    Tapv-bind:tap-options

    See Hammer.js documentation for all available options for events.

    About Directions:

    In the above example, not that we used direction: 'horizontal'. Hammer's directions interface is a little ugly (Hammer['DIRECTION_HORIZONTAL']).

    VueTouch keeps that from you and accepts simple strings as directions:

    const directions = ['up', 'down', 'left', 'right', 'horizontal', 'vertical', 'all']

    The 'enabled' Prop

    Propallowed Values
    enabledBoolean or Object (see below)

    You can enable and disable all or some of the event recognizers via the enabled prop:

    Example

    <v-touch
      <!-- enable all recognizers -->
      v-bind:enabled="true"
    
      <!-- disable all recognizers -->
      v-bind:enabled="false"
    
      <!-- pass an object to enable and disable recognizers individually -->
      v-bind:enabled="{ pinch: true, rotate: false }"
    
    ></v-touch>

    The 'options' prop

    Hammer accepts a few general options that are normally passed when creating a Hammer instance with new Hammer() or new Hammer.Manager().

    In vue-touch, you can pass those options via the options prop:

    Propallowed Values
    optionshttps://hammerjs.github.io/api/#hammer.defaults

    Example

    <v-touch options="{ touchAction: 'pan' }" />

    Public Component Methods

    The component exposes a few convenience methods to enable and disable Recognizers, and check if a recognizer is enabled:

    MethodExplanation
    disable(event)disable event's recognizer
    enable(event)disable event's recognizer
    toggle(event)Toogle the 'enable' state of event's recognizer
    disableAll()disable all Recognizers
    enableAll()enable all Recognizers
    isEnabled(event)returns true if Recognizer for event is currently enabled
    <template>
      <v-touch ref="tapper" @tap="callback"></v-touch>
    </template>
    <script>
      export default {
        methods: {
          disableTap() {
            this.$refs.tapper.disable('tap')
          },
          enableTap() {
            this.$refs.tapper.enable('tap')
          }
        }
      }
    </script>

    Plugin Methods

    Global Event Options

    You can define global defaults for the builtin recognizers

    // change the threshold for all swipe recognizers
    VueTouch.config.swipe = {
      threshold: 200
    }

    Registering Custom Events

    You can register custom events with vue-touch.

    // example registering a custom doubletap event.
    // the `type` indicates the base recognizer to use from Hammer
    // all other options are Hammer recognizer options.
    VueTouch.registerCustomEvent('doubletap', {
      type: 'tap',
      taps: 2
    })

    Warning: You have to register your custom events before installing the plugin with Vue.use(VueTouch). VueTouch will log a warning to the console (in dev mode) if you try to do that afterwards, and the event will not work.

    This will make it possible to listen for this event on <v-touch>. Additionally, just like for "normal" events, you can pass further options as the corresponding prop.

    <v-touch v-on:doubletap="onDoubleTap"></v-touch>
    <!-- with local options -->
    <v-touch v-on:doubletap="onDoubleTap" v-bind:doubletap-options="{intervall: 250}"></v-touch>

    See /example for a multi-event demo. To build it, run npm install && npm run build.

    Server-Side Rendering (SSR)

    As of the moment of this writing, requiring HammerJS in a non-browser-environment (like during the build process of your SSR bundle) throws an error (hammerjs/hammerjs#1060).

    The easiest fix to that is to use a webpack alias (in your server-side(!) webpack copnfiguration) to replace the hammerjs package with a module that just exports a stub, i.e. an empty object. vue-touch comes with such a module, called hammer-ssr.js

    alias: {
      'hammerjs$': 'vue-touch/dist/hammer-ssr.js'
    }

    Once this issue has been resolved HammerJS, this alias is no longer nessessary and can be removed.

    The <v-touch> component itself will never try to setup any Hamer Manangers or Recognizers if it detects that it is running in an SSR environment (seeVue.js API docs for vm.$isServer). The component will only render a normal <div> element (or whatever element you defined with the tag prop).

    Known Limitations & Bugs

    • Curently, changing -options props will not change recogizer settings. The initial values will stay in place until the component is re-created.

    TODO

    •  Support updating recognizer options when props change.
    •  Find out if e2e tests are possible(contribution welcome)

    License

    MIT

     

    展开全文
  • 下载zip包并解压,然后将vue-touch-keyboard.css和vue-touch-keyboard.js文件从dist文件夹添加到您的项目中。 https://github.com/icebob/vue-touch-keyboard/archive/master.zip 用法 < input type =" ...
  • 提示触摸事件 启用vue.js 2.x的点击/滑动/触摸保持事件 特征: 常见的触摸事件,例如tap , swipe , touchhold () 所有事件同时支持鼠标和触摸屏 ...import Vue2TouchEvents from 'vue2-touch-events' Vue . us
  • 主要介绍了vue自定义移动端touch事件之点击、滑动、长按事件的实例代码,需要的朋友可以参考下
  • vue v-touch组件

    千次阅读 2019-12-26 09:31:12
    npm install vue-touch@next --save dev 2,main.js里面 import VueTouch from 'vue-touch' Vue.use(VueTouch, { name: 'v-touch' }) 3.直接使用 <v-touch v-on:swipeup="swipeup"> <img src="../../...

    1,安装

    npm install vue-touch@next --save dev

    2,main.js里面

    import VueTouch from 'vue-touch'

    Vue.use(VueTouch, { name: 'v-touch' })

    3.直接使用

    <v-touch v-on:swipeup="swipeup"> <img src="../../assets/img/...." alt=""> </v-touch>

    展开全文
  • vue vue-touch移动端手势

    千次阅读 2020-08-05 14:57:31
    cnpm install vue-touch@next --save 2、引入 在main.js中 import VueTouch from 'vue-touch' Vue.use(VueTouch, {name: 'v-touch'}) v-touch可以是自定义名称 3、使用: Vue.use注册的name名称,默认改...
    1、安装
    	cnpm install vue-touch@next --save
    
    2、引入
    	在main.js中
    	
    	import VueTouch from 'vue-touch'
    
    	Vue.use(VueTouch, {name: 'v-touch'})  v-touch可以是自定义名称
    
    3、使用:
    	Vue.use注册的name名称,默认该标签为div
    	
    	<v-touch 	
    		(1)替换标签
    			tag="要变成的标签名称,默认为div"
    		
    		(2)定义手势
    			@事件类型='回调' 
    			
    		(3)配置手势事件选项
    			:小写事件类型名称-options="{ direction: 'horizontal', threshold: 100 }
    				threshold临界值
    				directions方向: 'up', 'down', 'left', 'right', 'horizontal', 'vertical', 'all'
    				具体配置查看hammerjs
    				
    		(4)阻止/触发手势
    			:enabled="true/false"   允许/禁止所有的手势
    			:enabled="{ pinch: true, rotate: false }"  允许和禁止指定手势
    		
    		(5)公共组件方法
    			1、通过ref获取到该标签
    			2、在方法中
    				this.$refs.tapper.disable('tap')
    				
    			公共方法:
    				disable('手势名称') 	
    				enable('手势名称') 	
    				toggle('手势名称') 	
    				disableAll() 	disable all Recognizers
    				enableAll() 	enable all Recognizers
    				isEnabled('手势名称') 	
    			
    		(6)自定义手势
    			在main.js中,在Vue.use之前使用
    			
    			VueTouchVueTouch.registerCustomEvent('doubletap', {
    			  type: '手势名称',
    			  ...手势事件的配置选项,见(3)
    			  taps: 2  对应tap手势的触发点击次数配置
    			})
    	
    	> ...</v-touch>
    	
    4、事件类型:
    	Pan平移 	
    		pan, panstart, panmove, panend, pancancel,
    		panleft, panright, panup, pandown 	
    		
    	Pinch缩放 	
    		pinch, pinchstart, pinchmove,pinchend,
    		pinchcancel, pinchin, pinchout 	
    		
    	Press按压 	
    		press, pressup 	
    		
    	Rotate旋转 	
    		rotate, rotatestart, rotatemove,
    		rotateend, rotatecancel, 	
    		
    	Swipe滑动 	
    		swipe, swipeleft, swiperight,
    		swipeup, swipedown 	
    		
    	Tap点击 	
    		tap 	
    

    代码示例:

    <template>
       <div>
         category
         <!-- <div  :class='{swipe:move}'>
           <v-touch @swipeleft="swipeleft" style='width:200px;height:200px;backgroundColor:red;'>Swipe me!</v-touch>
           左滑
         </div> -->
    
          <div >
           <v-touch
            v-on:panstart="swipeleft"
            style='width:200px;height:200px;backgroundColor:red;'
            :pan-options="{ direction: 'horizontal', threshold: 100 }"
            v-bind:enabled="false"
            >Swipe me!</v-touch>
           左滑2
         </div>
    
         <Tabbar/>
       </div>
    </template>
    
    <script>
    import Tabbar from '@/components/common/tabbar/tabbar.vue'
    
    export default {
      name:'category',
      data(){
        return{
          move:false
        }
      },
      components:{
        Tabbar
      },
      methods:{
        swipeleft()
        {
          // setTimeout(()=>{
          //   this.$router.push('/shopcar')
          // },2000)
          
          this.move=true;
          console.log('左滑');
        }
      }
    
    }
    </script>
    
    <style scoped>
    .swipe{
      transform: translateX(-100%);
      transition: 2s;
    
    }
    
    </style>
    
    展开全文
  • vuevue-touch 的使用

    千次阅读 2019-09-18 09:45:10
    vue-touch的使用十分简单。 下面是源代码地址以及英文版的说明。 https://github.com/vuejs/vue-touch/tree/next 首先在vue项目中安装vue-touch npm insall vue-touch@next --save 然后在main.js上导入并使用:...

    如果想让vue能够监听移动端的上滑、下滑、左滑、点击等等动作,可以使用vue-touch插件。vue-touch的使用十分简单。

    下面是源代码地址以及英文版的说明。
    https://github.com/vuejs/vue-touch/tree/next

    首先在vue项目中安装vue-touch

    npm install vue-touch@next --save
    

    然后在main.js上导入并使用:

    import VueTouch from "vue-touch";
    Vue.use(VueTouch, {name: "v-touch"});
    

    之后就可以在任意组件上使用vue-touch,如下图:
    在这里插入图片描述
    在这里插入图片描述

    说明中提及的动作都可监听:
    Pan :触屏时的拖动行为
    Pinch:手指放大缩小的行为
    Press:长按行为
    Rotate:两手指旋转行为
    Swipe:滑动行为
    Tap:点击行为
    在这里插入图片描述

    展开全文
  • npm install vue-touch@next --save //main.js中引入: import VueTouch from 'vue-touch' Vue.use(VueTouch, {name: 'v-touch'}) 2. 案例: //html代码 <template> <v-touch v-on:swipeleft="swiperlef....
  • vue移动端touch插件

    2021-01-13 14:17:39
    方法一、v-touch官网地址包括单击、双击、长按、缩放等手势事件安装npm install [emailprotected] --save引入main.js中引入:import VueTouch from ‘vue-touchVue.use(VueTouch, {name: ‘v-touch‘})使用html...
  • VueVue-touch的使用

    万次阅读 2018-03-16 15:07:09
    最近项目中,有的页面发现设置返回键看起来怪怪的,感觉与整体不协调,于是就考虑使用手势滑动事件来实现返回功能~开叉查阅资料~找到了vue-touch,使用起来可谓是简单粗暴啊,适合我这样的快速开发人员,源码地址:...
  • vue中使用vue-touch报错

    2021-03-15 11:47:43
  • 主要介绍了vue + any-touch实现一个iscroll实现拖拽和滑动动画效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue swiper 拥有多个可配置项,可灵活使用的vue轮播组件,使用touch事件,所以滑动仅支持手机端
  • vue移动端touch拖拽排序功能介绍:大致需求:整体思路:简单效果展示:具体实现:一、display:flex+v-for布局:二、touch事件绑定:三、卡片移动:四、获取手指所在位置:五、操作数组(删除或插入元素):六、手指...
  • vue中v-touch事件用法

    万次阅读 2019-07-26 14:29:11
    vue中v-touch事件用法 1.先下载 cnpm install vue-touch@next --save dev 2.在main.js引入 import VueTouch from 'vue-touch' Vue.use(VueTouch, { name: 'v-touch' }) 3.用法 <v-touch v-on:swipeup="go...
  • vue 自定义指令 -- 移动端 touch拖拽

    千次阅读 2020-05-21 16:35:31
    - vue-自定义指令 废话不多说,直接上代码。这里都是一些加减法运算,相信大家应该可能都看得懂。 drag.js /** * @description 移动端拖拽指令 * @author 谭上彪 * @date 2020-5-21 14:36:13 * */ export defau
  • JavaScript-touch事件及vue的v-touch插件

    千次阅读 2019-06-23 11:36:56
    touch事件 开始的触摸事件touchstart、touchmove和touchend是ios版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为ios设备既没有鼠标也没有键盘,所以在为移动Safari浏览器开发交互性网页的时候,PC端的...
  • Vue监听手机滑动事件vue-touch

    万次阅读 2019-10-22 15:17:22
    使用vue-touch插件手机滑动事件的监听,及后续操作的执行。 源码工程地址:VueTouch 效果图 安装 npm install vue-touch@next 使用方式 步骤一:main.js中引入vue-touch //main.js中引入: import VueTouch from '...
  • vue-touch手势事件

    2020-11-19 10:17:05
    npm install --save vue-touch@next vue调用 var VueTouch=require('vue-touch') Vue.use(VueTouch,{name:'v-touch'}) 将想要手势操控的块用包裹起来 <!-- 左滑事件 --> <v-touch v-on:swipeleft=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,796
精华内容 3,918
关键字:

touchvue

vue 订阅