vue
余温无痕
这个人很懒
展开
-
vue2/vue3 Provide和Inject使用方式
这种方法传递过来的数据是没有响应性的,当你改变父组件中的name时,子组件中接收的name并不会改变。官方解释:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的。父组件返回一个自定义的函数,子组件进行computed来进行处理,来实现响应式数据处理。原创 2023-04-04 18:24:05 · 1255 阅读 · 0 评论 -
vue2/vue3 EventBus事件总线(用于组件通信)
Vue 3.x 移除了 $on 、 $off 和 $once 这几个事件 API,使得vue3.x不能像2.x一样,不能直接使用EventBus。vue3 推荐 mitt 和 tiny-emitter,这里使用mitt。中定义一个新的bus对象并且挂载在原型链上,是全新的Vue实例。原创 2023-04-04 17:58:11 · 1488 阅读 · 0 评论 -
element-ui el-table分页后设置连续的索引(如排行榜)
el-table分页后设置连续的索引(如排行榜)原创 2023-03-31 17:04:38 · 1946 阅读 · 0 评论 -
vue 关于日期、时间戳格式的一些操作
vue 关于日期、时间戳格式的一些操作。原创 2023-02-18 14:34:58 · 711 阅读 · 0 评论 -
axios 下载文件且携带参数(Excel、Word...)
get和post方式中“responseType”添加层级要注意,具体使用方法在下方。原创 2022-10-10 11:17:54 · 933 阅读 · 2 评论 -
vue3+element plus 项目运行过程中浏览器报Out of Memory
vue 项目运行过程中浏览器报Out of Memory原创 2022-08-15 10:51:40 · 4427 阅读 · 0 评论 -
vue 数字滚动count-to插件,支持小数(包含vue3,网上整理)
vue3npm install vue3-count-to --save<count-to :startVal="0" :endVal="3000.22" :decimals="2" :duration="3000"></count-to>import { CountTo } from 'vue3-count-to';components: { CountTo },参考地址:https://github.com/xiaofan9/v...原创 2021-12-08 11:53:06 · 16627 阅读 · 0 评论 -
vuecli4 版本升级和遇到的一些问题
比如我现在的vuecli版本是4.5.6当我想要升级的时候,发现我不管如何执行下面的操作,等最终查看版本的时候还是4.5.6// 卸载npm uninstall vue-cli -g// 重新安装npm install -g @vue/cli// 升级npm update -g @vue/cli经过网上查阅相关资料,并测试之后发现,你要先输入命令 where vue然后删除这两个旧的,不要删除错了,接着再输入指令 vue -V,就可以了顺便提一下...原创 2021-08-13 11:50:55 · 551 阅读 · 0 评论 -
vue-devtools 清除Vuex中的state值,浏览器清空state值
前提:你的浏览器已经安装vue-devtools工具场景:当你做了很多项目的时候,总会有些多出来的state值是无用的,如果不删除,state下的值会越来越多(不管有用的还是没用的值)。这样很不好,在浏览器中又不能直接删除,网上找了一堆,结果全是没用的,也是醉了,所有就自己写了一个方法清空掉所有的state值。1、假设我要清除state下的所有值2、 添加mutations中的方法//模拟数据state: { includeList: [], oneNavCur:0,原创 2021-03-23 16:41:21 · 3756 阅读 · 0 评论 -
element-ui 关闭控制台async-validator验证警告
1、在node_modules文件夹中找到async-validator文件夹中的es下的util.js文件,整个的路径:node_modules >async-validator >es >util.js2、注释util.js中的输出日志,注释掉即可3、测试,已经没有async-validator验证警告输出了...原创 2021-02-22 10:21:02 · 4010 阅读 · 2 评论 -
vue TypeError: Cannot read property ‘tapPromise‘ of undefined
原因是因为"compression-webpack-plugin"这个版本高了,得降低点版本1、首先得先卸载npm uninstall compression-webpack-plugin2、然后装个第一点的版本,6.1.1就可以了npm i -D compression-webpack-plugin@6.1.13、重新打包- npm run build...原创 2021-01-05 17:59:57 · 6458 阅读 · 0 评论 -
vue vuex+keep-alive进阶用法(灵活缓存页面,主要是移动端)
注意:每个页面都要添加name,name:"页面名称',不然不起作用1、在App.vue中,编写如下代码<template> <div id="app"> <!-- include 需要缓存的组件 --> <keep-alive :include="includeList"> <router-view /> </keep-alive> &原创 2020-12-18 17:29:32 · 720 阅读 · 2 评论 -
uniapp request请求封装包含token兼容多端,简单易用
1、首先我们在新建好的uniapp项目中新建一个文件夹common,再建一个request.js文件2. 在request.js放入以下代码var apiUrl = ''; //放入后台接口的url// #ifdef H5var baseUrl = '';if (process.env.NODE_ENV === 'development') { //本地环境,即开发环境 baseUrl = '/api'} else { //线上环境 baseUrl = apiUrl}/原创 2020-12-09 10:49:17 · 10088 阅读 · 10 评论 -
vue js银行卡号处理
前言:参考网上的资料和自己整理了下,参考的网址现在找不到了。1、在项目中新建utils.js文件2、写入代码/** * 保留前后四位 中间每4个*会有一个空格 6212 **** **** *** 0222 * @param {value} 传入数据 */const bankCard = (value) => { if (value && value.length > 8) { return `${value.substring(0, 4)} $原创 2020-11-14 09:39:56 · 1078 阅读 · 0 评论 -
js正则验证身份证号
/** * 验证身份证格式 */const testCard = text => { var idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/; return idcardReg.test(text)}//使用var idcard = 'XXXXX.原创 2020-11-14 09:32:17 · 2070 阅读 · 0 评论 -
vue 拨打电话
亲测有效!bindUrl(tel) { //tel为手机号码参数 window.location.href = `tel://${tel}`;},原创 2020-10-17 08:46:47 · 621 阅读 · 0 评论 -
vue keep-alive应用场景及如何使用
一、应用场景:在开发中经常有从列表跳到详情页,然后返回详情页的时候需要缓存列表页的原来数据以及滚动位置,这个时候就需要保存状态,要缓存状态。概括来讲:1、列表页面 ——进入详情页 —— 后退到列表页(缓存列表页的原来数据以及滚动位置)2、重新进入列表页面,获取最新的数据二、如何使用在vue2.1.0版本之后的使用方法1、创建router实例的时候加上scrollBehavior方法//在router中的index.jsconst router = new VueRout.原创 2020-07-16 17:45:56 · 6972 阅读 · 0 评论 -
vue ios上vuex刷新丢失问题以及beforeunload事件失效问题
原因:IOS是卸载了onunload和beforeunload事件,改为pagehide代替APP.vue中修改为var isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (isiOS) { //在页面刷新时将vuex里的信息保存到缓存里 window.addEventListener("pagehide", () =>原创 2020-07-10 10:28:39 · 1613 阅读 · 0 评论 -
微信小程序 引入vant Weapp组件库的问题及处理方式
1、首先初始化并安装,记住按照这个顺序来,不要错了npm init npm install --productionnpm i vant-weapp -S --production2、在小程序的本地设置勾选使用npm3、 在小程序工具--构建npm4、构建成功后会出现miniprogram_npm文件夹5、引用vant组件,此时要注意一点如果你是通过下载源代码的方式使用 @vant/weapp,请将路径修改为项目中 @vant/weapp 所在的目录,“@vant.原创 2020-06-26 16:38:09 · 8055 阅读 · 2 评论 -
vue axios request headers 出现cookie自动叠加现象,造成报400页面
情况如下: 在当前页面重复请求cookie越来越长了...解决办法:我遇到的这个问题是因为后台在请求响应头requets response 中设置了 set-cookie,让后台不要隐藏这个东西,换成redis,然后就没有出现cookie叠加现象了。具体原因我也不知道是什么情况,有知道的朋友希望说明下...原创 2020-06-23 11:04:09 · 1021 阅读 · 0 评论 -
axios 请求超时处理方法
main.jsimport Axios from 'axios'Axios.defaults.timeout = 10000;//设置超时时间,单位毫秒Axios.defaults.retry = 3; //设置全局请求次数Axios.defaults.retryDelay = 1000;//设置全局请求间隙// http 响应拦截器Axios.interceptors.response.use((response) => { var token = response.he原创 2020-06-23 09:28:20 · 21410 阅读 · 1 评论 -
js 富文本转义及反转义(包含vue版本的)
//js//富文本反转义htmlfunction escape2Html(str){ var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' }; return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) { return arrEntities[t]; });}//富文本转义h.原创 2020-06-11 15:43:17 · 4575 阅读 · 1 评论 -
IOS SyntaxError: Invalid regular expression: invalid group specifier name
如果正则表达式中包含零宽断言的话 , 在安卓手机上正常 , 但是在ios上会报以下错误Info Warn Error SyntaxError: Invalid regular expression: invalid group specifier name常用零宽断言:?<=、?<!、?!、?=例如:只显示姓名开头第一个字(正则),格式:张**//只显示姓名开头第一个字data.replace(/(?<=.)./g, '*')这种写法在安卓是正常的,IOS就不行原创 2020-06-04 14:36:58 · 7631 阅读 · 4 评论 -
vue axios请求和响应拦截器
这里以储存后台返回来的Authorization,然后本地永久储存为例第一步:通过登录接口后获取返回回来的token值,然后本地储存,localStorage.setItem('token', res.data.result.Authorization)第二步:main.jsimport Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'i原创 2020-05-29 14:18:40 · 1409 阅读 · 0 评论 -
js 正则替换隐藏部分身份证或手机号以及隐藏部分名字
1、手机号隐藏中间4位var phone = "18200002111";phone.replace(/^(\d{3})\d+(\d{4})$/, "$1****$2");输出结果:2、身份证隐藏中间数字var idcard = '530026222211032101';idcard.replace(/^(\d{6})\d+(\d{4})$/, "$1******$2");输出结果:3、只显示姓名最后一位 var name = '张三'; name.rep...原创 2020-05-21 13:46:19 · 8659 阅读 · 2 评论 -
vue weixin-js-sdk进行微信分享
第一步:安装weixin-js-sdk npm install weixin-js-sdk第二步:在assets文件下新建个common文件夹,然后再新建个utils.js文件import wx from "weixin-js-sdk";/** 微信分享* 获取微信加签信息* @param{data}:获取的微信加签* @param{shareData}:分享配置参数*/export const wexinShare = (data, shareData) =&...原创 2020-05-09 18:00:22 · 2439 阅读 · 1 评论 -
vue cli3/cli4 vant-ui样式出不来的问题
第一步:先检查是否成功安装vant,在package.json中查看没有安装的有两种方法:1、npmnpm i vant -Snpm i babel-plugin-import -D2、终端-命令行,输入vue ui,打开图形化界面,选择依赖安装第二步 :检查babel.config.js重点第三步:vue.config.js,检查有没有...原创 2020-04-16 15:27:58 · 3651 阅读 · 6 评论 -
vuex状态刷新后丢失问题兼容IOS
这个是借鉴于网上的资料,然后整理过来的App.vue:created() { //在页面加载时读取缓存里的状态信息,info这个值自定义 if (sessionStorage.getItem("info")) { this.$store.replaceState(Object.assign({}, this.$store.state...原创 2020-04-16 10:40:47 · 525 阅读 · 0 评论 -
vue qrcode生成二维码 并拼装url参数
因笔者需要用到动态二维码绑定关系这一项,故参考网上许多资料最终整理如下文档第一步:npm i qrcode --save第二步:创建一个vue文件,用于放置你的二维码<template> <div> <div> <canvas id="canvas"></ca...原创 2020-03-31 16:49:23 · 4542 阅读 · 1 评论 -
vue AES加密(超详细)
第一步://安装npm install crypto-js --save-dev第二步:在src目录下新建个放公用js文件夹(common),再建一个AES.js文件,例如:第三步:在AES.js中填写如下代码import CryptoJS from 'crypto-js';export default { //随机生成指定数量的16进制key ge...原创 2020-03-28 11:18:44 · 36964 阅读 · 2 评论 -
vue DES加密(超详细)
第一步://安装npm install crypto-js --save-dev第二步:在src目录下新建个放公用js文件夹,例如第三步:在DES.js中填写如下代码import cryptoJs from 'crypto-js';//随机生成指定数量的16进制keyexport const generatekey = (num) => { let l...原创 2020-03-28 10:58:49 · 8373 阅读 · 1 评论 -
vue生成随机订单号
1、新建一个js文件,例如命名utils.js,把下面/** * 获取当前时间,为订单号提供 * 格式YYYYMMDDHHMMSS */export const getDateNums = (date) => { const year = date.getFullYear() const month = date.getMonth() + 1 const day = d...原创 2020-03-13 11:11:01 · 3546 阅读 · 0 评论 -
vue 获取微信定位经纬度,并调用高德地图解析出详细地址
第一步:安装weixin-js-sdk,命令:npm i -S weixin-js-sdk 或者 npm install weixin-js-sdk第二步:在需要的地方引用:import wx from "weixin-js-sdk";第三步:简单的封装了个获取地址方法,并暴露出来/** 微信获取地址* 获取微信加签信息* @param{data}:获取的微信加签* @...原创 2020-03-13 10:21:05 · 3913 阅读 · 1 评论 -
vue安装和配置的几样,以及更换npm的源
1、node.js 下载链接:https://nodejs.org/zh-cn/download/2、安装vue脚手架 命令:npm install -g vue-cli3、查看vue版本:vue -V 查看node版本:node -v 查看npm版本:npm -v4、安装vuex 指导文档:https://www.jianshu.com/p/5870bc825a...原创 2020-03-10 11:43:12 · 2938 阅读 · 1 评论 -
vue设置页面背景色
mounted() { document.querySelector('body').setAttribute('style', 'background-color:#f6f6f6') }, beforeDestroy() { document.querySelector('body').removeAttribute('style') ...原创 2020-03-04 13:55:07 · 13887 阅读 · 1 评论 -
vue vant的Area 省市区选择使用
1、引入省市区跟弹出层组件2、在src文件下重新新建个common文件,新建area.js,里面放入area.json数据,完整的数据area.json3、在页面中调用<template> <div> <van-field readonly required clickable label=...原创 2020-01-16 14:53:15 · 10932 阅读 · 6 评论 -
vue 微信登录(使用了vant)
首先写这篇文章是为了帮助更多需要帮助的人,笔者这边就直接给大家上传代码以及步骤,原理那些大家自行百度。前提:大家首先要申请好一个公众号,以及创建和配置好vue项目和axios,此次笔者用到的Vue组件库为vant,(这个安装大家自行百度哈,或者看vant官网进行安装),顺便说下次项目用的路由模式为vue-router 默认 hash 模式,而不是History 模式。History 模式需要修...原创 2020-01-14 18:19:28 · 5018 阅读 · 8 评论 -
vue或JQ 通过传入指定日期获取一周的日期时间
我这个也是参考了一些网上的资料整理过来的。vue:utils.js:(建立公共JS文件)//获取周一至周五,到周日的话i=> 5变为7export const getDataArea = (currentTime) => { var currentDate = new Date(currentTime) var timesStamp = currentDate.ge...原创 2020-01-11 16:09:33 · 1673 阅读 · 0 评论 -
vue 函数防抖与节流
这两个函数也是自己在网上找了和参考一些资料整理而来的,具体的原网址找不到了,我就在这里做个备份,方便大家日后使用utils.js(这个是自己创的一个公共的js文件)/** * 函数防抖 (只执行最后一次点击)多用于频繁点击和搜索框输入补全 * @param fn 要使用的防抖的函数 * @param delay 防抖时间 * @returns {Function} */exp...原创 2020-01-11 09:23:50 · 482 阅读 · 1 评论 -
vue封装的一些函数
因项目要用到一些常用的函数,故简单的封装了些函数,方便自己以后调用把utils.js://根据数组中字段排序,从小到大exportconstcompare=(property)=>{returnfunction(a,b){varvalue1=a[property];varvalue2=b[property];...原创 2020-01-10 17:59:24 · 1215 阅读 · 1 评论