Vue前端开发中的一些功能及问题的实现与解决（详细汇总）

本文链接：https://blog.csdn.net/best_arrangement/article/details/108201352

本文汇总了Vue前端开发中的一些关键问题及其解决方案，包括如何利用fastclick解决移动端300ms点击延迟，使用vue-lazyload实现图片延迟加载提升用户体验，以及借助css-px2vw插件进行单位转化以适应移动端适配。

摘要由CSDN通过智能技术生成

Vue学习笔记

前言
一、解决移动端点击事件的300ms延迟
二、图片的延迟加载
三、单位转化（px2vw）
总结

前言

这里汇总的都是我在使用vue做前端开发项目时需要用到的功能或是遇到的问题

一、解决移动端点击事件的300ms延迟

1.1 说明

问题：点击按钮触发点击事件开始，移动浏览器将等待大约300毫秒
原因：浏览器正在等待查看您是否实际上正在执行双击

1.2 方法（fastclick插件方式）

原理: 在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉
缺点: 脚本相对较大

1.3 在vue中使用步骤

（一）npm安装插件

npm install fastclick --save

（二）在main.js中引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import toast from 'components/common/toast/index'
// 1.安装、导入
import FastClick from 'fastclick'

Vue.config.productionTip = false

// 2、解决移动端点击的300ms延迟
if ('addEventListener' in document) {
   
  document.addEventListener('DOMContentLoaded', function () {
   
    FastClick.attach(document.body)
  },</