- 博客(102)
- 问答 (6)
- 收藏
- 关注
RSS订阅
原创 VUE项目打包优化
打包优化的目的1、项目启动速度，和性能2、必要的清理数据3、减少打包后的体积第一点是核心，第二点呢其实主要是清理console性能优化的主要方向1、去除map文件2、开启CND加速3、代码压缩4、图片压缩5、公共代码抽离6、首屏骨架屏优化7、开启Gzip压缩优化：1、去除.map文件在vue.config.js中添加productionSourceMap: false, //不输出map文件2、开启CDN加速快速查找cdn在vue.config.js中添加//
2021-01-09 14:21:59
533
1
原创 wode项目开发流程(项目开发前配置)
一、搭建vue项目在这里我使用的vue3，因为vue搭建项目方便，体积小，也是现阶段的主流，npm create 项目名二、配置多环境变量因为这个项目从开发到上线需要经历三个阶段：开发、测试、上线。为了方便后面的操作，提前配置环境变量1、package.json 里的 scripts 配置 serve stage build，通过 --mode xxx 来执行不同环境通过 npm run serve 启动本地 , 执行development通过 npm run stage 打包测试 , 执行
2021-01-04 15:42:38
917
原创 Blocked aria-hidden on an element because its descendant retained focus.
在项目开发中，遇到的一个报错。
2025-03-07 14:06:05
3418
3
原创 点击表格的最后一行的下拉框，会出现横向滚动条
el-input__suffix .el-input__suffix-inner { // 解决聚焦的时候会有闪现一下滚动条。
2025-02-19 18:37:12
305
原创 js-base64库在Vue中的应用
工作中，java 开发同事需要将返回的 JSON 对象返回给 “第三方控件”，然后通过第三方控件 返回给web 浏览器，结果出现了乱码，经过定位反复调试，都没有解决该问题，由于“第三方控件”对于开发来说是黑盒，在main.js中引入，再绑定到Vue的prototype上。
2023-02-14 09:43:50
2652
原创 console.log(add(1,2)(3))结果是6
console.log(add(1,2)(3))结果是6let add = function(a,b){ return function(c){ return a+b+c }}console.log(add(1,2)(3))console.log(add(1)(2，3))结果是6let add = function(a){ return function(b,c){ return a+b+c }}console.log(add(
2022-03-15 16:14:03
663
原创 数组、对象扁平化处理
数组扁平化//扁平化function flat(arr) { //验证arr数组中，还有没有深层数组[1,2,[3,4]] const isDeep = arr.some(item => item instanceof Array) if(!isDeep) { return arr } const res = Array.prototype.concat.apply([], arr) return flat(res)//递归拍平}
2022-02-22 19:44:49
454
原创 如何判断两个对象或者数组全相等
如何判断两个对象或者数组全相等function isObject(obj){ return typeof obj === 'object' && obj !== null}function isEqual(obj1, obj2){ if(!isObject(obj1) || !isObject(obj2)) { return obj1 === obj2 } if(obj1 === obj2){ return true
2022-02-22 17:02:54
514
原创 从地址栏获取参数
如何从地址栏获取参数？let params = window.location.search; //地址栏的所有数据 ?username=zhangsan&pwd=123456;let obj = {}; //截取完后存放的对象params.slice(1) //去掉开头的 '？'号 .split('&') //根据"&"分割成数组 .forEach((item) => { let info = item.split('=
2021-11-12 14:13:01
1291
原创 动态设置浏览器的小logo
在app.vue的created中created() { document.title = localStorage.getItem("name") || '智四方'; let faviconurl = localStorage.getItem("logo") || require('./assets/images/1024.png'); //这里可以是动态的获取的favicon的地址 let link = document.querySelector("link[rel*='ic
2021-11-11 17:18:41
980
原创 上传图片时，限制图片大小，尺寸，类型
上代码：<el-upload :before-upload='beforeUpload'> <el-button>上传</el-button></el-upload>upload组件中上传图片之前的钩子：before-uploadmethods: { beforeUpload(file){ const isLt1M = file.size / 1024 / 1024 < 10 const isJPG
2021-11-11 13:50:34
1362
原创 上传文件以及文件上传的时候传参
上代码：:http-request="(file)=>imgUploadLogin(file, '上传的参数')"这是upload组件的上传文件成功时的钩子。methods:{ imgUploadLogin(file, name) { //name就是上传的参数 }}
2021-11-11 11:43:40
1230
原创 Element-UI中的Message弹框，在按钮上方添加一行文字
在项目开发中，遇到了一个需求，就是在Message弹框，在按钮上方添加一行文字如图：this.$confirm('<span>此操作将永久删除该文件, 是否继续?</span><p style="color:red;">删除后消失</p>', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'}).then(() => { this.$messa
2021-11-10 10:24:08
1935
2
原创 vue中，计算两天相差天数
首先在script标签中，定义一个方法function getDaysBetween(dateString1, dateString2) { let startDate = Date.parse(dateString1); let endDate = Date.parse(dateString2); return (startDate - endDate ) / (1 * 24 * 60 * 60 * 1000);}//调用getDaysBetween('2021-08-
2021-08-30 15:46:18
3156
1
原创 vue文件下载或导出文件
来了个新需求，可以下载和导出文件1.请求接口，拿到文件流 {responseType: 'blob'}必传this.$http.post(this.$api.,{},{responseType: 'blob'},true).then(result=>{ })2.用请求回来的result数据创造一个a标签，利用a标签下载const link = document.createElement('a');link.href = window.URL.createObjec
2021-08-11 10:38:19
220
原创 vue表格内部上下切换
今天来了个需求，要去表格内部可以行级切换直接上代码<el-table :data="addTableData" style="width: 100%" border> <el-table-column width="50"> <template slot-scope="scope"> <span @click="goUp(scope.$index)"><i class="el-icon-arrow-up"
2021-07-21 19:28:22
316
原创 Vue使用jsx语法动态渲染表单及验证规则
Vue使用jsx语法动态渲染表单及验证规则调用接口返回的数据是个数组 formListthis.objFormList.formList=res.data.data.formList与后端约定好输入框类型 elementTypeelementType=1 隐藏域elementType=2 ：input文本框elementType=3 ：Textarea文本域elementType=4：Select单选elementType=5：Select多选elementType=6：Checkou
2021-07-21 19:14:08
1237
原创 点击放大图标，放大图片
如何将elementUI中的放大图片的事件修改成点击图标或者按钮点击放大图标，放大图片<span class="addUnderline">模板1 (横向列表) <i class="el-icon-search" @click="onPreview()"></i> <el-image class="my-img" style="width: 0; height: 0" ref="preview
2021-06-29 14:59:28
826
原创 element UI使用表格组件的时候，左侧单选框fixed，滚动到最下边后出现错乱
左侧单选框fixed，滚动到最下边后出现错乱,在这里使用滚动监听的方法this.dom = this.$refs.multiple.bodyWrapperconsole.log(this.dom)this.dom.addEventlistener('scroll',()=>{this$nextTick(()=>{ //滚动高度 let scrollTop = this.dom.scrollTop if(scrollTop > 30){ $('.is-center').c
2021-05-28 11:49:28
303
原创 如何在main.js中调用接口并且访问vuex中的数据
一般情况下，都是在router.beforeEach((to, from, next) => {}中使用。1、调用接口，能在这调用接口的一般都是使用get来获取数据直接 Axios.get(接口).then(res=>{}).catch(err=>{}),就可以调用接口了2、访问vuex中的数据想要获取或操作vuex中的数据，获取数据： id: store.state.id操作数据： store.state.id=res.data.data.id...
2021-05-24 17:39:46
4794
原创 正则匹配邮箱
正则匹配邮箱：//邮箱输入框变化的时候isEmail(e){ console.log(e) var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/; this.email=e.detail.value; if(this.email){ if(reg.test(this.email)){ console.log('邮箱输入正确') }else{ console.log('邮箱输入错误') }
2021-04-28 18:54:04
1035
原创 获取数据后this.$refs.xxx.toggleRowSelection无效
获取数据后在外部加上一个$nextTick即可;this.$nextTick(function () { this.trainPeopleTable.forEach(row=>{ if(this.selectList.indexOf(row.staffId) >= 0){ this.$refs.trainPersonTable.toggleRowSelection(row); } })})原因大概如下：$nextTick 是在下次 DOM 更新循环结
2021-04-19 17:51:27
707
原创 vue表格组件插入图片
一个需求，在vue中，当数据列表没有数据的时候，需要展示一张图片 <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name"
2021-04-13 16:56:56
1705
原创 如何修改element-ui中折叠面板右侧的图标
<el-collapse v-model="activeNames" @change="handleChange"> <el-collapse-item title="一致性 Consistency" name="1"> <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div> <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div&
2021-04-12 17:21:19
6093
9
原创 如何在vue中使用阿里图标库
1.进入阿里图标库网站：http://www.iconfont.cn2.选择想要的图标加入购物车(如果不想以unicode方式使用图标，那直接下载png等格式即可，可以多选几个)3.浏览器右上角进入购物车点击下载代码4.解压后，选择这下图五个文件复制，其它的是demo文件，告诉我们如何使用。5.我在项目的assets目录下新建了个fonts目录来放这五个文件6.打开iconfont.css，为方便，我改了默认的图标变量名，还把图标大小font-size改为24px7.然后在main.j
2021-04-12 17:17:09
1346
原创 vue导出excle表格
1.安装插件cnpm install vue-json-excel2.在main.js中引入import JsonExcel from 'vue-json-excel'Vue.component('downloadExcel', JsonExcel)3.在vue页面中使用<download-excel :data="json_data" :fields="json_fields" name="UserInfo"> <button>点击导出</button&g
2021-04-12 11:51:38
200
原创 Cannot read property ‘data‘ of undefined
如果在写项目中报错 Cannot read property 'data' of undefined如图：那是有可能你复制的时候，把script中export default导出的name属性也复制过来了，所以会报错，修改name属性即可
2021-04-06 17:22:43
8193
1
原创 如何将伪数组转换成数组
假设array为伪数组1.let newArray = [].prototype.slice.call(array)或者let newArray = Array.prototype.clice.call(array)2.let newArray = […array]3.let newArray = Array.from(array)
2021-03-31 19:27:07
125
原创 如何在vue组件中预览pdf文件
1、点击预览，跳转pdf.vue页面，保证pdf.vue页面与登录页面同级，这样可以全屏预览2、pdf.vue<template> <div class="pdf"> <iframe :src="address1" frameborder="0" style="width:100%;height:200%;" border></iframe> <el-button @click="$router.go(-1)">返回<
2021-03-31 19:24:00
517
1
原创 W3C的方法
W3C的方法toUpperCase()把字符串中的小写换成大写，返回值是字符串转换成大写的字符串substr()可在字符串中抽取从 start 下标开始的指定数目的字符。两个参数，第一个参数是开始的下标，第二个参数，抽取的长度exec()用于检索字符串中的正则表达式的匹配。语法：RegExpObject.exec(string)返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。padStart()、padEnd()用于补全字符串长度的功能，如果某个字
2021-03-17 14:59:37
333
原创 css有哪些属性可以继承
一、字体系列属性font-family：字体系列font-weight：字体的粗细font-size：字体的大小font-style：字体的风格二、文本系列属性text-indent: 文本缩进text-align: 文本水平对齐line-height: 行高word-spacing: 单词之间的间距letter-spacing: 中文或者字母之间的间距text-transform: 控制文本大小写color: 文本颜色三、元素可见性visibility: 控制元素显示隐
2021-03-17 11:53:50
343
空空如也
vue表格使用af-table-item
2021-07-31
element中日期选择器的月份选择，如何修改鼠标移入时的颜色
2021-06-01
表格左侧的单选框位置错乱
2021-05-28
node环境运行web项目，运行不起来？
2021-05-25
在本地环境联调好接口，到测试环境报系统繁忙错误
2021-05-21
如何在全局路由守卫（router.beforeEach）中使用this
2021-05-19
TA创建的收藏夹 TA关注的收藏夹
TA关注的人