vue3-touch-events:对vue.js 3的简单触摸事件支持

  • J1_689613
  • 475.9KB
  • zip
  • 0
  • VIP专享
  • 0
  • 2022-04-06 07:53
vue3-touch-events 在vue.js 3.x中的任何HTML DOM元素上启用点击,滑动,触摸,按住,鼠标按下,鼠标向上事件。 使交互式vue.js内容易于移动的最简单方法。 将v-touch事件添加到元素时,它会使用完全声明性的语法在台式机和移动设备上运行。 与其他库不同,您无需在组件中添加任何特殊代码即可完成此工作。 您只需要全局注册库,它就可以在整个应用程序中启用新事件。 根据许可的MIT许可证发布。 特征: 常见触摸事件的声明性语法,例如tap , swipe , hold , drag和 所有事件均以相同的语法支持台式机(鼠标)和移动设备(触摸屏) 使用v-touch-class指令在悬停时自动添加样式并点击 在一个DOM元素上绑定多个触摸事件 使用类似于本机的事件处理程序的可自定义事件 节流的drag和rollover事件,以避免崩溃您的应用程序 适用
  • vue3-touch-events-master
  • images
  • animation.gif
  • .npmignore
  • index.d.ts
  • .gitignore
  • index.js
  • package-lock.json
  • package.json
# vue3-touch-events [![](]( **Enable tap, swipe, touch, hold, mouse down, mouse up events on any HTML DOM Element in vue.js 3.x.** The easiest way to make your interactive vue.js content mobile-friendly. When you add `v-touch` events to your elements, it works on desktop and mobile using a fully declarative syntax. Unlike other libraries, you do not need to add any special code to your components to make this work. You simply have to register the library globally and it enables new events throughout your application. ![Events]( Released under the permissive MIT License. Features: - Declarative syntax for common touch events, such as `tap`, `swipe`, `hold`, `drag` and [more](#Events) - All events support desktop (mouse) and mobile devices (touch screen) with the same syntax - Automatically add styling on hover and tap using `v-touch-class` directive - Bind multiple touch events on one DOM element - Customizable events with native-like events handler - Throttling for `drag` and `rollover` events to prevent crashing your application - Global configuration that applies to all events in the application - Ability to override global configuration on any element using `v-touch-options` directive - Bindings for TypeScript included and also works in pure-JavaScript projects Version: > Note: This library is for **vue.js 3.x** only. For **vue.js 2.x** see the [older library]( Credits: - All credits go to Jerry Bendy for creating the original project [vue2-touch-events]( - Special thanks to Xavier Julien for creating the [Vue 3.x port]( ## Installation To install with npm: ```shell npm install vue3-touch-events ``` To install with yarn: ```shell yarn add vue3-touch-events ``` ### TypeScript You need to register this plugin with vue.js in your main application file: ```js import Vue from "vue"; import Vue3TouchEvents from "vue3-touch-events"; Vue.use(Vue3TouchEvents); ``` ### JavaScript You need to include the [UMD script]( of this plugin and you do not need to register this plugin with vue.js. ```html <script src="libs/vue.js"></script> <script src="libs/vue3-touch-events.js"></script> ``` ## Examples In your `.vue` component files, use the `v-touch` directive add touch events to elements. Specify the event using the first argument, for example `v-touch:tap` or `v-touch:swipe`. ```html <!-- bind a tap event --> <span v-touch:tap="touchHandler">Tap Me</span> <!-- tap is the default event, you can omit it --> <span v-touch="touchHandler">Tap Me</span> <!-- bind the swipe event, no matter direction --> <span v-touch:swipe="swipeHandler">Swipe Here</span> <!-- only when swipe left can trigger the callback --> <span v-touch:swipe.left="swipeHandler">Swipe Left Here</span> <!-- bind a long tap event --> <span v-touch:longtap="longtapHandler">Long Tap Event</span> <!-- bind a start and end event --> <span v-touch:press="startHandler" v-touch:release="endHandler">Press and Release Events</span> <!-- bind a move and moving event --> <span v-touch:drag.once="movedHandler">Triggered once when starting to move and tapTolerance is exceeded</span> <span v-touch:drag="movingHandler">Continuously triggered while dragging</span> <!-- touch and hold --> <span v-touch:hold="touchHoldHandler">Touch and hold on the screen for a while</span> <!-- you can even mix multiple events --> <span v-touch:tap="tapHandler" v-touch:longtap="longtapHandler" v-touch:swipe.left="swipeLeftHandler" v-touch:press="startHandler" v-touch:release="endHandler" v-touch:swipe.right="swipeRightHandler">Mix Multiple Events</span> <!-- using different options for specified element --> <span v-touch:tap="tapHandler" v-touch-options="{touchClass: 'active', swipeTolerance: 80, touchHoldTolerance: 300}">Different options</span> <!-- customize touch effects by CSS class --> <span v-touch:tap="tapHandler" v-touch-class="active">Customize touch class</span> <!-- or --> <span v-touch:tap="tapHandler" v-touch-options="{touchClass: 'active'}">Customize touch class</span> ``` ## Usage ### Simple callback If you simply want to execute a callback function on a `v-touch` event, use this pattern: ```html <div v-touch:tap="onTapItem">Button</div> ``` ```js methods: { onTapItem(mouseEvent) { // you can remove the `mouseEvent` argument console.log("Tapped!"); }, }, ``` ### Passing parameters to the event handler If you want to add extra parameters to your `v-touch` event handler, you need to return a delegate in the event handler. You can pass as many attributes as you need. ```html <div v-for="(item, i) in items"> <div v-touch:swipe="onSwipeItem(item, i)">Button</div> </div> ``` ```js methods: { onSwipeItem(item, i) { return function (direction, mouseEvent) { console.log("Swiped item ", i, ": ", item, " in direction ", direction); }; }, }, ``` ## Events List of all supported events are given below. **All events work on Desktop & Mobile devices.** | <div style="width:170px">Event</div> | Behaviour | | ---------------------------- | ----------------------------------------------------- | | `v-touch`<br> `v-touch:tap` | **Desktop:** Triggered when the user clicks on the element (press and release). <br> **Mobile:** Triggered when the user taps on the element (tap and release) | | `v-touch:longtap` | **Desktop:** Triggered when the user holds on the element for `longTapTimeInterval` MS and then releases it (press and release). <br> **Mobile:** Triggered when the user taps and holds on the element for `longTapTimeInterval` MS and then releases it (tap and release) | | `v-touch:swipe` | Triggered when the user drags on the element (swipe). <br> It will detect the direction of the swipe and send it to your callback. <br> First argument of the callback must be `direction` attribute, which can be `left`, `right`, `top` or `bottom`. <br> Example callback: `onSwipe(direction){ ... }` | | `v-touch:swipe.left` <br>`v-touch:swipe.right` <br>`` <br>`v-touch:swipe.bottom` <br> | Triggered when the user drags on the element in a specific direction (directional swipe). | `v-touch:hold` | Triggered when the user holds the mouse button down for `touchHoldTolerance` MS while over the element (press and hold). <br> This will be triggered before your finger is released, similar to what native mobile apps do. | | `v-touch:press` | **Desktop:** Triggered when the user presses the element (mouse down). <br> **Mobile:** Triggered when the user taps the element without releasing. | | `v-touch:drag.once` | Triggered when the user presses and drags the element. <br> Only fired once, the moment the user first drags on the element. | | `v-touch:drag` | Triggered when the user presses and drags the element. <br> Fired every time the mouse moves while dragging the element. <br> This event is throttled to prevent too many events per second. <br> This event will fire every `dragFrequency` MS. | | `v-touch:release` | **Desktop:** Triggered when the user releases the element (mouse up). <br> **Mobile:** Triggered when the user taps and releases the element. | | `v-touch:rollover` | **Desktop only:** Triggered when the user moves his mouse over the element. <br> This event is throttled to prevent too many events per second. <br> This event will fire every `rollOverFrequency` MS. | ### Migration from Vue 2.x Some events have been renamed from the vue 2.x version of this l
    • eagle.js, 使用 Vue.js 构建的破坏性幻灯片框架.zip
      eagle.js, 使用 Vue.js 构建的破坏性幻灯片框架 Eagle.js---黑客的幻灯片框架幻灯片系统构建在 Vue.js 平台之上。支持动画,主题,交互式小部件( 用于网络演示)易于跨演示文稿重用组件,幻灯片和样式内置演示器模式...
    • vue-apexcharts:Ap ApexCharts的Vue.js组件
      用于Vue.js包装器可在vue中构建交互式可视化。 下载及安装 通过npm安装 npm install --save apexcharts npm install --save vue-apexcharts 用法 import VueApexCharts from 'vue-apexcharts' Vue . use ( ...
    • 故事书基础::books:带Vue.js课程的故事书的源代码
      使用Storybook,我们可以创建可视化的组件库和游乐场,在隔离的环境中可以在其中记录,展示和与Vue.js组件进行交互。 在此Storybook课程中,您将学习如何使用Vue CLI在任何Vue.js项目中安装和配置Storybook。 您还...
    • Vue.js 教程
      Vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简 单、灵活的 API。从技术上讲, Vue.js 集中在 MVVM 模式上的视图模型层,并通过双向数据绑定连接视图和模 型。实际...
    • v-model-V-Model是Vue.js的模型插件,例如ng-resource。-Vue.js开发
      V模型提供交互支持V模型V模型是Vue.js的模型插件,例如ng-resource。 基于axios,正则表达式路径和bluebird。 V模型提供了与RESTful服务的交互支持,可以与Vue.js 1.x和2.x一起使用。 查看有关ng-resource安装的更多...
    • google-vue:将Google与Vue.js交互
      谷歌 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 运行单元测试 npm run test:unit 运行端到端测试 npm run test:e2e ... :performing_arts: Comvocêpode conversar ...
    • Vue.js实践:使用Vue2.0开发富交互WEB应用
    • vue-apexcharts ApexChartsvue-apexcharts-ApexCharts的Vue.js组件。-Vue
      用于ApexCharts的Vue.js包装器可在vue中构建交互式可视化。 下载和安装通过npm安装npm install --save apexcharts n用于ApexCharts的Vue.js包装器在vue中构建交互式可视化。 下载和安装通过npm安装npm install --...
    • vue.js版双向滑动区间选择器
      1.优化移动端输入范围时的各种奇怪的兼容性问题,提升用户体验 2.资源包注释详细,逻辑简单 3.有助于掌握方法论,受益良久 4.使用简单,参数简单 5.交互符合移动端操作习惯
    • GaussDB_100_1.0.1-DATABASE-REDHAT-64bit.tar.gz