Vue
葬我以时光
https://jensonhui.top
展开
-
Nuxt.js配置项相关记录总结【路由拦截,环境变量,代理】
nuxt.js 如何配置路由拦截router.beforeEach, router.afterEach;nuxt.js 配置环境变量,动态打包不同环境原创 2022-12-24 18:54:39 · 1738 阅读 · 0 评论 -
html2canvas在 ios13.4微信内置浏览器中无反应,截取不全等问题及解决方案
html2canvas在 ios13.4微信内置浏览器中无反应,截取不全等问题及解决方案原创 2022-11-10 15:17:13 · 1357 阅读 · 0 评论 -
IOS系统iphone6系列机型,CSS滚动穿透失效问题
IOS,iphone6,滚动穿透失效问题及解决方案!!!原创 2022-11-09 19:09:16 · 663 阅读 · 0 评论 -
关于移动端H5获取微信非静默授权被拦截进入【微信快照页】问题及解决方案
网页授权快照bug 网页授权如何判单是否进入了快照模式?微信授权快照问题?微信端链接加了游客访问页,弹授权,依然会进入快照页? vue + H5 + history 拉取微信用户授权原创 2022-09-29 19:00:33 · 3054 阅读 · 5 评论 -
Vue添加全局水印
Vue项目如何为全局添加页面水印原创 2022-09-28 10:27:37 · 1183 阅读 · 0 评论 -
vue2.x + better-scroll2.x 封装列表上滑,下滑行为操作
vue2.x + better-scroll2.x 封装列表上滑,下滑行为操作,安装即用,功能可以扩展,附API地址原创 2022-07-28 15:18:54 · 246 阅读 · 0 评论 -
H5移动端适配神器(lib-flexible)
lib-flexible会自动在html的head中添加一个meta name="viewport"的标签,同时会自动设置html的font-size为屏幕宽度除以10,也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px,此时1rem应该等于75px。假如量的某个元素的宽度是150px,那么在css里面定义这个元素的宽度就是 width: 2rem。但是当分辨率大于某个特定值时,它便不再生效。原创 2022-04-18 15:25:27 · 1435 阅读 · 0 评论 -
sass-loader对应版本配置键名
sass-loader v8-,这个选项名是 "data"sass-loader v8 中,这个选项名是 "prependData"sass-loader v10+,这个选项名是 "additionalData"原创 2022-04-11 17:55:26 · 691 阅读 · 1 评论 -
JS利用策略模式优化多规则表单验证
策略模式 (Strategy Pattern)又称政策模式,其定义一系列的算法,把它们一个个封装起来,并且使它们可以互相替换。封装的策略算法一般是独立的,策略模式根据输入来调整采用哪个算法,Js表单多规则校验,多规则表单校验优化原创 2022-03-23 15:37:58 · 567 阅读 · 0 评论 -
Vue中使用v-for循环input失去焦点问题
Vue中使用v-for循环input时,出现输入一个字符,自动失去光标(一次只能输如一个字符)原创 2022-03-22 15:39:35 · 1902 阅读 · 1 评论 -
vue3.0,useRoute, useRouter 在setup中报undefined | 延时获取问题
使用vue3.0,想通过 useRoute, useRouter来获取路由参数报错undefined; vue3.0获取query、params报错undefined;原创 2022-02-21 10:20:19 · 8128 阅读 · 2 评论 -
JavaScript中Date对象在IOS中的坑及解决方案
JavaScript中Date对象在IOS中的问题;[Vue warn]: Invalid prop: custom validator check failed for prop "minDate";Error in mounted hook: "RangeError: Array size is not a small enough positive integer."原创 2022-01-20 19:12:16 · 3804 阅读 · 0 评论 -
浏览器报wisentPlatformWeb错误
浏览器报wisentPlatformWeb错误原创 2022-01-05 16:20:07 · 196 阅读 · 0 评论 -
wx-jssdk,IOS调用API,config通过了,但是报错[ the permission value is offline verifying ]
Vue-h5调用jssdk, 安卓的微信中h5分享没问题,ios中分享报错the permission value is offline verifying原创 2021-12-30 21:24:09 · 5027 阅读 · 4 评论 -
(微信公众号) | Vue,histroy模式下微信IOS拉取授权,物理返回上一级路由问题
H5微信授权登录后 IOS物理返回键,左滑会回退到微信重定向页面原创 2021-12-17 13:48:09 · 1624 阅读 · 0 评论 -
Vuex持久化 及 重置 Vuex-state
Vuex 刷新数据丢失解决方案,重置 Vuex-state数据原创 2021-11-21 14:28:44 · 650 阅读 · 0 评论 -
H5前端实现移动端手写Canvas签名(支持横竖屏,自定义图片旋转角度)
H5前端实现移动端手写Canvas签名(横竖屏);canvas画布旋转精度丢失;通过window.resize或window.orientation判断横屏竖屏状态;Signature_Pad实现手写签名;javaScript旋转Base64图片并得到新的base64数据;原创 2021-11-20 21:24:45 · 9708 阅读 · 11 评论 -
[ npm install:run script: error ] node-sass@^5.0.0 scripts.postinstall run “node scripts/build.js“
Vue搭建项目时候使用的node-sass(5.0.0) 和 sass-loader(10.1.0),同事服务器安装部署打包时出现上述错误,目测为版本不兼容导致,于是在node-sass Issues中找到了答案: 由于我本地使用node版本为12.0.1,服务器为较新的16.0.1,所以出现了兼容问题解决方案:一:升级node-sass到最新版本即可(在用方案)npm uninstall node-sassnpm install [email protected]二:原创 2021-11-14 22:29:51 · 2820 阅读 · 0 评论 -
Javascript正则表达式,Js正则大全
js常用的正则表达式,正则表达式大全,身份证正则,银行卡正则,手机号正则,中文正则,大小写正则表达式,regex,regexp,特殊字符正则原创 2021-08-17 20:07:51 · 1994 阅读 · 0 评论 -
H5移动端input唤起键盘,遮挡内容解决
vue开发直接@focus,html页面需动态绑定focus事件vue为例:<input type="text" @focus="scrollViewPosition" />scrollViewPosition () { try { if (document.activeElement.tagName === "INPUT") { // 安卓下可能有延迟 setTimeout(() => { document.activ...原创 2021-08-13 17:20:24 · 926 阅读 · 0 评论 -
[Vue warn]: Unhandled error during execution of mounted hook
查看组件里引用的变量是否正确:由于是用的 export const emitter,其他组件里import 时候没有加 { }, 导致报错import emitter from '@/components/xxxxxxx.vue'改成import { emitter } from '@/components/xxxxxxx.vue'...原创 2021-05-19 14:51:13 · 24801 阅读 · 0 评论 -
webstrom 配置 webpack实现 commond + 点击组件跳转文件位置
开发环境: Mac + Vue + Webstromvscode也很好用,但是没办法跳转组件位置,每次都得自己找目录(记得以前有这个功能,但是后来没有了....)webstrom提示很强大,不过有点臃肿,每次启动就占2G的内存;配置方法:(window同理,commond 换成 ctrl 就搞定)Preferences ---> 左上角搜索:webapck --->配置响应的文件路径在vue 2.0中webpack configuratio...原创 2021-03-26 10:45:58 · 235 阅读 · 0 评论 -
IOS内嵌H5页面,返回出现半截白屏问题及解决方案
场景: 【ios内嵌加载h5页面】A页面加载数据 ---> 跳转B页面后返回 --> A页面重新请求加载问题:上述场景步骤后,返回A页面会显示一部分白屏,随意滑动页面后,页面显示完整(android下没事)分析:可能跟ios回弹效果有关系,iOS WebView加载网页触摸白屏bug排查解决:方案一:(未使用)html, body { width: 100%; height: 100%; margin: 0; padding: 0; position:原创 2021-03-22 16:55:49 · 4770 阅读 · 1 评论 -
原生H5如何与Android和IOS通信
Android: 1) window.WebViewJavascriptBridge[methodName](params) 2) window.android.methodNameIOS: 1) window.webkit.messageHandlers[methodName].postMessage(params) // 无法获取原生返回值 2) window.prompt(message, default) // 可以获取到返回值...原创 2021-01-15 23:49:42 · 209 阅读 · 0 评论 -
保姆级教程—前端数据加密(Vue + Axios + AES对称 + RSA非对称)
## 1. 项目背景(需求)为了保证数据传输的安全性,利用AES+RSA混合加密,配合后端实现数据交互加密项目环境:vue + axios## 2. 加密过程(流程) ## 3. 实现过程(代码)AES对称加密我们采用CryptoJS,AES加密支持AES-128、AES-192和AES-256(AES传送门)RSA非对称加密我们采用JSEncrypt,(RSA传送门)第一步:npm安装两个库npm i crypto-js jsencr...原创 2021-01-08 14:16:04 · 3045 阅读 · 6 评论 -
【@vue/cli4】 之【vue.config.js】配置
配置参考 | Vue CLI// vue.config.jsconst path = require('path')const resolve = (dir) = >path.join(__dirname, dir)const CompressionWebpackPlugin = require("compression-webpack-plugin") // 开启gzip压缩, 按需引用const productionGzipExtensions = /\.(js|css|js..转载 2020-11-11 10:40:37 · 199 阅读 · 0 评论 -
Vue通过url参数获取当前页数据,动态改变query参数后,返回无法获取最新数据问题
需求背景:A页面通过query: { sno: xxxx } 跳转到B页面B页面通过接收sno参数,请求获取数据:// 查询商品详情, 在created生命周期调用async getGoodsInfo () { const res = await this.$post(this.$url.goods.gooddetail, { sno: this.$route.query.sno })}B页面底部有相关产品列表,点击产品动态改变当前query中的sno值://原创 2020-10-26 15:13:07 · 1754 阅读 · 0 评论 -
vue + vuex + router + keep-alive实现页面缓存,返回上一级到访问位置
需求背景: 用户访问网站路径为 [ 首页 → 商品详情页 → 首页], 此时需要缓存首页,再次返回到首页,需要展示到上次浏览的锚点位置解决方案:1:router + keep-alive缺陷:一旦缓存后,无法销毁,占用内存大致步骤:1 路由meta中添加一个标识: meta: { title: '', isKeepAlive: true }2 app.vue中使用keep-alive <keep-alive :max="10"> <rou..原创 2020-10-22 15:39:05 · 562 阅读 · 0 评论 -
Vue: couldn‘t fulfill desired order of chunk group(s) pages_user_index
Vue执行npm run build打包,提示warning “couldn't fulfill desired order of chunk group(s) pages_user_index”执行环境:@vue/cli 4.3.1nodev12.16.2提示原因:无法完成所需的块组顺序,也就是组件引入时候的先后顺序不一致解决方案:查看报错信息,找到提示的.vue组件名,全局搜索,把引入的先后顺序调整为一致即可...原创 2020-09-29 15:46:30 · 8426 阅读 · 0 评论 -
Vue项目路由拦截beforeEach实现的动态路由,权限管理~
动态路由,动态即不是写死的,是可变的。我们可以根据自己不同的需求加载不同的路由,做到不同的实现及页面的渲染。动态的路由存储可分为两种,一种是将路由存储到前端。另一种则是将路由存储到数据库。动态路由的使用一般结合角色权限控制一起使用。......原创 2020-08-23 20:58:40 · 2360 阅读 · 3 评论 -
Vue: Redirected when going from “x“ to “x“ via a navigation guard
@vue/cli 4.3.1vue-router: ^3.3.1使用路由重定向做了登录验证后, 报错Error: Redirected from “/login” to “/index” via a navigation guard.解决方案:1. 将 vue-router 版本降到 3.0.7 (没有测试)2. 在 route.js 下粘贴一下代码// 解决Vue-Router升级导致的Uncaught(in promise) navigation guard..原创 2020-07-17 16:31:11 · 19088 阅读 · 18 评论 -
javascript 比较版本号大小
懒人专属 , 没找到合适的, 就自己花时间写了一个, 性能待测试使用场景 : H5APP开发, 需要有版本更新, 此时需要对比版本显示下载状态备注 : 暂时不支持带有ab形式, 如: 1.8.2a, 1.8.3bconst olds = '1.8.1'const news = '1.8.3'let getVersion = { splitVersion : function (oldval, newval) { // 校验是否传入参数 if (!oldval || !newv..原创 2020-05-20 17:15:36 · 747 阅读 · 0 评论 -
vue-cli 页面实现简单的骨架屏
骨架屏简洁简介:骨架屏的作用主要是在网络请求较慢时,提供基础占位,当数据加载完成,恢复数据展示。这样给用户一种很自然的过渡,不会造成页面长时间白屏或者闪烁等情况。 常见的骨架屏实现方案有ssr服务端渲染和prerender两种解决方案插件简介:vue-skeleton-webpack-plugin一个基于 Vue 的 webpack 插件,为单页/多页应用生成骨架屏...原创 2020-05-06 18:13:58 · 300 阅读 · 0 评论 -
windows安装vue桥接工具报错 : mkdir 'C:\Program Files\nodejs\node_modules\.staging'
使用vue3后没有了build文件夹, 所以想用vue2.x的命令初始化webpack, 这里就需要用到vue/cli的桥接工具:安装桥接工具 : ( 此时你的vue版本应该是最新3.x )npm install -g @vue/cli-init奇怪的问题发生了 .....Error: EPERM: operation not permitted, mkdir 'C:\Pr...原创 2020-04-30 14:59:55 · 1700 阅读 · 2 评论 -
Vue在history模式下调用微信分享
微信IOS公众号JSSDK,第一次签名失败,刷新后签名成功(99%的原因是签名URL不一致);H5使用History模式调用微信分享;报错invalid url domain, 检查公众号是否配置域名正确;报错invalid signature, 大部分是路径的问题, 检查下传值路径是否和配置的域名对应原创 2020-04-07 15:44:19 · 791 阅读 · 0 评论 -
VUE移动端仿头条TAB切换
效果跟头条的Tab跟随差不多,暂时没有实现tab始终固定在中间显示 ! 后期优化吧 ~没有找到合适的插件, 采用了VUE的 Transition + v-touch 以及 Animate.css 手写实现 !( 图片是借的, 效果类似)传送门-Gighub =>使用注意:移动端滑动, v-touch 需要进行脚手架依赖安装才可以使用1 . cnpm install...原创 2019-12-20 10:01:18 · 1508 阅读 · 0 评论 -
Vue + element 实现table表格上下移动排序
实现背景,table没有分页,这是前提!!1 . 如果后台有接口,直接改动完把列表list提交给后端2 . 如果没有后台,增加权重字段,提交到后端3 . 上下移动,实际就是操作数组list的顺序index基于element-ui框架:================ data =================== HotTableList:[] =====...原创 2019-11-20 09:57:31 · 2457 阅读 · 0 评论