- 博客(28)
- 收藏
- 关注
原创 解决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关注的人