vue-mb-touch 是一个vue的移动端的事件项目,内置了点击(press)事件,长按(press)事件
npm install vue-mb-touch
使用方法
<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
本文向大家介绍vue移动端轻量级的轮播组件实现代码,包括了vue移动端轻量级的轮播组件实现代码的使用技巧和注意事项,需要的朋友参考一下 一个简单的移动端卡片滑动轮播组件,适用于Vue2.x c-swipe 2.0 全新归来。重写了全部的代码,更靠谱的质量,更优秀的性能 English Document 安装 npm install c-swipe --save 使用 注册组件 在 .vue 单文件
在使滚动系列事件正常运行方面存在问题(根本不符合设计)。已经浏览了所有关于此的文章、代码建议和其他帮助主题,但没有人能够解释为什么此示例根本不起作用: 基本页面html: 好的,如果复制粘贴,则需要替换包含文件,并且版本可能不同。对这种行为表示怀疑。当我取出jquery时。移动包含该脚本按预期工作,每当滚动位置改变时,都会将滚动注释记录到控制台中。 当我包含jquery.mobile页面加载时它会