- 博客(38)
- 收藏
- 关注
原创 value为空时,不显示placeholder
在antd某些组件中,value为空时,显示为空。空在组件里面代表有值,如果想显示placeholder,需要判断当value为空时设置为undefined,就可以显示placeholder了。
2021-02-21 15:21:43
509
原创 控制台警告:Warning:[antd:Form.Item] `children` is array of render props cannot have `name`.
背景:项目中使用 antd 组件的 textarea,由于项目中安装的 antd 版本不支持 textarea 显示输入字数(如15/50),修改项目的 antd 版本可能会导致其他样式发生改变,所以需要手动实现。出现原因在项目中使用 Form.Item 包含了一个 antd 的 textarea 标签和一个 p 标签,且在获取表单元素值时,会得到 undefined ,取不到值。解决办法使用 Form.Item 包裹 textarea 标签,但是样式会发生改变。给 Form.Item 标签添加
2021-02-21 14:51:19
2931
原创 git常用命令
Workspace:工作区Index / Stage:暂存区Repository:仓库区(或本地仓库)Remote:远程仓库git clone 远程仓库地址:clone远程仓库代码git add:把修改的文件添加到暂存区,一次可以add多个文件,用空格隔开(也可以通过 git add . 命令将所有文件添加到暂存区)git commit -m ‘xxx’:把暂存区的所有内容提交到本地仓库(当前分支)git log:显示从最近到最远的提交日志,看到一大串类似2e70fd…的是commit.
2021-02-20 18:41:51
120
原创 数组的includes方法
includes方法属于ES7。与indexOf比较indexOf方法:如果存在要查找的值,会返回索引下标,如果不存在会返回-1;其内部使用的是严格等式运算符(===)进行判断,会导致对NaN的误判(因为NaN === NaN会返回false,如果数组中存在该元素,则无法找到)。例子://indexOf[1, 2, 3].indexOf(2); // 1 [1, 2, 3].indexOf(4); // -1 [1, 2, NaN].indexOf(NaN); // -1//in
2021-02-20 14:09:38
1086
原创 对象的解构赋值
栗子先来看一个解构赋值的例子:let uesr = { name: 'wenyue', age:20,}let { name, age } = user;console.log(name); //wenyueconsole.log(age); //20user.name的值存储到变量name中,user.age的值呗存储到变量age中。设置默认值let uesr = { name: 'wenyue',}let { name, age } = user;console.
2021-02-20 13:15:01
107
原创 React的函数组件与通信
定义函数组件是通过function来定义的,例如:function myComponent(props) { const { name } = props; return <h1>hello,{name}</h1>;}组件通信父组件传值给子组件:父组件:通过 属性名 = 值 的形式传递给子组件数据;子组件:通过 props 参数获取父组件传递过来的参数,可以参考上面的例子。可以通过propTypes对传入的参数进行验证。注:不可以使用this.props直接
2021-02-18 23:01:05
493
原创 react refs
React 中的 Refs 提供了一种访问 render() 方法中创建的 React 元素(或 DOM 节点)的方法。使用场景管理焦点(如文本选择)或处理表单数据。refs可以使用react.createRef()创建,通过ref属性附加到react元素。refs通常在react组件的构造函数中定义,或作为函数组件顶层的变量定义。...
2021-02-18 22:36:41
86
原创 react中的state
stateReact官方建议把State当做是不可变对象,State中包含的所有状态都应该是不可变对象,当State中的某个状态发生变化,我们应该重新创建这个状态对象,而不是直接修改原来的状态。State根据状态类型可以分为三种。数字,字符串,布尔值,null,undefined这五种不可变类型。因为其本身就是不可变的,如果要修改状态的话,直接赋新值就可以,例如:this.setState({ num: 1, string: 'hello', ready: true});数组
2021-02-18 20:28:49
200
原创 react添加多个classname
在react原生动态添加多个classname会报错。解决方案1.使用es6模板字符串:className={`title ${index === this.state.active ? 'active' : ''}`}2.classnames安装:npm install classnames --save使用:import classnames from 'classnames'<div className=classnames({ 'class1': true, //
2021-02-18 19:48:51
791
原创 react中引入图片的方式
平常,我们引用图片的方式: <img src='../../images/xx.png' />但在react中不允许使用这种方式,会报错,可以通过以下方式进行引入:import pic from '../../images/xx.png' <img src={pic} /><img src={require('../../images/xx.png')} />...
2021-02-18 16:31:11
313
原创 移动端自适应布局
vh vw将屏幕分成100份,无论屏幕大小怎么变,份数是不变的,每份所占的百分比不变。媒体查询通过媒体查询,设置断点,性能更高,不同屏幕大小设置不同的根元素的font-size大小(由于设计稿尺寸是二倍的,所以计算时要把二倍算进去),根据根元素font-size大小计算出px对应的rem的值。...
2021-02-18 14:41:00
100
原创 img标签与div元素拼接留白问题
在写样式时,有遇到过一个问题,当我写一个img标签与一个div元素进行拼接时,会有空隙,经查阅,得知是对img标签不够了解。img标签是一个图片标签,用法:<img src="url" title="名称" alt="加载失败显示数据"/>...
2021-02-18 14:33:33
479
原创 es6扩展运算符 (...)
es6的扩展运算符就是取出参数对象中的所有可遍历属性,拷贝到当前对象之中let bar = { a: 1, b: 2 };let baz = { ...bar }; // { a: 1, b: 2 }实际上是通过Object.assign方法实现的。let baz = Object.assign({}, bar); // { a: 1, b: 2 }/*将源对象(source)的所有可枚举属性,复制到目标对象(target)*/如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后
2020-08-27 10:12:40
369
原创 选择器权重问题
例:以下代码中,p 元素是什么颜色?<div class="a b c"> <p class="d">test</p></div><style> .a .d {color: green} p.d {color: yellow} .a.b p.d {color: red} .a p.d {color: black}...
2020-02-20 15:23:40
519
原创 获取url中各个部分的方法
示例:http://www.home.com:8080/windows/location/page.html?ver=1.0&id=timlq#lovewindow.location.host; //返回URL 的主机部分(带端口号),www.home.com:8080window.location.hostname; //返回www.home.com:8080 window.lo...
2020-02-04 19:00:02
862
1
原创 小米前端面试
html5语义化重绘和回流闭包(应用、缺点)响应式bootstrapseo防抖节流和应用http和https(对称加密、非对称加密)水平垂直居中构造函数怎么创建一个对象 ????项目中用过 hotcss :实现原理jquery里的链式调用vue实现双向数据绑定的原理项目中:webpack实现了什么功能浏览器拿到页面后。。。。jsonp懒加载http状态码 301...
2019-09-11 15:49:04
259
原创 360前端面试
数组扁平化实现keep-alivepromise和settimeout执行顺序懒加载实现原理 可视窗口怎么判断定义变量的方法 var let const的区别null和undefined的区别伸缩性布局 flex布局 align-items justify-content闭包的理解 应用场景原型_proto_和prototype区别string为什么是基本数据类型typ...
2019-08-28 11:54:59
303
原创 4种常用的AJAX请求方式
在jQuery中,AJAX常见的请求方式主要有一下4种:1、$.ajax()返回其创建的 XMLHttpRequest 对象 $.ajax() 只有一个参数:参数key/value对象,包含各配置及回调函数信息。如果你指定了dataType选项,那么需要保证服务器返回正确的MIME信息,(如 xml 返回 “text/xml”)。实例:保存数据到服务器,成功时显示信息。$.ajax({...
2019-08-26 21:19:40
605
原创 用友前端面经
==与===的区别float和定位有什么区别BFC因为我的项目中用到了懒加载所以问到了:懒加载实现原理利用数组的api实现队列怎么实现sass怎么选中父元素水平垂直居中html语义化改变this指向的方法箭头函数以及什么时候不可以用怎么判断数组...
2019-08-23 11:09:21
502
原创 Web Sockets 通信
WebSocket API是纯事件驱动的。应用程序代码监听WebSocket对象上的事件,以便处理输入数据和连接状态的改变。WebSocket协议也是事件驱动的。客户端应用程序不需要轮询服务器来得到更新的数据。消息和事件将在服务器发送它们的时候异步到达。//实例化一个WebSocket对象,并传入要连接的决定URLvar socket = new WebSocket("url"); //url...
2019-08-01 21:53:05
148
原创 jq中的contains方法
定义和用法$.contains() 方法用于判断指定元素内是否包含另一个元素。即判断另一个DOM元素是否是指定DOM元素的后代。实例检测一个元素包含在另一个元素之内:$(function () { function funcontain( html ){ document.body.innerHTML += "<br>" + html; ...
2019-08-01 19:12:07
2557
原创 html5跨文档消息传递(可实现跨域)
跨文档消息传送(cross-document messaging),简称XDM,指的是来自不同域的页面间传递消息。XDM的核心是postMessage()方法。目的:向另一个地方传递数据。对于XDM而言,“另一个地方”指的是包含在当前页面中的<iframe>元素,或者由当前页面弹出的窗口。postMessage()方法接收两个参数:一条消息和一个表示消息接收方来自哪个域的字符串。第...
2019-08-01 18:48:06
549
原创 css之边框
什么是边框?边框就是环绕在标签宽度和高度周围的线条边框的属性格式连写(同时设置四条边的边框)border: 边框的宽度 边框的样式 边框的颜色连写(分别设置四条边的边框) border-top: 边框的宽度 边框的样式 边框的颜色; border-right: 边框的宽度 边框的样式 边框的颜色 border-bottom: 边框的宽度 边框的样式 边框的颜色 border-...
2019-07-29 22:47:08
177
原创 css之精灵图
什么是精灵图?css精灵图是一种图像合成技术精灵图作用:可以减少请求次数,以及可以降低服务器的处理压力。如何使用精灵图css精灵图需要配合背景图片和背景定位来使用。需要注意的一点是:在使用定位时,在前端中,x轴水平向右为正,而y轴则是垂直向下为正...
2019-07-29 22:34:04
205
原创 css之background
如果想让一张图片的中心部分总是显示在最中央,可以设置background-position: center top;背景属性的缩写格式background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;注意点:background属性中,任何一个属性都可以被省略关联方式 (默认情况下背景图片会随着滚动条的滚动而滚动)如果不想让背景图片随着滚动条滚动而滚动,可以修改背景图片和滚...
2019-07-29 22:29:18
129
转载 自适应PC端网页制作使用rem
做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080使用了几种办法1.内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框定位.这样一来,在不同大小屏中,内容总是在中间,看起来较正常2.长,宽,left,top,right,bottom都采用了rem...
2019-07-29 14:09:33
3077
原创 响应式布局
纯css实现响应式布局(媒体查询)1)设置 Meta 标签,在标签里加入meta标签。<meta name=“viewport” content=“width=device-width, initial-scale=1, maximum-scale=1, user- scalable=no”>2)@media 类型 and (条件1) and (条件二){css样...
2019-07-29 13:05:19
156
转载 css百分比参照问题
CSS 百分比参照问题参照父元素宽度的元素:padding margin width text-indent参照父元素高度的元素:height参照父元素属性:font-size line-height特殊:相对定位的时候,top(bottom), left(right)参照的是父元素的内容区域的高度与宽度,而绝对定位的时候参照的是最近的定位元素包含padding的高度与宽度...
2019-07-22 11:44:48
197
转载 HTML5中section元素的使用
<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。section元素标签用来表现普通的文档内容或应用区块。一个section通常由内容及其标题组成,但section元素标签并非一个普通的容器元素;当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div元素而非section。section 字面上理解为“块”,“部分”,s...
2019-07-20 22:46:42
7781
原创 Vue生命周期
vue生命周期第一个框框 new Vue() 表示开始创建一个Vue实例对象var vm = new Vue()第二个框框 表示刚初始化了一个vue空的实例对象,这个对象上,只有默认的一些生命周期函数和默认的事件,其他的东西都未创建。第一个生命周期函数 beforeCreate ,在这个函数执行时,data和methods中的数据都还没有初始化。下一个框框 进行初始化第二个...
2019-07-19 14:30:20
337
转载 JS创建数组的三种方法
1.隐式创建var arr = ['Audi','Bmw','Volvo'];2.直接实例化var arr = new Array('Audi','Bmw','Volvo');3.创建数组并给数组元素赋值var arr = new Array();arr[0] = 'Audi';arr[1] = 'Bmw';arr[2] = 'Volvo';...
2019-07-05 22:51:47
4259
转载 apply、call、bind的区别
相同点:把一个函数应用到其他对象上,都是用来改变this对象的指向的,第一个参数都是this要指向的对象,都可以利用后续参数传参。不同点:call、apply是修改函数的作用域,即修改this指向并且立即执行。bind是返回了一个新的函数,不是立即执行。而call和apply的区别是call接受逗号分隔的无限多个参数列表,apply则是接受数组作为参数。...
2019-07-05 22:45:58
92
转载 Websocket原理
Websocket概念Websocket是HTML5出的东西(协议),是一个持久化的协议,是基于HTTP协议的,并借用HTTP协议完成一部分握手。在HTTP中,一个request对应一个response,且是被动的,不能主动发起。通过Update:websocket、Connection:Upgrade告诉Apache、Nginx服务器:发起的是Websocket协议,不是HTTP协议。a...
2019-07-05 22:36:33
167
原创 css实现垂直居中、水平居中、垂直水平居中
css实现垂直居中or水平居中垂直居中1.如果是单行文字(包括下拉框、按钮等),可以设置行高等于父元素高度,如果是多行文字,可以用一个div把其包裹起来,并设置为display:inline-block,然后设置行高等于父元素高度。2.absolute+margin负值:(如果已知宽高)利用绝对定位,top,left均设置为50%,然后margin-top,margin-left均改为负的宽...
2019-07-03 17:13:01
211
转载 从url输入到显示发生了什么
从url输入到显示发生了什么1.浏览器显查看浏览器缓存、系统缓存、路由器缓存,如果缓存中有,会直接在屏幕中显 示页面内容2.发送http请求前,需要域名解析,解析获取相应地址3.浏览器向服务器发起tcp连接,建立tcp三次握手4.握手成功后,浏览器向服务器发起htpp请求,请求数据包5.服务器处理收到的请求,将数据包返回给浏览器6.浏览器收到http响应7.读取页面内容 解析...
2019-07-02 23:49:32
87
转载 HTML&HTML5
HTML&HTML51.编程语言和标记语言编程语言 (programming language)可以例如 c, perl, javascript标记语言( markup language ), 有 xml, html, xhtml ( xml 和 html 的合体 )你会见到他们都是以 “ml” 结尾的.标记语言的存在用来被读取的, 例如 svg 的图档其实就是用 xml 写出来的...
2019-06-30 15:39:51
162
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人