- 博客(33)
- 收藏
- 关注
RSS订阅
原创 使用addRoutes填坑记录
项目需求：根据后台返回动态加载路由表实现方案：在login.vue登录时，获取菜单权限，并存储在localstoragegetMenuByUserId(userId){ loginService.getMenuByUserId({userId:userId}).then(res=>{ if(!res.success){ this.$m...
2019-11-21 16:14:35
1202
原创 【源码解读】VUE2.0和VUE3.0响应式区别？
因为，Reflect与Proxy的get(),set()方法一一对应，一个Proxy的get方法对应一个Reflect.get()方法，如果使用obj.defineProperty方法修改两次同一属性的，就会报错。官方文档解释，Object.defineProperty() 静态方法会直接在一个对象上定义一个新属性，或修改其现有属性，并返回此对象。在VUE2中，也是使用该核心思想，但此方法只可以对对象进行监听，数组Array监听则采用对数组原型方法重写，进行数据拦截。要定义或修改的属性的描述符。
2023-09-08 15:16:14
174
原创 关于消息队列、工作队列的一些理解
const bar = () => console.log('bar')const baz = () => console.log('baz')const foo = () => { console.log('foo') setTimeout(bar, 0) new Promise((resolve, reject) => resolve('应该在 baz 之后、bar 之前') ).then(resolve => console.log(res
2020-11-26 14:31:33
240
原创 vue对给url 中文参数 添加编码解码
// 解码用decodeURIComponent(str)// 编码用encodeURIComponent(str)
2020-08-01 10:22:46
9731
1
原创 浏览器刷新时，导致vue中保存的vuex清空
问题：浏览器刷新时，导致vue中保存的vuex清空解决方案在main.js中加入以下代码：// 刷新保存状态if (sessionStorage.getItem('store')) { store.replaceState( Object.assign({}, store.state, JSON.parse(sessionStorage.getItem('store')) ) ) sessionStorage.removeItem('store'
2020-08-01 09:28:00
380
原创 【uniapp】使用renderJs引入echarts时，渲染次数太多导致页面报错
需求：当切换不同tab页时，数据、lengend及x轴发生变化。问题：如果按照插件官网demo的写法，采用深度监听方式，在获取数据后，将值赋给echarts，将会触发updateEcharts方法：但是需求中，需要不断切换渲染，将会导致渲染过多问题，影响手机性能。解决方案：在app初始化时，写一个赋值option方法，注意将变量存入：在点击切换时，获取数据后，重新执行该方法，触发更新。...
2020-07-27 15:16:13
2001
原创 事件冒泡和捕获区别及应用场景
概念冒泡是从指定对象向上冒泡至不确定对象。例如：点击button时，是从button级div不断冒泡至window层。捕获是从最外层不确定对象，定位至精确对象过程。过程图举个栗子html部分<div id="parentId"> 父级 <div id="childId1">子级1</div> <div id="childId2">子级2</div></div?js部分，注册事件let parent=do
2020-07-23 14:55:48
2319
原创 vue源码学习——vue双向绑定原理
原理vue充分利用了Object.defineProperty()方法，通过发布订阅模式，在对data属性的读写操作，转换成get/set方法，当数据变化时通知视图更新。Object.defineProperty()介绍定义：Object.defineProperty()是直接在对象上定义一个新属性或者可以直接修改一个现有属性，并返回该对象。let demo={}Object.defin...
2020-04-14 16:59:38
146
原创 babel将ES6转换为es5
我们写代码的时候，如果使用的是es6的语法，直接编译，很多浏览器是不支持，我们必须要转成es5.1.初始化项目npm init -y(-y跳过所有输入步骤，直接生成package.json)2.全局安装babelnpm/cnpm install -g babel-cli3.本地安装babelcnpm/npm install --save-dev babel-preset-es20...
2020-04-02 14:28:41
725
原创 Promise和async & await一些知识
Promise基础用法new Promise( function(resolve, reject) {...} /* executor */ )promise是异步请求时会使用，一个promise可能有三种状态：等待（pending）、已完成（fulfilled）、已拒绝（rejected）。在调用时候会传入resolve和reject参数，resolve是状态由pending至fulfi...
2020-04-01 10:26:16
227
原创 登录时，关闭浏览器填充账号密码功能
设置el-input框的autocomplete属性，如果type不等于password，则设置为“off”，password框设置为“new-password”。如果依然不成功，需要手动把原来浏览器保存的密码移出掉，测试成功即可。...
2020-03-12 14:20:51
263
原创 vue实现浏览器记住密码功能，并进行加密存储
前提：将浏览器的自动填充密码功能关闭，如果关闭不了，可参考方案：1、安装加解密插件，并在login.vue中引用：安装： npm install crypto-jslogin.vue引用:import CryptoJS from "crypto-js";2、html部分：<el-form-item style="margin-top:-10px;margin-botto...
2020-03-12 14:11:30
1524
原创 el-table透明化
问题：在el-table透明化时，组件总是有白色底，无法透明化。修改方案：//透明化整体.el-table,.el-table__expanded-cell { background-color: transparent !important;}//透明化行、单元格el-table th,.el-table tr,.el-table td { background-co...
2020-02-20 17:02:23
2526
4
原创 vue-cli 2.0中rem方案适配不同屏幕
1、安装lib-flexible和px2rem。lib-flexible是自适应屏幕，px2rem将px转换成remnpm i lib-flexible -Snpm i px2rem-loader -D2、在main.js引入import 'lib-flexible'3、更改\build\utils.js文件：增加 px2remLoader：const cssLoader = ...
2020-02-14 16:29:46
409
原创 vue实现数据上下滚屏效果
需求：实现实时数据滚屏效果，数据5s请求一次实现：思路：分两种情况：1、数据无溢出，即没有滚动条效果时，不处理滚屏效果2、数据有溢出，处理滚屏效果方案：关键词：scrollTop //当前窗口显示的范围内的顶边的距离，也就是元素滚动条被向下拉动的距离。offsetHeight : //返回元素的高度（包括元素高度、内边距和边框，不包括外边距）scrollHeight ...
2020-01-08 11:24:04
3115
原创 一些动画效果
@keyframes bounceInRight { 0% { margin-left: -15px; opacity: 0; } 60% { margin-left: -1px; opacity: 0.5; } 80% { margin-left: -3px; ...
2020-01-04 11:08:12
126
原创 vue添加液晶字体格式
数字字体样式如下：1、下载字体格式（https://www.dafont.com/theme.php?cat=302&text=0123456789），如下可选择下载数字字体2、下载后，解压后都是.ttf文件，在https://www.fontke.com/tool/fontface/可将字体文件转换成woff2,svg,woff格式等，将下载后的文件解压至项目文件夹中。3、到...
2019-12-27 17:18:36
1867
原创 vue部署遇到的一些问题
1、资源找不到，很多js，css都找不到。修改前台打包文件路径，为相对static路径，：修改config/index.js文件如果elemntui相关图标和字体库丢失，需要配置：buld/utils.js文件中publicPath: ‘…/…/’经过这次部署，大致理解了webpack打包原理，路径生成规则是assetsPublicPath+assetsSubDirectory+fil...
2019-12-24 10:29:21
453
原创 vue+spring Boot+tomcat部署流程
背景：原项目前后台不分离，后来进行产品进行重构，后台使用微服务架构，采用前后台分离开发vue打包上线流程：vue使用npm run build方式进行打包，将dist文件发给后台。后台解压后，将index.html和static放至tomcat中（我是直接在后台本地测试的，直接放在后台服务上），访问路径为：http:XXXX:8005/index.html这样就会直接打开前端index...
2019-12-24 10:06:59
1159
原创 el-table表格最下面的边框线删除
.el-table__row>td { border: none;}.el-table::before { height: 0px;}
2019-12-16 14:02:39
9648
原创 el-tree获取父级及祖先级节点
elementui官方文档中，并未提及怎样获取父级和祖先级节点方式，经过摸索后发现，可通过两种方式实现（推荐第一种）：1、直接在el-tree单击时获取当前节点node，会接收三种参数，分别是当前data节点数据，node当前节点，root根节点数据，我们获取当前node节点即可，通过node.parent可获取父节点数据，祖先级可一层层遍历上去node.parent.parent获取。let...
2019-12-13 13:43:02
17557
原创 el-dropdown-item @click事件无效
<el-dropdown-menu slot="dropdown"> <el-dropdown-item @click.native="viewAccountHandle()">账户信息</el-dropdown-item> <el-dropdown-item @click.native="modifyPwd...
2019-12-09 16:36:31
579
1
原创 echart实现图表渐变色
itemStyle: { normal: { barBorderRadius: [5, 5, 0, 0], color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ ...
2019-12-04 08:43:49
835
原创 常用正则校验
1、固定电话校验let validateTel = (rule, value, callback) => { let telReg = /0\d{2,3}-\d{7,8}/; if (value&&!telReg.test(value)) { callback(new Error("请输入正确格式,例如：025-86970920"))...
2019-11-26 09:23:38
153
原创 addRoutes页面跳转至404问题
404页面路由不要写在静态路由中，这样就会导致动态路由还未加载出来，就跳转。404路由写在动态路由中：outer.addRoutes([{ path: '/page', name: 'page', component: pageBox, children: childTree },{//404 path: ...
2019-11-23 15:49:54
671
原创 this.$refs.ruleForm.validate失效
在使用this.refs.ruleForm.validate过程中，加入了函数校验，函数校验中需要每个if和else都要加入callback()否则this.refs.ruleForm.validate过程中，加入了函数校验，函数校验中需要每个if和else都要加入callback()否则this.refs.ruleForm.validate过程中，加入了函数校验，函数校验中需要每个if和else...
2019-11-22 15:49:34
5502
1
原创 js实现v-loading，不通过组件传值实现
js实现v-loading，不通过组件传值实现第一步：引入import { Loading } from "element-ui";第二步：调用创建this.pageLoading实例this.pageLoading = Loading.service({ target: document.querySelector(".el-dialog"), tex...
2019-11-19 15:18:39
241
原创 修改element-ui的table 在鼠标悬停hover时的高亮颜色
.el-table tbody tr:hover>td { background-color:#ecf5ff!important}
2019-11-15 14:31:37
7962
原创 修改网页图标
1.添加静态网页图标<link rel="icon" type="image/x-icon" href="./static/icon-tab.png" id='dynamic-favicon'/> 注意图片放在static中2、动态请求服务器更改图标changeFavicon(src) { var oldLink = document.getEleme...
2019-10-16 18:00:31
575
原创 vue实现图片上传功能
1、通过new FileReader方式html布局：<div class='dialog-img-input'> <input type="file" id="dialogLogoImgId" name="pic" @change="uploadImg(this)" /> <br/></div> //设置透明度为0...
2019-10-16 17:57:32
1105
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人