前端
zhang070514
不喜欢运动的程序员不是好的工程师!
展开
-
elementUI el-tree选中某一项后收起展开的数据
el-tree选中某一项后收起展开的数据原创 2023-03-08 09:25:18 · 435 阅读 · 0 评论 -
vue H5页面实现搜索历史记录超过两行的Tag的展开与折叠
搜索页面搜索历史记录超过两行要折叠,同时可以展开显示所有的历史记录。原创 2022-09-29 16:14:14 · 2230 阅读 · 3 评论 -
Object 对象的相关方法
Object对象的相关方法原创 2022-06-02 17:15:17 · 233 阅读 · 0 评论 -
js对象数组的操作
js删除数组中对象属性值重复的元素原创 2022-03-09 14:10:56 · 620 阅读 · 0 评论 -
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 · 3002 阅读 · 0 评论 -
vue element el-form 多级嵌套验证
最近在做项目时遇到这样一个需求,一个form表单里面有两个字段数量不固定,可以动态的增删,在提交的时候不管数量有多少都需要验证,页面效果如下:form表单对应的数据结构如下: voucherInfo: { cash: [ { cashNum: '', // 押金流水号 cashPayType: null, // 押金支付类型 } ], cashPayTime原创 2021-08-15 10:28:19 · 10262 阅读 · 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 · 305 阅读 · 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 · 98 阅读 · 0 评论 -
浏览器输入URL后发生了什么
相信大多数的前端小伙伴对这个问题并不陌生,在面试中或多或少都遇到过这个问题,不知道当时你们回答的怎么样。最近利用春节放假时间又复习了一下这个知识点,在此总结一下,一是加深印象,二是方便以后自己面试的时候看。整个过程大体分为六步。一、URL解析用户输入URL,浏览器会根据用户输入的信息判断是搜索还是网址。如果是搜索内容,就将搜索内容+默认搜索引擎合成新的URL;如果用户输入的内容符合URL规则,浏览器就会根据URL协议,对一些默认的东西进行补齐,合成合法的URL二、DNS域名解析DNS:域名系统,全原创 2021-02-16 16:46:21 · 471 阅读 · 0 评论 -
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 · 2486 阅读 · 0 评论 -
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 · 329 阅读 · 0 评论 -
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 · 7006 阅读 · 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 · 953 阅读 · 0 评论 -
JavaScript基础之冒泡/捕获事件
JavaScript的冒泡事件和捕获事件是每一个前端开发者都会经常遇到的问题。最近遇到这个问题时,发现自己对它们还是一知半解,现在是时候该彻底的弄懂它们了。1、定义一个事件发生后,会在子元素和父元素之间传播。这种传播分成三个阶段:第一阶段:从window对象传导到目标节点(外层传到内层),称为“捕获阶段”。第二阶段:在目标节点上触发,称为“目标阶段”。第三阶段:从目标节点传导回window对象(从内层传回外层),称为“冒泡阶段”2、应用本文中我们用addEventListener() 方法原创 2020-09-01 20:37:18 · 203 阅读 · 0 评论 -
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 · 2201 阅读 · 0 评论 -
每天24点删除cookie
最近做项目遇到这样一个需求:用户每天第一次打开页面时显示蒙层,以后打开就不再显示。 解决方法就是设置一个标志放在cookie里,页面加载时判断当前cookie中有没有此标志,如果没有就显示蒙层,同时把标志放入cookie中,并设置当天24点过期;如果有就不显示蒙层。 下面是设置cookie过期时间是当天24点的代码:var curDate = n原创 2020-05-22 09:47:15 · 685 阅读 · 0 评论 -
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 · 230 阅读 · 0 评论 -
js将dom对象转换成字符串
function nodeToString ( node ) { //createElement()返回一个Element对象 var tmpNode = document.createElement( "div" ); //appendChild() 参数Node对象 返回Node对象 Element方法 //cloneNode() 参数布尔类型 ...原创 2018-07-17 08:43:40 · 15133 阅读 · 1 评论 -
webpack入门一
什么是webpackWebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件...原创 2018-07-22 13:50:31 · 483 阅读 · 0 评论 -
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 · 3065 阅读 · 0 评论 -
js复习一
1、break和continue区别 break语句用于跳出代码块或循环; continue语句用于立即终止本轮循环,返回循环结构的头部,开始下一轮循环。2、JavaScript共有六种数据类型,分别是数值(number)字符串(string)布尔值(boolean)undefinednull对象(object)ES6又新增了第七种Symbol类型。3、typ...原创 2018-09-17 15:39:33 · 271 阅读 · 0 评论 -
理解setTimeout()
1、setTimeout() setTimeout函数用来指定某个函数或某段代码,在多少毫秒之后执行。它返回一个整数,表示定时器的编号,以后可以用来取消这个定时器。 setTimeout函数接受两个参数,第一个参数func|code是将要推迟执行的函数名或者一段代码,第二个参数delay是推迟执行的毫秒数。 注意:如果回调函数是对象的方法,那么setTimeout使得方法内部的this关键...原创 2018-09-18 09:16:53 · 2128 阅读 · 1 评论 -
一个高度自适应的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 · 3340 阅读 · 0 评论 -
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 · 1259 阅读 · 0 评论 -
js实现IE9及以下对placeholder的兼容性
在做项目的时候,发现input的placeholder属性只支持i9以上的浏览器,ie9以下的就不显示信息提示了,体验很不好。最后自己用js实现了i9及以下placeholder的效果。实现效果很简单,先说一下思路:使用下面这个方法判断ie是否支持placeholder属性 function placeholderSupport() { return 'place...原创 2019-05-12 11:57:27 · 644 阅读 · 0 评论 -
第二个div高度随着父div高度改变而改变的几种实现方式
最近遇到这样一个需求,一个大的div高度不固定,里面有两个小的div,第一个div高度固定(比如为100px),第二个div高度填满大div的剩余高度。实现也很简单,想到了好几种实现方式,记录一下。 因为外面大的div高度不固定,我在这里就默认填满body。 1、定位:外面大的div相对定位,第二个div绝对定位,设置top:100px。代码如下:outer设置overflow:hidden去原创 2018-01-18 10:55:41 · 2607 阅读 · 0 评论 -
ul中li水平垂直居中
我们在写轮播图时,底部的小圆点或数字会放在一个ul下li里,这时候一般都要求小圆点或数字垂直居中,今天就写一个简单的li在ul中水平垂直居中。 轮播图一般有两种,左右轮播和上下轮播,对应的ul中的li也分为水平排列和竖直排列,下面就针对这两种情况分别说明。 1、轮播图左右轮播,li水平排列: div class="box"> ul> li>原创 2018-01-06 10:37:20 · 41465 阅读 · 1 评论