vue项目中fastclick的安装使用

原创 已于 2022-01-19 19:17:23 修改 · 1.7k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #typescript

于 2022-01-19 19:10:21 首次发布
本文详细介绍了在Vue项目中如何安装并使用Fastclick库，包括在main.js中的引入，创建resetFastClick.js文件，以及针对TypeScript的支持。对于Vue3项目，还特别提到了不同的引入方式。

fastclick 的安装

npm install fastclick --save

在main.js中引入

import FastClick from "fastclick"
//fastclick导致input框点击慢的问题,引入
import "@utils/resetFastClick.js


FastClick.attach(document.body)

在utils文件夹中创建resetFastClick.js文件

import FastClick from
最低0.47元/天 解锁文章
Vue2.0 fastclick的使用
拥抱AI Design
08-12 4648
本文主要介绍Vue2.0 fastclick的使用，解决300ms延迟。 一、安装依赖fastclick npm install fastclick 二、全局引入 在main.js中 import fastClick from 'fastclick' fastClick.attach(document.body); 三、局部取消fastclick来立刻触发点击事件 <a class=...
vue.js添加一些触摸事件以及安装fastclick的实例
10-18
-D表示开发依赖，这样Fastclick将只在开发环境中使用，不会被打包到生产环境中，节省资源。 安装完成后，你需要在项目的入口文件，通常是`main.js`中引入Fastclick，并将其绑定到页面的`body`元素上。这样做是因为...
fastclick的介绍和使用
11-12 397
移动端点击延迟事件 1.移动端浏览器在派发点击事件的时候，通常会出现300ms左右的延迟 2.原因: 移动端的双击会缩放导致click判断延迟 解决方式 1. 禁用缩放 `<meta name = "viewport" content="user-scalable=no" > ` 缺点: 网页无法缩放 2.更改默...
vue 中使用fastclick
weixin_39205240的博客
07-05 3611
1. cnpm i fastclick --save2. 在main.js中引入并绑定到body     import fastclick from 'fastclick';3. fastclick.attach(document.body);
Vue中引用fastclick
weixin_43398464的博客
06-13 388
在vue中引用fastclick是为了解决点击按钮延迟 。 首先安装fastclick：npm install fastclick --save 然后在main.js里面添加上 import FastClick from 'fastclick'
vue 移动端 fastClick
Future1994的博客
04-15 549
vue项目引用fastclick npm指令 1 npm install fastclick -D 或者 cnpm install fastclick -D 然后在main.js写上 1 2 3 4 5 6 7 8 importFastClick from'fa...
Vue移动端开发解决300ms点击延迟—FastClick
01-20
在Vue.js项目中集成FastClick，首先需要通过npm（或使用淘宝镜像cnpm）全局安装FastClick库： ```bash npm install fastclick # 或者 cnpm install fastclick ``` 安装完成后，可以在Vue项目的入口文件（如`main....
vue.js 添加 fastclick的支持方法
10-18
在Vue.js项目中集成`fastclick`，可以显著提升移动端应用的交互性能。 首先，我们需要安装`fastclick`库。在终端中运行以下命令： ```bash npm install fastclick -S ``` 这将会把`fastclick`作为项目的依赖包...
Vuecli3.x使用fastclick报错
小生鲜
12-13 1078
使用vuecli3快速搭建项目模板解决移动端300ms延迟需要安装fastclick，当然如果你使用ts还需要安装@types/fastclick 在引入main.ts中是会报错 import FastClick from 'fastclick' FastClick.attach(document.body) 一般这类问题都是使用了ts才报错的，去node-modules下面找到...
vue引用fastclick
weixin_44479957的博客
03-01 489
在index.html引用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="pragma" content="no-cache"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1
在vue中使用fastclick解决移动端300ms延时问题
qq_41431098的博客
07-28 182
第一步：安装插件 把fastclick这个包安装到项目的依赖之中，--save表示开发与上线都需要 npm install fastclick --save 第二步:在main.js中引入插件 importfastclickfrom'fastclick' 第三步:在body元素上使用插件 fastclick.attach(document.body) ...
vue项目中添加fastclick的支持
weixin_30673715的博客
05-27 291
执行fastclick安装命令： $ npm install fastclick -D 在main.js里引入并给body绑定： importimport fastclick from 'fastclick' fastclick.attach(document.body) 之后，package.json中配置： "dependencies": { "st...
vue.js 使用 fastclick解决移动端click事件300毫秒延迟方法
qq_37899792的博客
12-19 631
一.使用npm安装： npm install fastclick -S 二.用法： 安装完以后，可以在在main.js中全局引入，并绑定到body，全局生效。或者在单页面引入，只针对当前页面生效 //引入 import FastClick from 'fastclick' //初始化FastClick实例。在页面的DOM文档加载完成后 FastClick.attach(documen...
Vue用到的fastclick.js
weixin_47981445的博客
06-16 668
fastclick.js（免费下载） ; (function () { 'use strict'; /** * @preserve FastClick: polyfill to remove click delays on browsers with touch UIs. * * @codingstandard ftlabs-jsv2 * @copyright The Financial Times Limited [All Rights Reserved] * @l
fastclick插件在Vue+ts 使用
优快云 for recording problems
02-22 533
安装一下 @types/fastclick npm i @types/fastclick 找到node-modules下面的@types/fastclick/index.d.ts文件，然后打开修改里面内容即可 找到这段代码，修改下面内容 declare module "fastclick" { // function fastclick(layer: any, options?: FastClickOptions): FastClickObject; // namespace fastclick {
vue使用fastclick
wenfu814的博客
09-23 428
1.下载fastclick npm install fastclick 2.在main.js中引入 import FastClick from ‘fastclick’ if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { Fast...
FastClick插件
博客
06-06 4937
处理移动端 click 事件 300 毫秒延迟， 由 FT Labs 开发，Github 项目地址：https://github.com/ftlabs/fastclick 。1.为什么存在延迟？从点击屏幕上的元素到触发元素的 click 事件，移动浏览器会有大约 300 毫秒的等待时间。为什么这么设计呢？ 因为它想看看你是不是要进行双击（double tap）操作。2.兼容性 Mobile Safa
vue使用fastclick库解决移动端300ms点击延迟
qq_43391070的博客
07-06 350
vue使用fastclick库解决移动端300ms点击延迟 当在移动端进行点击操作时，屏幕会判断用户是否进行双击之类的操作，所以会有300ms左右的延迟派发事件，针对这个问题fastclick库给出了解决方案 1.第一步安装： npm install fastclick --save 2.在main.js文件下导入fastclick库 import fastclick from 'fastclick'; 3.调用attach函数将fastclick库附加到页面体中即可 fastclick.attach(
Vue移动端开发解决300ms点击延迟---FastClick
做名安静的coder
01-11 719
一.FastClick 移动端设备浏览器会默认在用户点击屏幕大约延迟300ms后才会触发点击事件，这是为了检查用户是否执行的是双击事件。为了能够立即响应用户的点击事件，才有了FastClick。 二.用法 全局安装fastclick： npm i fastclick 也可使用淘宝镜像： cnpm i fastclick 三.Vue中引入及配置FastClick 引入： import FastCli...
在 Vue 项目中，全局混入 fastClick 库导致 IOS 中 input 单击事件不灵敏
最新发布
11-07
在Vue项目中全局混入fastClick库后，IOS中input单击事件不灵敏，可尝试以下解决办法： #### 1. 排除input元素 fastClick在某些情况下会干扰input元素的正常点击行为，可通过配置让fastClick排除对input元素的处理。在初始化fastClick时，可设置`ignoreTarget`选项来排除特定元素。 ```javascript import FastClick from &#39;fastclick&#39;; // 在main.js中初始化FastClick if (&#39;addEventListener&#39; in document) { document.addEventListener(&#39;DOMContentLoaded&#39;, function() { FastClick.attach(document.body, { ignoreTarget: function(target) { return target.tagName === &#39;INPUT&#39;; } }); }, false); } ``` #### 2. 使用Vue的事件处理替代 可以在Vue组件中使用`@click`等事件处理来替代fastClick的处理。这样可以避免fastClick对input元素的干扰。 ```vue <template> <input v-model="inputValue" @click="handleInputClick" /> </template> <script> export default { data() { return { inputValue: &#39;&#39; }; }, methods: { handleInputClick() { // 处理点击事件 } } }; </script> ``` #### 3. 更新fastClick版本 确保使用的是fastClick的最新版本，有时旧版本可能存在一些已知的问题，更新到最新版本可能会解决这些问题。可以通过以下命令更新： ```bash npm update fastclick ``` #### 4. 检查其他冲突 检查项目中是否存在其他可能与fastClick冲突的库或代码。例如，一些自定义的事件处理逻辑可能会与fastClick产生冲突，需要进行排查和调整。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值