- 博客(41)
- 收藏
- 关注
原创 rem是什么
rem 是一个长度单位px,绝对长度单位,最常用em,相对长度单位 ,相对于父元素,不常用rem,相对长度单位,相对于根元素,常用语响应式布局
2020-07-29 09:48:50
3899
原创 line-height如何继承
body{ font-size:20px; // line-height : 30px; (p元素line-height:直接继承30px) // line-height : 1.5; (p元素line-height:16乘1.5 = 24px) // line-height:200% (p元素linehgiht:20 乘 200% = 40px)}p{ font-size:16px }写具体数值,如30px,直接继承该值写比例,如2或1.5,则继承该比例写百分比,如200
2020-07-28 15:24:40
358
原创 网页视口尺寸
window.screen.height (屏幕高度)window.innerHeight (网页视口高度)document.body.clientHeight (body高度)
2020-07-28 14:58:55
302
原创 vue中使用过滤器filters的this为undefined
vue中的过滤器更偏向于对文本数据的转化,而不能依赖this上下文,如果需要使用到上下文this我们应该使用computed计算属性的或者一个method方法
2020-07-16 16:07:11
1577
原创 css文本超出省略号
单行超出 (记得设置宽度)overflow: hidden;text-overflow: ellipsis;white-space: nowrap;多行后超出 (记得设置高度) display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp:
2020-07-13 14:44:57
161
原创 JS获取字段在数组内的下标
function getArrayIndex(arr, obj) { let i = arr.length while (i--) { if (arr[i] === obj) { return i } } return -1 }
2020-07-11 11:21:35
1120
原创 uniapp mescroll-uni 下拉刷新 上拉加载
<template> <view class="scroll-container"> <mescroll-uni class="scroll" :fixed="false" :down="downOption" :up="upOption" @down="handleRefresh" @up="handleLoadMore" @init="mescrollInit" >
2020-07-08 17:02:58
1633
原创 css border边框渐变
.active { background: rgba(255, 138, 36, 0.06); border-left: 10rpx solid; border-radius: 0 12px 12px 0; border-image: linear-gradient(#ffa430 0%, #ff8121 100%) 1 10; }
2020-07-03 09:22:26
739
原创 el-table添加表头颜色
:header-cell-style="{background: ‘#E9EEF5’,color: ‘#000’}"
2020-06-29 17:36:31
3379
原创 el-image onload触发问题
因为缓存原因,所以给返回的图片加上时间戳 + ‘?_=’ + new Date().getTime()
2020-06-29 14:34:22
2524
1
原创 html新窗口打开链接
_blank – 在新窗口中打开链接_parent – 在父窗体中打开链接_self – 在当前窗体打开链接,此为默认值_top – 在当前窗体打开链接,并替换当前的整个窗体(框架页)
2020-05-25 21:37:04
885
原创 Vue如何实现双向数据绑定
Object.defineProperty()此方法直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。 <input type="text" id="a"> <span id="b"></span> <script> var obj = {}; Object.defineProperty(obj,'name',{ set: function(newValue){ .
2020-05-20 14:24:11
218
原创 JS常用继承
原型继承将父类的实例作为子类的原型构造继承将父类的构造函数在子类执行一次,等于是复制父类的实例属性给子类(没用到原型)实例继承为父类实例添加新特性,作为子类实例返回组合继承通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型ES6 使用class extends继承...
2020-05-18 01:26:05
204
原创 防抖节流
防抖:在规定的间隔时间里,只执行最后一次操作,中途有影响,就重新计时。例:电梯开关门const debounce = (func, wait = 100) => { let timer = 0 return function (...args) { if (timer) { console.log("有人进来,重新计时") ...
2020-04-09 16:12:51
123
原创 var、let、const区别,什么是提升
函数提升优先于变量提升,函数提升会把整个函数挪到作用域顶部,变量提升只会把声明挪到作用域顶部var 存在提升,我们能在声明之前使。let、const 因为暂时性死区的原因,不能在声明前使用,否则会报错。var 在全局作用域下声明变量会导致变量挂载在 window 上,let和const不会。let a = 10;console.log(window.a) // undefine...
2020-04-06 15:04:39
202
1
原创 浅拷贝和深拷贝
浅拷贝:拷贝所有的属性值到新的对象中,如果属性值是对象的,拷贝的则是地址。Object.assign(): let p1 = { age : 10, jobs:{ first:'xxx' } } let p2 = Object.assign({} , p1); p1.age = 20; p1.jobs.first = 'zzz'; console.log...
2020-04-05 21:59:32
697
原创 JS XMLHttpRequest
XMLHttpRequest 对象用于在后台与服务器交换数据。var xhr = new XMLHttpRequest()xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText) }}x...
2020-04-03 10:24:22
260
原创 JS事件绑定
var demo = document.getElementById('demo')demo.addEventListener('click', function (event) { // event.preventDefault() // 阻止默认行为 // event.stopPropagation() // 阻止冒泡 console.log('clicked')})...
2020-04-03 09:56:30
202
原创 什么是BFC、可以解决哪些问题
BFC:块级格式化上下文 (Block Fromatting Context)解决的问题:避免外边距折叠避免文字环绕包含浮动元素,让浮动元素不会乱跑
2020-03-23 15:12:49
629
原创 实现水平居中、垂直居中的方法
display: flex;justify-content: center;//控制水平方向的居中(可省略,默认主轴是水平)align-items: center;//控制垂直方向的居中position: absolute;top: 50%;left: 50%;margin-top: -height的一半margin-left: -width的一半position: ab...
2020-03-20 09:48:02
288
原创 ES6模块化
使用命名导出export { a, b, c};import { a, b, c} from 'xxx.js';使用默认导出// module "my-module.js"export default function cube(x) { return x * x * x;}import cube from 'my-module.js';console.log(cube(...
2019-12-23 17:40:39
126
原创 git Failed to connect to xxxxx Timed out
解决办法:git config --global --unset http.proxy
2019-12-11 09:53:55
782
原创 圣杯布局和双飞翼布局
两种布局都是:两侧宽度固定、中间宽度自适应,中间部分在DOM结构上优先,优先渲染。圣杯布局:HTML<!-- 最外层容器 --><div class="container"> <!-- 中间 --> <div class="center">center</div> <!-- 左侧 --> <div ...
2019-12-06 10:39:42
292
原创 flex布局space-between,元素不足时,最后一行左对齐
给父元素加上&:after { content: ""; width:100px;} width 设置为父元素里的,每个子元素的宽度
2019-11-27 13:56:32
1369
原创 [Vue warn]: Invalid prop: type check failed for prop "data". Expected Array, got String.
有些elementUI组件里,要求传入的data必须是什么数据格式,如果为空会报错,只需要在请求回来之前,设为默认初始值即可。
2019-11-19 16:44:25
1685
原创 element el-tree 获取最里层面的子id
<el-tree :data="treeData" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current @check="getHalfCheckEvent" ...
2019-11-01 10:05:26
1898
原创 echarts的y轴文字显示不全、y轴文字与轴之间设置间隔
第一步:grid: { left: "55", containLabel: true},left 容器左侧的距离。containLabel 用于『防止标签溢出』的场景,标签溢出指的是,标签长度动态变化时,可能会溢出容器或者覆盖其他组件。第二步:yAxis:{ offset:50 }对 y轴 进行偏移...
2019-10-25 14:26:10
3707
原创 windows 实用快捷键
Ctrl + W在浏览器中,直接关闭当前浏览页面**Windows + L **直接锁屏**Windows + ++++++(←Backspace 的 左边按键) **放大,放大,再放大!Windows + E直接打开文件资源管理器找文件**Windows + D **直接显示桌面Ctrl + Shift + T浏览器中恢复之前关闭的页面W...
2019-10-24 10:23:22
129
原创 npm install -g, -S, -D, --save, --save -dev
npm install -g 全局安装npm install name -S(npm install name --save) 开发环境 和 生产环境 都会用到在 package-lock.json 的 dependencies 中npm install name -D(npm install name --save -dev) 开发环境用到,生产环境用不到在 package-loc...
2019-10-23 13:49:46
144
原创 前端页面由哪三层构成,分别是什么?作用是什么?
前端页面构成:结构层、表示层、行为层结构层(structural layer):由 HTML 或 XHTML之类的标记语言负责创建。标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息。例如,P标签表达了这样一种语义:“这是一个文本段。`表示层(presentation layer)由 CSS 负责创建。 CSS对“如...
2019-09-04 09:29:36
2567
原创 微信小程序使用switchTab跳转后页面不刷新的问题:
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)...
2019-09-04 09:22:35
754
原创 清除浮动
清除浮动的方法父元素添加overflow:hidden(不推荐)优点:代码简洁缺点:内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素不推荐使用使用after伪元素清除浮动:after{content: “”;display: block;height: 0;clear:both;visibility: hidden;}.clearfix{...
2019-09-04 09:18:55
140
原创 CSS选择器以及优先级
权值:标识当前选择器的重要程度。权值越大优先级越高。`元素选择器 1类选择器 10ID选择器 100内联样式 1000选择器的权值 加到一起,大的优先,权值相同,以后定义为主`优先级(由低到高):在层叠性基础上,如果样式声明冲突(重复)的话,则按照默认的优先级去应用样式`浏览器默认设置样式表(内外部) 就近原则 - 后定义者优先内联方式!important(最高)...
2019-09-04 09:18:18
143
原创 position定位
position的值有哪些?分别是相对于什么定位?staticrelativeabsolutefixedinheritstatic:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。relative:相对于其正常位置进行定位。absolute:如果其父元素设置了定位则根据父元素,如父元素没设置,则根据b...
2019-09-04 09:17:54
138
原创 CSS盒子模型
一个元素的实际计算:content + width + padding + marginbox-sizing: content-box 是W3C盒子模型在标准的盒子模型中,width指content部分的宽度box- sizing: border-box 是IE盒子模型在IE盒子模型中,width指content + padding + border这三个部...
2019-09-04 09:17:18
112
原创 浏览器兼容前缀和浏览器内核
Firefox : -moz-Chrome & Safari : -webkit-Opera : -o-IE : -ms-IE: trident内核Firefox:gecko内核Safari:webkit内核Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核Chrome:Blink(基于webkit,Goole与Ope...
2019-09-04 09:16:44
281
原创 超出元素的文字用3个点代替
overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
2019-09-04 09:12:01
320
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人