- 博客(40)
- 收藏
- 关注
RSS订阅原创 transition+max-height动画收回时卡顿问题
transition+max-height动画收回时卡顿问题例如解决例如.detaile{ max-height: 0; transition: max-height .5s; overflow: hidden; &:hover{ max-height: 1000px; }}假如内容实际高度只有100px，就回出现卡顿。应该是按照动画时间和max-height差值计算。解决max-height和实际高度差不太多就行了。...
2021-05-20 16:02:05
1308
原创 图片懒加载实现
图片懒加载实现原理实现效果图片懒加载的问题面试被问了几次，答了个大概，这次自己实现一下原理data-src<img src="./loading.png" data-src="./1.png">data-src就是一个自己定义的属性，可以通过DOM.getAttribute(‘data-src’) 取到自定义的值。2. data-src存放图片路径，src放loading的图片，然后根据el.getBoundingClientRect() 判断当前图片dom和可视区域的距离来决
2020-11-15 17:07:54
327
1
原创 vue 改变父子组件mounted执行顺序
vue 改变父子组件mounted执行顺序问题简介父子组件生命周期顺序实现父组件mounted之后子组件mounted最后问题简介最近在用vue做Cesium地图相关的东西，有一个需求是这样，一个地图为底图，然后有一个菜单切换不同的业务场景（业务场景都是在地图上做操作，打点，显示一些悬浮框什么的。。。）原来的代码是每一次切换都重新初始化一遍地图，比较耗性能（需要请求大量的地图资源）。于是我想重构以下代码，简单思路就是只初始化一遍地图，业务页当成地图的子组件或者子路由，但是问题就是业务组件（子组件）需要
2020-10-11 21:29:59
3519
5
原创 animation+transform科技感动画效果
效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html,body{
2020-10-06 21:33:40
1316
原创 echarts根据可视化窗口变化改变图表尺寸
echarts根据可视化窗口变化改变图表尺寸echarts改变图标尺寸resize监听窗口大小变化onresize原理代码实现加防抖echarts改变图标尺寸resize官方API监听窗口大小变化onresize官方API原理用onresize监听窗口大小变化，窗口变化后将echarts图大小进行重置（resize）代码实现// echarts实例let bar = this.$echarts.init(document.getElementById('bar'))// 配置项opt
2020-10-03 13:00:20
575
原创 canves移动端模糊问题记录
canves移动端模糊问题记录https://segmentfault.com/a/1190000019007037
2020-09-08 20:51:46
144
原创 vue 数据改变，视图没有更新
vue 数据改变，视图没有更新修改数组中对象的属性时，直接修改不能触发视图更新，要用this.$set(Array, ‘property’, data)
2020-05-26 11:04:14
254
原创 * -!../node_modules/_css-loader@3.5.3@css-loader/dist/cjs.js??ref--8-oneOf-1-1!../node_modules/_vue-
开发环境vuecli4问题描述：使用@import引入.scss文件时报错：原因：@import url('./common.scss');解决：@import './common.scss';tmd Fuck！！！！
2020-05-11 23:32:48
20849
4
原创 css 子元素继承父元素的高度
css 子元素继承父元素的高度现状期望实现1实现2父元素中有a、b两个子元素，a高度为300px，撑开父元素也是300px，此时想让b也是300px。现状期望实现1father:position: relativeb:position: absoluteheight: 100%实现2father:display: flex...
2020-05-08 20:32:33
16167
1
原创 vue 路由懒加载
vue 路由懒加载{ path: '/', name: 'test', component: () => import('./test')},路由懒加载：按需加载路由，加快启动速度，路由切换速度会有影响，在大量路由的项目中可以使用，优化项目启动速度。...
2020-05-07 17:24:27
174
原创 关于tm的this指向问题
为啥用this由于自己比较菜，对为啥要用this的理解就是方便、简洁，可以隐式的传递一个对象的引用，让代码逻辑简洁，方便。this的指向问题误解一：this指向函数自身...
2020-04-26 09:06:20
184
原创 call、apply、bind
call、apply、bindfunction out (age) { console.log(this.name, age)}let person = { name: 'xx'}out.call(person, 15)// xx 15out.apply(person, [15])// xx 15out.bind(person, 15)()// xx 15
2020-04-23 15:58:40
141
原创 js之传递参数
传递参数复制基本类型最近在重新看js高级程序设计，对之查缺补漏，以后每次碰到值得记录的都会发文。在了解参数传递的之前，首先要知道js复制引用类型和基本类型的区别。复制基本类型let a = '1'let b = a...
2020-04-13 23:31:58
651
原创 关于js原型笔记
js原型原型链的查找原则和动态性就近查找原则动态性关于constructor原型链的查找原则和动态性js原型大家都不陌生，但是涉及到原型链有些时候会蒙圈（我本人就是），下面介绍一下我对原型链的理解。就近查找原则对象访问一个属性，假如对象本身没有这个属性，会从原型链的底端向上查找这个属性。// 创建一个‘爷爷’function Ground() {}Ground.prototype =...
2020-04-13 15:20:29
214
原创 vue路由回退
vue路由回退router.push()router.replace()router.go()实现回退最近用vue做app，要实现点击回退按钮返回上一页。首先先介绍一下router.push、router.replace和router.gorouter.push()想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点...
2020-03-03 11:09:04
3358
原创 在vue-cli3中使用jRange
在vue-cli3中使用jRangejRange简介在vue-cli3中使用1.安装jquery2.下载jRange3.mian.js引入jRange4.最后在使用组件中引入jquery，并使用效果jRange简介参考：jRange使用官网地址：http://nitinhayaran.github.io/jRange/demo/git地址：https://github.com/nitinh...
2020-02-18 19:19:19
399
原创 css实现边框内半圆凹槽
实现原理先画一个半圆，利用伪类把半圆放在border上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&...
2020-02-06 17:31:00
6141
原创 js数组把某一项移动到某一位置
let arr = [1,2,3]let item = arr.splice(1, 1) // arr删除2，把2给itemarr.splice(2, 0, item[0]) // 把2添加到arr最后console.log(arr)// [1,3,2]
2020-01-13 17:01:44
11751
原创 es6-对象扩展（二）
es6-对象扩展（二）关于原型Object.setPrototypeOf()关于原型es6添加了__proto__属性来指向原型，__proto__大部分浏览器都部署了这个属性，但是其他环境不一定部署（node），所以es6提供了两种方法来去读和设置原型对象。Object.setPrototypeOf()用于设置对象的原型对象。...
2019-12-12 16:14:13
326
原创 window系统局部安装webpack，运行时报错webpack.ps1解决办法
1.以管理员运行vscode2.get-help set-executionpolicy3.set-executionpolicy remotesigned
2019-12-11 21:27:05
175
原创 js原型
js原型什么是原型构造函数、原型、实例，三者关系实例中属性读取顺序什么是原型一个新创建的函数自身都会带一个prototype属性，这个属性指向这个函数的原型对象，原型对象自带一个constructor属性，这个属性指向这个函数。构造函数、原型、实例，三者关系构造函数的prototype属性指向原型，原型的constructor属性指向构造函数，构造函数通过new操作符创建实例，实例继承原型...
2019-12-10 11:05:08
356
原创 flex-（一）容器的属性
flex-（一）容器的属性flex简介一、基本概念flex简介布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地...
2019-11-19 23:20:49
434
原创 vue-cli打包抽离出配置文件
vue-cli打包抽离出配置文件需求在static中添加配置文件config.js修改index.html需求同一份代码，适应两份需求。解决：打包后抽离出一份配置文件，在部署时通过修改配置文件达到适应不同的需求。在static中添加配置文件config.jsconfig.js打包后不被打包，如图config.js内容window.home={ id: 1 // 首页河南...
2019-11-19 16:02:09
680
原创 es6-对象扩展（一）
对象扩展属性简介表达（一）属性名表达式Object.is()Object.assign()属性简介表达（一）一句话，对象的属性如果是一个变量，那么值就是这个变量代表的值let name = 'uzi';let user = {name};user // {name: "uzi"}// 对于对象中方法也一样let test = { tt() {}};// 等同于let test...
2019-11-13 16:00:35
570
原创 关于iframe添加点击事件问题
iframe添加点击事件假如要实现个功能，头部是下拉框下面是iframe页面，要实现功能为点击iframe下拉框关闭，百度了好久发现在iframe跨域的时候根本没有onclick事件，但是可以换个方法解决，利用document.activeElement（当前获得焦点的元素）来实现此功能，设一个定时器setInterval，不断判断document.activeElement和document....
2019-11-13 12:13:13
1521
原创 vue ie11打包后页面空白
vue打包后不兼容iePromise问题Promise问题ie是个神奇的浏览器不兼容es6，也就不兼容promise。解决方法npm install --save babel-polyfill // 安装babel-polyfill修改配置文件两种方案：第一种： 在main.js中添加import ‘babel-polyfill’import Vue from 'vue'im...
2019-11-12 19:46:56
987
原创 Promise.all执行顺序
Promise.all执行顺序理解栗子理解Promise.all等待所有Promise执行完毕之后，按照放在all中的先后顺序将resolve()返回的数据放在Promise.all的resolve中，说也说不明白，写个栗子吧。。。栗子// 方法a，返回一个Promise对象function a() { return new Promise((r, j) => { setTi...
2019-11-08 11:17:00
8999
1
原创 es6-数组扩展
es6数组扩展扩展运算符Array.from()Array.of()新增数组实例方法copyWithin()find()和findIndex()fill()entries()、keys()和 values()includes()扩展运算符在es6的数组扩展中，扩展运算符是平时应用最多最方便的，扩展运算符（…）可以将一个数据转为用逗号分割的参数序列。let a = [1, 2, 3];con...
2019-11-04 18:49:26
341
原创 联调接口500，后台断点进不去
今天将内网项目迁移到外网，前后端什么都没改，但是接口进来就500。后台打断点也进不去。折腾一会发现我本地ping后台ip都ping不通，已排查发现后台防火墙没有关。。。后台关闭防火墙后，一切正常。还有一点很懵逼，我连后台ip都访问不了，接口不应该404吗，为啥500呢？？？...
2019-10-24 15:42:13
1514
原创 es6-函数扩展
函数默认值+解构赋值默认值：给函数参数添加默认值更加简洁。// ES5 添加默认值function fun (x, y) { y = y || 5;}// ES6 添加默认值function fun (x, y = 5) {}优点：1.带默认值的参数写在最后，可以省略不传。2.更新版本时，可以将默认值参数去掉。参数的默认值还可以是变量function fun (x...
2019-10-24 11:31:00
4030
原创 es6-模板字符串
es5：var name = 'uzi';var str = 'bast adc is'+ name;str // bast adc is uzies6:let name = 'uzi';let str = `bast adc is ${name}`;str // bast adc is uzi;``中放字符串，变量用${}包裹。...
2019-10-23 10:37:06
208
原创 es6-解构赋值
数组解构赋值基本用法let [a, b, c] = [1, 2, 3];a // 1;b // 2;c // 3;-----------------------------------let [a, b, c] = [1, [2, 3], 4];a // 1;b // [2, 3];c // 4;-----------------------------------le...
2019-10-21 15:42:03
849
1
原创 es6-let和const
不存在变量提升必须在声明后使用a; // a is not definedlet a;块级作用域{}中的区域暂时性死区定义：es6明确规定，如果区块中存在let或const命令，则这个区块对这些命令声明的变量从一开始就形成封闭的作用域。只要在声明前使用这些变量就会报错。var a = 555;// 报错function () { a = 666; let a = 777...
2019-10-17 10:29:34
187
原创 解决两个相同的字符串判断不相等问题
今天从后台取来的数据，判断两个字符串是否相等时出现了一个问题，就是两个字符串打印出来明明一样，但就是不想等，查了以后发现：有些特殊字符是不显示的（%20空格）。通过encodeURIComponent（str）操作就能看见解决办法： a.trim() === b.trim() 去除首尾空格...
2019-10-12 11:01:11
5912
1
原创 nvm下载太慢问题解决
由于nvm默认的下载地址http://nodejs.org/dist/是外国外服务器，国内很慢可以使用淘宝的镜像。where nvm 找到nvm安装路径找到settings.txt文件将下面这两句话复制到settings.txt,并保存node_mirror: https://npm.taobao.org/mirrors/node/npm_mirror: https://npm....
2019-10-08 21:26:30
20799
5
原创 关于vue/cli3打包空白页问题解决
前提在vue-cli2中也出现过打包后本地打开index.html空白页问题，解决办法：修改config文件夹中ndex.js文件中assetsPublicPath属性为assetsPublicPath: ‘./’，路由用hash模式环境vue-cli3package.json文件如下：{ "name": "my-temp", "version": "0.1.0", ...
2019-10-02 20:31:03
8068
3
原创 node版本管理器nvm的安装及使用
nvm安装+基本使用安装nvm安装node使用nvm管理node版本项目中可能遇到两个项目node版本不一样，nvm可以安装多个版本node，不同版本随意切换，很是方便。如果已经有安装好的node请下载！！！再往下看。安装nvm下载地址：nvm下载。选择nvm-setup.zip进行下载。解压后进行安装（一直下一步），安装成功后，验证：cmd输入nvm安装node使用nvm ins...
2019-09-30 19:42:32
357
原创 js数组操作
一.判断某一对象是否为数组1.Array.isArray(arr)let arr = [1, 2, 3];Array.isArray(arr); // true2.instanceoflet arr = [1, 2, 3];arr instanceof Array; // true二.添加1.push(value)//在数组末端插入,执行成功返回...
2019-09-25 23:06:05
308
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人