精华内容
下载资源
问答
  • Touch events plugin for Vue.js. This plugin does not support Vue 2.0 yet. This is a directive wrapper for Hammer.js 2.0. Install This branch is only compatible with Vue 1.0. For the Vue 2.0 ...
  • 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.

    Recognizer Events Example
    Pan panpanstartpanmovepanendpancancel
    panleftpanrightpanuppandown
    v-on:panstart="callback"
    Pinch pinchpinchstartpinchmove,pinchend
    pinchcancelpinchinpinchout
    v-on:pinchout="callback"
    Press presspressup v-on:pressup="callback"
    Rotate rotaterotatestartrotatemove
    rotateendrotatecancel,
    v-on:rotateend="callback"
    Swipe swipeswipeleftswiperight
    swipeupswipedown
    v-on:swipeleft="callback"
    Tap tap v-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.

    Recognizer Prop
    Pan v-bind:pan-options
    Pinch v-bind:pinch-options
    Rotate v-bind:rotate-options
    Swipe v-bind:swipe-options
    Tap v-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

    Prop allowed Values
    enabled Boolean 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:

    Prop allowed Values
    options https://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:

    Method Explanation
    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

     

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

    2020-08-07 11:34:20
    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>
    

     

     

    展开全文
  • vue-touch

    2017-09-27 17:48:24
    左右上下滑动,点击 双击 长按 手势库 推荐一个vue控件中的一个touchvue-touch

    左右上下滑动,点击 双击 长按 手势库

    推荐一个vue控件中的一个touch库vue-touch






    展开全文
  • 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监听手机滑动事件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的使用 有时候我们不止需要有返回键,也要有手势滑动切换页面的功能时,这个时候vue-touch就派上用场了 API地址: https://github.com/vuejs/vue-touch/tree/next 安装 npm insall vue-touch@next --save ...
  • vue2.0移动端滑动事件vue-touch

    万次阅读 2017-12-08 10:38:13
    cnpm install vue-touch@nextvar VueTouch = require('vue-touch') Vue.use(VueTouch, {name: 'v-touch'})//左划 默认渲染为div data为参数 <v-touch v-on:swipeleft="onS
  • <div><p>Now that Vue 2.0 is in release-candidate status and hence its API fixed, can you please add support for Vue 2.0 to your vue-touch plugin? Thanks for your efforts.</p><p>该提问来源于开源项目&#...
  • VUE监听左右滑动(vue-touch)

    千次阅读 2020-03-07 09:19:24
    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'}) 使用...
  • <div><p>I noticed that the docs have vue-touch listed as outdated, so I rebuilt the module to work with the 1.x release of Vue. <p>Right now, the following gestures are supported: - Swipe left - ...
  • VueVue-touch的使用

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

    2018-09-03 10:09:00
    开叉查阅资料~找到了vue-touch,使用起来可谓是简单粗暴啊,适合我这样的快速开发人员,源码地址: https://github.com/vuejs/vue-touch/tree/next 不过要看清楚了,vue2.0之后的要使用next分支才行,之前的使用...
  • Vue-touch的使用有时候我们不止需要有返回键,也要有手势滑动切换页面的功能时,这个时候vue-touch就派上用场了API地址:安装npm insall vue-touch@next --save//main.js中引入:import VueTouch from 'vue-touch'...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 937
精华内容 374
关键字:

touchvue

vue 订阅