QiuRenBB的博客

前言  今天在开发中，使用了qrcodejs2插件生成二维码图片。因为是在移动端当中，需要自适应不同分辨率。但是，发现了个问题。生成的canvas画布宽高无法自适应，并且配置项中的宽高因为是不能用px单位，也不能用百分比的，就导致不同分辨率下，宽高固定死了，没办法自适应。配置项安装qrcodejs2插件npm install qrcodejs2 --save使用html<div id="qrcode" ref="qrcode"></div>js<scri

前言  相信很多人都有遇到过这种问题，不管是element-ui组件库还是vant-ui组件库，其中很多组件都有自己的调用方法。并且，这些方法中都有自带参数，而我们在某些情况下调用组件的这些方法的同时，可能需要传一些自定义的参数，这时候如果我们直接传，就会有冲突。以vant-ui中气泡弹出框为例我往select方法传参数1111<van-popover v-model="popoverVal" trigger="click" :actions="actions" @se

安装pathnpm install path --save在vue.config.js中进行配置let path = require('path');function resolve (dir) { return path.join(__dirname, dir)}module.exports = { chainWebpack: (config) => { config.resolve.alias .set('@', resolve('src'))

前言1、以VantUI组件库中van-uploader文件上传为例2、本例以图片大于2M才开始压缩，压缩条件可自行调节3、压缩完成得到图片的base64格式，可转换成file文件4、读取到图片之后，上传图片base64格式编码到后台，返回对应IDHTML<van-uploader :after-read="afterReadOne"> <img class="bg_img" src="../../../../assets/images/bg-1.png" v-if="iden

前言  我们要实现的一个效果是，当输入框输入值时，显示数据列表框并将检索到的数据在列表框当中做展示。模糊查询功能原理分析  其实所谓模糊查询就是不需要用户输入完整的内容就可以开始查询，也就是说用户可以在边输入的同时看到查询到的结果，百度的搜索功能就是很好的模糊查询的例子；其实模糊查询的原理就是给输入框绑定oninput事件监听用户输入情况，然后每次用户只要在输入框中输入了内容就会触发事件并进行查询然后实时展示。HTML部分<input type="text" placeholder="请输入

前言  今天在做移动端项目的时候，发现vant官网并没有返回顶部的组件和相关内容。因此，今天记录一下移动端返回顶部的操作。废话不多说，直接上代码。实现html部分:<van-button color="#EABA6B" class="backTop" @click="backTop" v-show="scrollType"> <van-icon class="icon-backTop" name="arrow-up" size="25" /></van-b

前言  相信大家都知道类于信息填写的界面，有上一步，下一步的操作，就会遇到下一步刷新上一步不刷新的问题。今天我也浅薄的学习了下相关的知识和具体实现方式，接下来直接上代码让大家借鉴参考一下。一、回退不刷新首先我们要实现的是回退不刷新，即B进入到C再从C回到B时，B不刷新。在App.vue中使用keep-alive，并根据keepAlive属性来判断是否要缓存组件，true为需要被缓存，false为不需要被缓存：注意：需要被缓存的组件，要keep-alive包裹起来。<template>

前言1、一处封装，处处可用。步骤①在src下的静态文件assets中新建一个css文件，在文件中按照以下写法格式，自行封装好需要的样式。记住，自定义的样式要放到html中。格式：- -样式名: 样式；html { --ThemeColor: #2e73ff; --ThemeColorDark: #2d6dca; --AidColor1: #fa7d00; --AidColor2: #ff2e2e; --AidColor3: #36c67d; --Te

前言1、相信大家平时做项目的时候经常会遇到需要操作日期，获取日期等操作，一般大家都是通过new Date()去一步一步获取，这样做反而非常麻烦。今天给大家介绍一个功能强大，代码量少，快捷又方便的日期处理插件。2、废话不多说，看代码：首先npm install moment其次在main.js中使用插件Vue.use(require('vue-moment'));然后我们只需要在需要用到的页面中通过以下形式调用即可。//比如我们想获取当前的日期，就在this.moment中加入new

节流函数前言  在我们项目中有一个比较常见的场景，我们要在input搜索框实时输入实时发送请求查询相关数据。但是实时的事件触发会导致请求被触发多次，过于频繁。为了解决这个问题，我们通过以下节流函数的方法来加以限制，以免浪费资源。具体操作，请看一下的代码。HTML//搜索框<van-search clickable class="van-search" v-model="val" show-action placeholder="请

首先npm install axios其次在src目录下新建一个utils文件夹，我们的一些封装工具都可以放在这。然后在utils文件夹下新建一个request.js文件，将aixos请求的封装写到里面：import axios from 'axios'import Qs from 'qs'import store from '@/store'import router from '@/router'import filterPath from '@/utils/filterPath'

在src下的新建的utils文件夹中新建index.js文件，将封装代码写入：/** * 深拷贝 * @obj {Object} 被复制的对象 * @target {Object} 目标对象,默认为空对象 * @return {Object} */function clone(obj, target) { target = target || {} for (var i in obj) { if (typeof obj[i] === 'object') { targ

首先在src下新建的utils文件夹中新建一个index.js文件，用于存放封装的方法。然后将节流函数（1）的方法写入：/*** * 节流函数 在wait间隔时间内不再进行任何调用时，触发一次最后的调用（如:wait设置为300ms，一直点击，该函数一直不执行，只有在间隔了300ms不做任何点击后，才执行刚才的最后一次点击） * @ func 执行函数 * @ wait 等待时间 * @ {Boolean} immediate 是否立即执行 * @return {Function} */

首先在src下新建的utils文件夹中新建一个index.js文件，用于存放封装的方法。然后将节流函数（2）的方法写入：/*** * 节流函数2 连续调用，每隔wait时间后触发一次（如:wait设置为300ms，一直点击，每隔300ms执行一次当前点击） * @ func 执行函数 * @ wait 等待时间 * @ {Boolean} immediate 是否立即执行 * @return {Function} */function throttle2(func, wait, imme

首先在src下的新建的utils文件夹中新建一个index.js文件，将封装的代码写入：/** * base64数据转为Blob * @ {String} base64数据 * @return {Object} Blob */function dataURLtoBlob(base64Data) { let tmp = base64Data.split(','); if (tmp.length === 2) { // 如果base64包含头部的话，去掉base64的头 tmp.s

首先在src下新建的utils文件夹中新建一个index.js文件，用于存放封装的方法。然后将获取当前时间格式和日期格式化的方法写入：/** * @Description: 获取当前时间格式 */function getNowFormatDate() { let nowDate = {}; let dateTime = new Date(); let week; // switch判断 switch (dateTime.getDay()) { case 1:

说明：本例子基于vue-cli脚手架搭建首先，安装echarts依赖npm install echarts -S注：安装NodeJS之后，使用npm来安装包使用的是国外的地址，经常会出现超时错误，这时可以通过修改为国内的淘宝镜像来加速安装。//淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org在main.js中全局引入//引入echartsimport echarts from 'echarts'//vu

共同点：  Vue.use( ) 和 Vue.prototype.xxx 两种方式都可以引入插件，它们都是将 插件挂载到 Vue 的实例上，这样我们就可以在全局使用这个插件。区别：1、Vue.use  ①.不是为了vue写的插件(插件内要处理)不支持Vue.use()加载方式。  ②.Vue.use()的参数是{ object || Function }，如果参数是对象则必须提供 install 方法，如果参数是函数则将参数作为 install 方法，install 方法调用时会将 Vue 作为参

前言： 什么是路由守卫？  官方的说法：  导航守卫(路由守卫)主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的、单个路由独享的、或者组件级的。  我方的说法：  路由守卫是指对路由跳转前做一些验证或者说操作一些事儿，目的是为了实现某些效果。比如没有登录的情况下，就不能进入到首页或者其它页面，只有登录了之后才有权限进入。简单讲就是路由拦截 、设置权限。讲解前：为了方便理解，我先贴一张钩子函数的执行顺序图。先讲解一下路由守卫的组成和各个钩子的理解与应用，登录权限设置放在最后

路由懒加载 前言：  我们都知道网页默认刚打开的时候，就去加载了所有的页面，首屏加载速度变得很缓慢。而路由懒加载就是只加载你当前进入的那个模块页面。按需加载路由对应的资源，可以提高首屏加载速度（ 注: 首页不用设置懒加载，而且一个页面加载过后再次访问是不会重复加载的）。 实现原理：  将路由相关的组件，不再直接导入了，而是改写成异步组件调用的方法，只有当函数被调用到的时候，才去加载对应的组件内容。 普通路由配置import Vue from 'vue'import VueRouter from

vuex的基本内容一、Vuex的理解 1、Vuex是什么？ 2、Vuex是用来干什么的？ 3、为什么要使用Vuex？ 4、什么情况下才去使用vuex?二、Vuex的核心内容 1、State 2、Mutation 3、Getter 4、Action 5、Module 6、辅助函数 ①、mapState ②、mapGetters ③、mapMutations ④、mapAction 7、命名空间下一节内容是vuex中如何自动引入当前modules文件夹下的所有文件。一、Vuex的理解 1、Vuex是什么？

前言  试想一下，在我们做中大型项目使用vuex的时候，我们可能会创建非常多的模块，我们就会遇到需要引入 modules 文件夹下的所有的 js 文件。通常情况下，我们可以在根目录store文件夹中的index.js文件中统一导出，但是这种方式并不是很方便。这时候，我们可以使用require.context这个方法，就不需要每次都在index文件里导出了。require.context 方法的详细介绍import Vue from 'vue'import Vuex from 'vuex'impor

简介  输入m个字符（可以重复）后，按各字符的ASCII码从小到大的顺序输出这m个字符。首先  我这边是统一在src下新建一个utils文件夹，而后所有封装的方法我都会放在这里面。并且在utils中新建一个index.js文件，用于加工并导出这些封装好的方法。main.js中全局引入utils文件夹import * as utils from './utils'Vue.prototype.$utils = utils;utils文件夹下新建一个ASCII.js，封装然后导出。// ASC

简介  md5是一种常用的哈希算法，主要用于对一些重要数据进行“签名”，得到的“签名”通常都是一个32位的十六进制字符串。nodejs中有两种md5加密方法 一、通过npm安装md5npm install md5   页面中使用import md5 from "md5";//在使用的页面引入加密插件let passWord="XXXXXXX";//设置加密字符串md5(passWord); 二、用nodejs的底层crypto 加密模块(md5)npm install crypto

简介  AES——高级加密标准(AES,Advanced Encryption Standard)为最常见的对称加密算法(微信小程序加密传输就是用这个加密算法的)。对称加密算法也就是加密和解密用相同的密钥。封装  在src下新建一个utils文件夹，专门用来存放封装的工具。然后在utils文件夹中新建一个AES.js文件，将封装好的函数写到里面。// 引入CryptoJSconst CryptoJS = require("crypto-js");// 偏移量const iv = Crypto

前言  一般我们在做vue的移动端项目时，为了能够自适应不同分辨率，就需要根据UI设计稿的宽高进行px与rem、em的比例换算。但是这样做非常繁琐，为了解决这个问题，我们直接使用当前比较流行的插件 postcss-px-to-viewport 去配置相应的属性来进行自适应布局的构建。关于px、em、rem的区别详解可点击此处了解postcss-px-to-viewport(将px单位自动转换成viewport单位)安装插件npm install postcss-px-to-viewport --s

前言  前端跨域访问别人服务器中的某个文件时，因同源策略的问题，我们的前端拿不到别人的数据，这时候我们可以使用代理的方案来解决此问题。

vuex的基本内容vue子父组件通信的学习一、什么是子父组件通信？二、为什么要使用子父组件通信？三、子父组件通信  1、子组件向父组件传递数据（this.$emit）  2、子组件向父组件传递数据（this.$refs）  3、父组件向子组件传递数据  4、父组件向子组件传递方法兄弟组件通信的学习一、子组件与子组件的通信方式（这边我直接以一个简单的在线聊天室为例子）  1、通过让父组件充当两个子组件之间的中间件（中继）。  2、通过使用EventBus（事件总线），它允许两个子组件之间直接通讯，而不需要涉及

前言  今天闲着无聊，抽空做了一个简易的PC端聊天对话窗，模仿微信的聊天UI。本来，我以为做这个不是轻轻松松么？结果，现实狠狠的给了我一巴掌。我发现在我发送出最新消息的时候，消息展示的页面没有第一时间来到最底部最新消息位置。好，针对这个问题，我直接运用了大家都会用的方式，就是通过ref获取该设置了滚动条的元素，然后在发送消息的点击事件方法当中写：this.$ refs.div.scrollTop=this.$ refs.div.scrollHeight。本来我想着，这问题不就gameover了吗？但是一测