vue-mb-touch
vue-mb-touch 是一个vue的移动端的事件项目,内置了点击(press)事件，长按(press)事件
安装
npm install vue-mb-touch使用方法
- 安装
- 引入
- 在需要监听tap或者press的元素上添加 v-touch 指令 ，后面就可以 像监听 click 事件 一样 使用v-on:tap="fn"的方式监听tap和press事件了
示例
<template>
<div v-touch.press.tap @tap="tap" @press="press">
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import vueMobileTouch from "vue-mb-touch";
Vue.use(vueMobileTouch);
@Component
export default class Home extends Vue {
public tap() {
/** tap */
}
public press(e: Event) {
/** press */
}
public data() {
return {
};
}
}
</script>
````
> 开启代理模式
````vue
<template>
<ul v-touch.proxy @tap="tap($event)" >
<li data-proxy data-index="1"></li>
<li data-proxy data-index="2"></li>
<li data-proxy data-index="3"></li>
</ul>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import vueMobileTouch from "vue-mb-touch";
Vue.use(vueMobileTouch);
@Component
export default class Home extends Vue {
public tap(e: event) {
const currentTarget = e.currentTarget as HTMLElement;
console.log(currentTarget.tagName.toLowerCase()); // li
console.log(JSON.stringify(currentTarget.dataset)); // {proxy: "", index: "1"}
}
public data() {
return {
};
}
}
</script>全局配置
在引入 vue-mb-touch 时，可以传入一个全局配置对象。该对象目前支持 maxDistance 与 pressTime， maxDistance 用于手指在屏幕上移动多长距离内可触发事件默认10，pressTime 用于手机按住屏幕多长时间触发长按事件,默认650。具体操作如下：
import Vue from 'vue';
import vueMobileTouch from "vue-mb-touch";
Vue.use(vueMobileTouch, {maxDistance: 10,pressTime: 650});
指令参数
| 参数名 | 描述 |
| tap | 是否开启tap事件,默认不开启，但是在tap和press都不开启时，则自动开启 |
| press | 是否开启press事件，默认不开启 |
| stop | 是否阻止事件冒泡,默认不阻止 |
| prevent | 是否阻止游览器默认行为,默认不阻止 |
| passive | 是否为passive监听器,如果有该参数，则阻止游览器默认行为无效 |
| capture | 是否为捕获监听器,默认不是 |
| proxy | 是否开启事件代理模式,默认不开启, 开启后台 在需要触发事件的目标元素上添加 data-proxy 即可 |
注意
如果是在vue封装的组件上使用 v-touch 指令, 在监听事件时，需要加上 native 参数
-
给大家分享一个基于vue的移动端点击和长按事件库,项目于上周正式开源，今天来给大家分享一下 NPM github 码云 第一次加入开源分享的大军，请大家多多支持哦！觉得好的话，请大家给个Star vue-mb-touch vue-mb-touch 是一个vue的移动端的事件项目,内置了点击(tap)事件，长按(press)事件 安装 npm install vue-mb-touch 使用方法 安
-
Linux 服务器搭建 环境搭建 一、CentoOS7防火墙及端口 #查看防火墙状态 systemctl status firewalld 表示防火墙开启中 active (running) 表示防火墙关闭中 inactive (dead) #关闭防火墙 systemctl stop firewalld #开启防火墙 systemctl start firewalld 1、开放端口 firewa
-
一、SpringBoot项目 1、在pom.xml的properties中添加Docker镜像名称 <properties> <docker.image.prefix>springboot</docker.image.prefix> <docker.image.suffix>weather</docker.image.suffix> </properties
-
1.vue项目打包 打包生成dist文件夹 npm run build 如果将该dist目录整个传到服务器上，部署成静态资源站点就能直接访问到该项目。 assetsPublicPath: '/' 记得改为assetsPublicPath: './' ---要改2个地方 2.安装docker,并使用nginx镜像 nginx 是一个高性能的HTTP和反向代理服务器，此处我们选用 nginx 镜像作
-
前提： 电脑已经安装了nodeJS和npm, 项目是直接下载的zip包。 报错步骤为1：cd /d 目录； 2. npm ren dev -------> 报错如下： > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 'webpack-dev-server' 不是内部或外部命令，也不是可运行的
-
<template> <div class="me-detail"> <m-hbar title="个人笔记"/> <div class="detail-title"> 个人总结 </div> <p v-if="vpersonalNotes.notesContext"> {{vper
-
本文向大家介绍vue移动端的左右滑动事件详解，包括了vue移动端的左右滑动事件详解的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了vue移动端左右滑动事件，供大家参考，具体内容如下 关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。 更多vue学习教程请阅读专题《vue实战教程》 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍vue自定义移动端touch事件之点击、滑动、长按事件，包括了vue自定义移动端touch事件之点击、滑动、长按事件的使用技巧和注意事项，需要的朋友参考一下 用法： js核心内容 2018-03-08 有朋友提出一个bug “v-for循环 生命周期后 获取不到新值 比如更新了数据” 这个问题是v-for的就地复用机制导致的，也就是可以复用的dom没有重复渲染，官方给出的方法是需要为
-
问题：我正在尝试为我的应用程序创建一个组件，其他组件将使用该组件渲染表。它可能有三个可能的单元格值： 文本 HTML 组成部分 我能够呈现上面所有的值，但是我在绑定侦听器时遇到了困难。我试图实现的是这样的：传递一个要绑定到组件的方法和事件，表应该将其绑定到相应的单元格。例如： 表JSON 表组件 上面只是我正在尝试的一个片段，表循环通过传递的对象并相应地呈现。 我已经试过了 因此，解决方案1 因此
-
IOS_WEBVIEW
-
在使滚动系列事件正常运行方面存在问题（根本不符合设计）。已经浏览了所有关于此的文章、代码建议和其他帮助主题，但没有人能够解释为什么此示例根本不起作用： 基本页面html： 好的，如果复制粘贴，则需要替换包含文件，并且版本可能不同。对这种行为表示怀疑。当我取出jquery时。移动包含该脚本按预期工作，每当滚动位置改变时，都会将滚动注释记录到控制台中。 当我包含jquery.mobile页面加载时它会
-
本文向大家介绍vue移动端轻量级的轮播组件实现代码，包括了vue移动端轻量级的轮播组件实现代码的使用技巧和注意事项，需要的朋友参考一下 一个简单的移动端卡片滑动轮播组件，适用于Vue2.x c-swipe 2.0 全新归来。重写了全部的代码，更靠谱的质量，更优秀的性能 English Document 安装 npm install c-swipe --save 使用 注册组件 在 .vue 单文件