- 博客(79)
- 收藏
- 关注
RSS订阅原创 iview清除form所有表单校验和某个表单校验
<Form ref="formRef"></Form>iview清除form所有表单校验：this.$refs.formRef.resetFields() 这个方法同时也会清空整个表单数据iview清除某个表单项校验： this.$refs.formRef.fields.forEach((e) => { if (e.prop == 'zStationId') { e.resetField() } }
2022-05-11 08:49:55
3200
1
原创 ElementUI el-table实现跨行显示
最近在做项目时遇到了一个table表格需要跨行的需求，因为项目中是用到的element-ui的table表格，所以参考element官网实现了此功能，在这里记录一下。<template> <div> <el-table :data="tableData" :span-method="objectSpanMethod" border > <el-table-column prop="
2022-01-06 11:30:20
2820
原创 vue element el-form 多级嵌套验证
最近在做项目时遇到这样一个需求，一个form表单里面有两个字段数量不固定，可以动态的增删，在提交的时候不管数量有多少都需要验证，页面效果如下：form表单对应的数据结构如下: voucherInfo: { cash: [ { cashNum: '', // 押金流水号 cashPayType: null, // 押金支付类型 } ], cashPayTime
2021-08-15 10:28:19
8912
5
原创 js基础复习——document元素大小和滚动
1、offsetLeft/TopoffsetLeft/offsetTop是相对于offsetParent左上角的x/y坐标。offsetParent是最接近的祖先元素，成为最接近的祖先元素为下列条件之一：1.css定位（position为absolute，relative或fixed）2.元素为td th table3.body元素 <style> .main{ position: absolute; left: 150
2021-06-27 16:32:51
284
1
原创 JavaScript基础—对象
在JavaScript中有8种数据类型（7种基本数据类型和1种复杂数据类型），其中Object（对象）是复杂数据类型。一、创建对象创建对象有两种方式：1、构造函数的方式let user = new Object()2、字面量方式let user = {}使用字面量的方式创建对象就是将一些属性以键值对的形式放到{}中。 let user = { name: 'zhang', // 键"name", 值"zhang" age: 29 //
2021-05-19 14:52:45
85
原创 面试官：说一下css盒子模型
所谓盒子模型（Box Model）就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都是由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。所有的文档元素（标签）都会生成一个矩形框，我们称为元素框，它描述了一个文档元素在网页布局汇总所占的位置大小。每个盒子除了有自己的大小和位置外，还影响着其他盒子的大小和位置，因此正确了解css盒子模型对我们前端页面布局十分重要。css的盒子模型包括IE盒子模型（怪异模型） 和 标准
2021-02-24 14:06:15
3774
原创 浏览器输入URL后发生了什么
相信大多数的前端小伙伴对这个问题并不陌生，在面试中或多或少都遇到过这个问题，不知道当时你们回答的怎么样。最近利用春节放假时间又复习了一下这个知识点，在此总结一下，一是加深印象，二是方便以后自己面试的时候看。整个过程大体分为六步。一、URL解析用户输入URL，浏览器会根据用户输入的信息判断是搜索还是网址。如果是搜索内容，就将搜索内容+默认搜索引擎合成新的URL；如果用户输入的内容符合URL规则，浏览器就会根据URL协议，对一些默认的东西进行补齐，合成合法的URL二、DNS域名解析DNS：域名系统，全
2021-02-16 16:46:21
441
原创 Table表格实现圆角
今天遇到一个table表格带圆角的一个弹框，避免自己以后忘记，记录一下。效果图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>table表格实现圆角</title> <style> table{ width: 500px; border-sp
2021-02-05 15:57:11
2266
原创 vue之watch总结
1、immediate属性<div class="main"> fullName: <span>{{fullName}}</span><br> <input type="text" v-model="lastName"></div> data () { return { firstName: 'zhang', lastName: 'hang', fullName: ''
2021-01-09 20:27:16
297
原创 css实现超出屏幕宽度横向滚动
最近在写页面时遇到这样一个效果，一个div里面有四个小的div横向排列，四个小div的宽度加起来超出了屏幕宽度，要求四个小div可以左右横向滑动。代码其实很简单，记录如下： <div class="scrollTest"> <div class="box" v-for="(item, index) in list"></div> </div> .scrollTest{ height: 300px; white-spa
2020-11-19 16:09:32
6803
5
原创 正则表达式相关方法
我们知道字符串（String）和ReExp对象都提供了使用正则表达式的方法，分别有什么呢？一起来总结一下吧。String支持4种使用正则表达式的方法。str.search(regexp)方法str.search(regexp)返回第一个匹配项的位置，如果未找到，则返回-1 var result = 'javascript'.search(/script/) console.log(result) // 4str.replace(str|regexp,str|func)方法str.r
2020-09-06 17:15:39
935
原创 JavaScript基础之冒泡/捕获事件
JavaScript的冒泡事件和捕获事件是每一个前端开发者都会经常遇到的问题。最近遇到这个问题时，发现自己对它们还是一知半解，现在是时候该彻底的弄懂它们了。1、定义一个事件发生后，会在子元素和父元素之间传播。这种传播分成三个阶段：第一阶段：从window对象传导到目标节点（外层传到内层），称为“捕获阶段”。第二阶段：在目标节点上触发，称为“目标阶段”。第三阶段：从目标节点传导回window对象（从内层传回外层），称为“冒泡阶段”2、应用本文中我们用addEventListener() 方法
2020-09-01 20:37:18
190
原创 vue动态绑定class的三种方式
运用场景在开发项目中很多时候需要根据后端接口返回的不同状态来动态的显示前端页面，此时我们就可以动态操作元素的class来达到我们的目的。方法一：传给 v-bind:class 一个对象<template> <div class="classTest"> <h2 :class="{'mblue':flag1, 'mred': flag2}">我是测试文字</h2> </div></template><sc
2020-07-16 11:01:15
2152
原创 每天24点删除cookie
最近做项目遇到这样一个需求：用户每天第一次打开页面时显示蒙层，以后打开就不再显示。 解决方法就是设置一个标志放在cookie里，页面加载时判断当前cookie中有没有此标志，如果没有就显示蒙层，同时把标志放入cookie中，并设置当天24点过期；如果有就不显示蒙层。 下面是设置cookie过期时间是当天24点的代码：var curDate = n
2020-05-22 09:47:15
642
原创 js数组常用方法总结
好记性不如烂笔头，都是一些很常用的操作数组方法，记录下来方便自己以后查阅。join() 把数组转换成字符串，然后给他规定个连接字符，默认的是逗号( ，) var arr = [1,2,3,4,5]; console.log(arr.join()); // 1,2,3,4,5 console.log(arr.join('-')); // 1-2-3-4-5 c...
2020-04-03 15:57:43
214
原创 call、apply了解一下
对javascript的call()和apply()这两个方法可以说是既熟悉又陌生，熟悉的是经常会在面试或是平常开发中会遇到，陌生的是对它俩一直是一知半解。刚好最近工作不是太忙，抽出时间来学习一下这两个方法。1、定义在javascript中，call和apply都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部this的指向。 function ...
2019-12-22 11:50:31
176
原创 面试官：如何实现深拷贝
写在前面 深拷贝应该是前端面试中经常被问到的问题之一，搞定它可以让我们在面试中如鱼得水。那么什么是深拷贝呢？它和浅拷贝有什么区别呢？如何实现一个深拷贝？相信看完这篇文章你就能回答上面的问题了。一、简单解释 我们都知道js的数据类型包括两种：基本数据类型和引用数据类型。我们今天所说的深拷贝和浅拷贝都只针对引用数据类型，浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内...
2019-11-06 10:37:13
350
原创 vue父子组件相互传递数据
前言vue父子组件之间相互传递数据应该是我们开发中最常见的场景。今天刚好有时间就写两个简单的小例子记录一下。一、父组件向子组件传递数据父组件向子组件传递数据相对简单，主要是通过props作为中间桥梁，下面是代码： <div id="app"> <input v-model="msg"> <child :message="m...
2019-09-16 17:58:09
559
原创 前端面试之函数防抖和节流
前言js防抖和节流函数不仅是前端面试中经常问到的问题，也是我们平常开发中频繁处理dom事件时会用到的。在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数频繁调用，会加重浏览器的的负担，导致用户体验非常糟糕。此时，我们就可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。一、函数防抖函数防抖（debounce）：...
2019-08-23 09:52:32
1337
原创 js实现IE9及以下对placeholder的兼容性
在做项目的时候，发现input的placeholder属性只支持i9以上的浏览器，ie9以下的就不显示信息提示了，体验很不好。最后自己用js实现了i9及以下placeholder的效果。实现效果很简单，先说一下思路：使用下面这个方法判断ie是否支持placeholder属性 function placeholderSupport() { return 'place...
2019-05-12 11:57:27
630
原创 原生js实现select下拉框选择
最近在做一个项目需要兼容到ie不同版本，在使用select时遇到了各种问题。后来索性就自己使用原生js实现了这样一个下拉框，话不多说，直接上代码吧。<html lang="en"><head> <meta charset="UTF-8"> <title>自定义select</title></head>&...
2019-05-09 18:44:15
39106
4
原创 js实现Map结构
function myMap(){ var length = 0; var obj = new Object(); /*判断对象中是否包含给定的key*/ this.containsKey=function(key){ return (key in obj) } /*向map中添加数据*/ this.put = function(key,value){ ...
2018-11-12 21:39:25
1233
原创 JS继承
最近在面试中被问到js的继承，当时回答的不太好，所以今天特别总结一下。我们先来看一个基于原型链的继承 //父类 function Person(){} //子类 function Student(){} //继承 Student.prototype = new Person();我们只要把子类的prototype设置为父类的实例，就完成了继承，也就是js里面的原型链继承。接...
2018-11-11 11:05:41
8447
6
原创 一个高度自适应的div，里面有两个div，一个div高度为100px,另一个填满剩余的高度
html代码如下 <div class="main"> <div class="box1"></div> <div class="box2"></div> </div>第一种方式，利用定位 html,body{ height: 100%; margi
2018-11-08 22:00:19
3279
原创 Flexbox——快速布局神器
一、Flex布局是什么？Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容易都可以指定为Flex布局。Flexbox通常能让我们更好的操作它的子元素布局：如果元素容器没有足够的空间，我们无需计算每个元素的宽度，就可以设置他们在同一行。可以快速让他们布局在一列。可以方便让他们对齐容器的左、右、中间等。无需修改结构就可以改变他们的显示...
2018-10-30 09:27:42
1202
原创 vue生命周期学习
vue实例从创建到销毁的过程就是生命周期，它总共分为8个阶段，分别是：beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestorydestoryed下面是vue官网上的一张生命周期图，我们借助它来分析在不同时期都做了什么操作。闲话少说，直接上代码，通过打印的log来分析各个钩子函数&lt;!D...
2018-10-12 14:46:51
219
原创 js复习二之事件
1、事件的传播一个事件发生后，会在子元素和父元素之间传播。这种传播分为是三个阶段。第一阶段：从window对象传到到目标对象（上层传到底层），称为“捕获阶段”。第二阶段：在目标节点上触发，称为“目标阶段”。第三阶段：从目标节点传到回window对象（从底层传回上层），称为“冒泡阶段”。阻止事件传播，使用事件对象的stopPropagation方法。//html代码<div ...
2018-09-26 10:55:14
112
原创 理解setTimeout()
1、setTimeout() setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。 setTimeout函数接受两个参数，第一个参数func|code是将要推迟执行的函数名或者一段代码，第二个参数delay是推迟执行的毫秒数。 注意：如果回调函数是对象的方法，那么setTimeout使得方法内部的this关键...
2018-09-18 09:16:53
2095
1
原创 js复习一
1、break和continue区别 break语句用于跳出代码块或循环； continue语句用于立即终止本轮循环，返回循环结构的头部，开始下一轮循环。2、JavaScript共有六种数据类型，分别是数值（number）字符串(string)布尔值(boolean)undefinednull对象（object）ES6又新增了第七种Symbol类型。3、typ...
2018-09-17 15:39:33
257
原创 css实现三角形
首先我们新建一个100x100的正方形div，为了方便我们查看，设置一个背景颜色。 css代码如下：width: 100px;height: 100px;background-color: #333;接着给这个div添加两个border，width: 100px;height: 100px;background-color: #333;border-left:50p...
2018-09-12 08:34:33
288
原创 webpack+axios配置代理进行跨域访问数据
在学习vue的axios时，访问自己的本地数据出现了跨域问题，如下图 主要代码有var root = 'http://172.16.188.107:8080/im'、、、getData() { this.$api.get('/data1.json', null, r => { console.log(r); }, f => { ...
2018-09-04 14:07:37
3025
原创 webpack入门一
什么是webpackWebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件...
2018-07-22 13:50:31
464
原创 js将dom对象转换成字符串
function nodeToString ( node ) { //createElement()返回一个Element对象 var tmpNode = document.createElement( "div" ); //appendChild() 参数Node对象 返回Node对象 Element方法 //cloneNode() 参数布尔类型 ...
2018-07-17 08:43:40
15043
1
原创 js逻辑运算符短路操作
js逻辑运算符有三个：逻辑非!、逻辑与&&、逻辑或||。所谓短路操作就是， 当&&的第一个操作数的值是false时，直接返回第一个操作数的值，不再对第二个操作数进行计算； var bar1 = 0&&c; console.log('bar1====='+bar1); //bar1=====0 var foo1 =...
2018-02-24 11:05:33
3398
1
原创 webstorm配合git使用一
最近开发工具换成了webstorm,公司用的是git管理代码，所以现在总结一下webstrom配合git的使用。代码是自己github上的一个小项目。 首先，把代码down到本地。 1、点击Check out from Version Control,选择Git。 2、接着弹出下面这个窗口，填写相关信息。第一个填写仓库地址，第二个是下载到你电脑哪个位置，最后一个文件夹名（项目名），一看就
2018-01-25 15:26:01
842
原创 第二个div高度随着父div高度改变而改变的几种实现方式
最近遇到这样一个需求，一个大的div高度不固定，里面有两个小的div，第一个div高度固定（比如为100px）,第二个div高度填满大div的剩余高度。实现也很简单，想到了好几种实现方式，记录一下。 因为外面大的div高度不固定，我在这里就默认填满body。 1、定位：外面大的div相对定位，第二个div绝对定位，设置top:100px。代码如下：outer设置overflow:hidden去
2018-01-18 10:55:41
2428
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人