- 博客(28)
- 收藏
- 关注
RSS订阅原创 解决npm install报错 npm ERR! gyp ERR! cwd D:\Projec\xxx\node_modules\node-sass （node-sass版本问题）
node-sass版本不兼容，比较老。node-sass 需要 node-gyp安装时需要进行转译所以可能会出现各种按安装问题。如果不是维护老项目不建议再使用。直接用sass（是一个纯 js 的 npm 包）替换掉node-sass。卸载 node-sass ，安装 sass，项目全局搜索 /deep/ , 把 /deep/ 替换为 ::v-deep。1.卸载 node-sass：npm uninstall node-sass。2.安装 sass：npm install sass --save-dev。
2023-07-04 10:48:41
4920
原创 JavaScript中解构赋值
写项目中经常会对后端传来得数据做提取，赋值，创建数据结构等。传统赋值模式：// 后端数据data:{name:'lily',age:18,gender:'woman'}let name = data.namelet age = data.agelet gender = data.gender// 利用解构赋值let {name,age,gender} = data定义ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。1.集合
2022-05-23 11:08:27
452
原创 vue项目中element-tabel自动计算高度
本项目是vue2，使用mixin混入方法计算出当前屏幕可供表格展示的高度。：页面上布局是头部-面包屑，中间-表格，底部-分页组件。需要使表格高度需要自适应屏幕。
2022-05-11 16:15:05
2378
原创 Cannot read property ‘resetFields‘ of undefined
使用element做管理系统时，新增和编辑弹框都是用的同一个页面。点击新增时就一直报错‘Cannot read property ‘resetFields’ of undefined…’**原因1：**mouted加载table数据以后，隐藏的弹出框并没有编译渲染进dom里面。解决：// 清表单的方法中，使用this.$nextTick-更新视图之后回调事件 resetForm(formName) { this.$nextTick(()=>{
2022-05-09 14:05:32
229
原创 element中el-upload手动上传文件+contentType是multipart/form-data+接口封装
效果图，点击上传按钮选中文件，点击确认后调后端接口// actiond地址是必填，http-request是自定义调接口覆盖默认的上传行为，accept为接收文件得类型<template> <div> <el-upload ref="upfile" style="display: inline;margin:0 10px 0 10px" action="#" :http-request="submitU
2022-04-11 16:55:36
3970
原创 element中table表格动态合并行列
思路：element中el-tabel有提供span-method方法合并行或者列，可以参考下element文档（https://element.eleme.cn/#/zh-CN/component/table）。所以我们想办法构造每条数据的row，col合并的数量就行。table代码<el-table ref="table" :data="list" style="width: 100%;" :span-method="objectSpanMeth
2022-04-01 17:06:27
2832
2
原创 vue中样式穿透的方法
通过>>>穿透scoped<style scoped> 外层类名>>>第三方组件类名{ width:50px; ... }</style>2.less预处理器：/deep/<style lang='less' scoped> /deep/ 第三方组件类名{ width:50px; ... }</style>scss预处理器：::v-deep.
2022-03-02 17:01:02
410
原创 VUE中computed的方法携带参数
在element框架的table：后端返回的数据中参数status的值需展示多种不同的状态类型。则可以computed中定义方法，调用时传参即可（闭包）。<el-table ref="table" v-loading="listLoading" :data="list" style="width: 100%;"> <el-table-column align="center" min-width="90"> <template slot
2022-02-28 21:19:25
2167
原创 el-select下拉框可输入
element-ui中下拉框可输入常用得有两种方法1.@blur方法：输入内容会去匹配选择项，没匹配中清空输入框<el-form-item :label="firstClsf" prop="firstClsf"> <el-select style="width:100%" v-model="caseList.firstClsf" @blur="selectBlur" clearable filte
2022-01-26 17:24:54
4586
1
原创 element中tabel+v-for动态循环多个列
接手之前后端做的vue项目，里面很多tabel页面除了具体的列名其他的逻辑功能，展示都是一样的。所以自己做了优化：根据后端传的数据动态展示不同的列。<template> <div> <el-table :data="list" style="width: 100%;"> <el-table-column v-for="(item, index) in tableHeader"
2022-01-15 17:24:53
1285
原创 vue中修改数据触发视图更新方法
很多时候直接去修改数据，然鹅发现修改后页面并没有发生变化。是因为vue中不能检测数组的添加或者删除。以下方法可更新视图：1.Vue.setthis.$set(objName, keyOfItem, newvalue)2.Vue.deletethis.$delete(objName, keyOfItem)3.vue提供的变异数组方法push()pop()shift()unshift()splice()sort()reverse()...
2022-01-05 17:32:53
1335
原创 修改firefox浏览器滚动条的样式
最近做了一个网站的项目，使用原生的滚动条。ie和谷歌都显示的好好的，火狐的滚动条样式没有生效。原因：火狐浏览器没有提供原生滚动条的方法和属性。后来浏览器升级之后提供了部分可以修改样式的属性(属性较多，我就不一一举例了)。只在火狐中项目原生滚动条太粗，挡住了输入框。动其他的css又会影响别的浏览器样式。所以我设置了火狐滚动的宽度.contanner { width: 375px; overflow-y: scroll; overflow-x: hidden; height: 450px; sc
2022-01-04 16:24:09
7074
4
原创 js中数组遍历方法大全
1.forEachlet tempArr = ['aa','bb','cc'];tempArr.forEach((item,index) => { ...//item: aa/bb/cc index:0/1/2});2.map（适用于键值对存取）let testData = [{Name: 'hk', age: 18, score: 100}];let testArr = testData.map(v => { return { label: v.Name, value
2021-12-08 14:43:29
912
原创 js中解决object数组对象值、址指向同一个
调接口获取数据的时候，经常会遇见返回的数据类型是数组对象集合。而需要循环初始化多个相同的数据集合，会出现改一个集合的内容。其他的集合也会改变。addNewData(index, row) { let data = [{name: 'ss', age: 18},{name: 'aq', age: 90}]; this.temp1 = data; this.temp2 = data; this.temp1 = [{name: '小芳', age: 22}]; //this.temp2的值也是[{n
2021-12-07 17:10:53
870
1
原创 APP中：vue-h5项目监听从别的项目页面返回进行刷新
很多项目是内嵌在app中的。如在一个卡券列表页面，点击了领券跳转。跳转到领券页面领取了卡券，点击返回到卡券列表的时候需要刷新页面。重新获取数据。1.将监听放在主页面window.postEvent = (res) => { const pathName = this.$route.name let routesArr = ['home', 'xx', 'xx', 'xx'] if (res.eventType === 'appear' &&a
2021-12-01 18:07:51
1853
原创 js下载文件原生方法兼容ie，主流浏览器
废话不多说，直接上代码。downloadFile(url) { let xhr = new XMLHttpRequst(); xhr.open('GET', url); //url是后端给的下载文件地址 xhr.responseType = 'blob'; xhr.onload = () => { let content = xhr.response; let blob = new Blob([content]); let file= new Blob([blob ], {typ
2021-11-25 17:39:06
637
原创 vue h5页面内嵌小程序解决监听h5页面返回事件
很多公司的项目为了减小重复的开发量。会让内嵌的app中的h5页面同时适配小程序。很多时候需要解决小程序中h5页面跳转别的页面再回来做一些操作。下面介绍监听返回的方法。1.在vue项目中引入weixin-js-sdk，然后在main.js或者需要用到的页面引入weixin-js-sdkimport wx from ‘weixin-js-sdk’2.将跳转方式改成新打开一个webview页面：下面是做成一个公用的方法openWebviewPage(newUrl) { // 新打开一个webview页面
2021-05-20 17:07:24
2609
原创 js中的基本类型和引用类型的复制值行为（值内存指向）
ECMAScript 变量可能包含两种不同数据类型的值:基本类型值和引用类型值。基本类型值指的是 简单的数据段，而引用类型值指那些可能由多个值构成的对象。在将一个值赋给变量时，解析器必须确定这个值是基本类型值还是引用类型值。5 种基本数据类型:Undefined、Null、Boolean、Number 和 String。这 5 种基本数据类型是按值访问 的，因为可以操作保存在变量中的实际的值。引用类型的值是保存在内存中的对象。与其他语言不同，JavaScript 不允许直接访问内存中的位置， 也就是说不
2021-05-20 15:33:40
220
原创 vue中解决滑动组件亲测好用的防抖插件-Lodash（点击一次元素，元素触发多次事件问题,带参数）
公司有个vue项目其中的滑动组件是cube-ui，这个组件已经没有人维护了。现在线上的app出现了点击一次触发n次的bug。使用过@click.once但是这个只会执行一次，返回到我的页面的时候再次点击就失效了不符合需求。@click.stop，@click.prevent解决冒泡，默认事件也不符合。查看过了绑定元素频繁切换tab的时候是创建了多个一样的元素，所以点击一次的时候是同时触发了多个一样的元素。最后用了一个防抖函数封装的插件。官方文档地址：https://www.lodashjs.com/doc
2021-05-12 14:32:01
593
原创 js最全：JavaScript中的执行环境以及作用域
一。js中的执行环境概念：执行环境是js中最重要的一个概念。它定义了变量或函数有权访问其他的数据，决定了各自的行为。每个执行环境中都有一个与之有关的变量对象，变量对象中包含了执行环境中定义的所有变量和函数。类型：全局和局部。根据ECMAScript实现所在的宿主环境不同，执行环境的对象也不同。web浏览器中window对象是全局执行环境。全局变量和函数都是作为window对象的属性和方法创建的。某个环境中所有代码执行后，该环境就会销毁，其里面所有定义的变量和函数定义也销毁（全局执行环境直到退出应用程序才
2021-05-12 10:39:27
433
原创 笔记2-从url输入到页面加载过程分析+性能瓶颈点-服务端数据处理阶段篇
服务端数据处理阶段的瓶颈点服务端数据处理阶段指的是WebServer接收到请求后，从数据储存层到数据，再返回给前端的过程。具体说，服务端接收到http请求后，会做一些参数处理以及权限校验。校验完成后，会将请求参数发送到数据存储服务。然后服务端程序会从数据存储中取到数据，进行数据加工聚合处理，最后再通过jsonp或axios接口返回给前端。这个瓶颈点就在于是否做个数据缓存处理，是否做了Gip压缩，以及是否重定向。现在重点说一下数据缓存和重定向两个瓶颈点。数据缓存：...
2021-04-26 14:41:57
95
原创 笔记1-从url输入到页面加载过程分析+性能瓶颈点-客户端篇
在工作期间有接一个卡券的项目，该项目经历过多个开发同事的接手。逻辑，写法，编程标准都不一样甚至连取名变量，方法等注释都没有。接手之后经常接到各种客诉：进入之后加载时间过长，白屏，列表滑动卡顿…在解决缩短首屏加载过程时，精简了代码，合并了请求资源，对图片尺寸也压缩了。但是真机运行的时候首屏时间还是没有降下来。后来请教过前辈，查阅过相关的资料才得以解决。想要对web前端进行性能优化很重要的一点就是了解页面加载的整个过程。通过整个成功，我们就可以找到其中影响性能的关键点，瓶颈点，才能有效的提升性能。当输入u
2021-04-21 16:05:31
108
原创 cube-ui自带的laoding组件现拿现用
cube-ui组件也被叫做滴滴ui组件，是在better-scroll的基础上进行封装的滑动组件。现在就分享它自带的loading组件。<template> <div class="loading-conter"> <div class="before-trigger show-Loading"> <cube-loading></cube-loading> </div>
2021-02-04 15:58:02
396
原创 JavaScript基础之5种变量类型
前语：ECMAScript 标准中的变量是松散型的（可以保存任何类型的数据）。申明变量：var（操作符） name（变量名）;申明变量赋值：var（操作符） name（变量名）= ""范例：var name = "lily";变量name中就保存了一个字符串"lily"。1.undefined类型undefined类型只有一个值：特殊的undefined-未定义。在任何只申明了变量没有赋值的时候该变量的值默认就是undefined。var age; // age=undefine
2021-02-04 15:43:54
1259
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人