自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

Mr_Wiill

前端工程师、电商创业者 || https://github.com/KBeginner

原创 基于Element-UI的组件改造的树形选择器(树形下拉框)

前言:由于做项目需要一个树形选择器,项目用的也是element-ui框架,然而它自带的选择器组件没有树形选项,又不想引入其他的框架组件,于是自己利用el-select和el-tree改造了一个,感觉还挺好用的,就封装成了一个组件,如下图:element-ui的el-select组件的选项只能是列表形式:改造后的树形选择器:简介:此树形选择器组件是基于elment-ui框架的e...

2019-03-18 13:46:16 35062 106

原创 js实现无限层级树形数据结构(创新算法)

由于做项目的需要,把一个线性数组转成树形数组,在网上查了很多文章,觉得他们写的太复杂了,于是自己写了一个,在折腾了一下午终于把它写出来啦(激动.gif),用两个filter过滤器就搞定了,代码简洁明了,数据结构小白都能看懂。js代码:把扁平数据转成树形数据function setTreeData(source){ let cloneData = JSON.parse(JSON.s...

2018-09-22 20:19:32 26092 65

原创 Bootstrap栅栏布局里col-xs-*、col-sm-*、col-md-*、col-lg-*之间的区别及使用方法

概括一句话概括,就是根据显示屏幕宽度的大小,自动的选用对应的类的样式。关键字1、col是column简写:列;2、xs是maxsmall简写:超小, sm是small简写:小,  md是medium简写:中等, lg是large简写:大;3、-* 表示占列数,即占每行row分12列栅格系统比;4、.col-xs-* 超小屏幕如手机 (<768px)时使用;    ...

2018-03-24 14:14:44 66349 16

原创 js通过match方法和正则表达式截取某两个字符串中间部分的字符

比如我要从下面base64编码字符串中截取一个文件后缀名,即image/和;之间的字符串,方法如下:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA......代码:let src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA......'let res = src.matc...

2020-03-13 10:37:37 1035

原创 基于Vue和Vant-ui开发的移动端周历日期选择器

该周历日期选择器是在基于Vue的小日历(支持按周切换)的基础上改造而来,对其代码进行优化,并引入了Vant-ui新增了年份和月份的选择、一键返回今日的快捷键功能,以及支持4种常用日期格式的选择。总体来说,该日期选择器适用于中小型移动端web项目,非常好用,现在我把它封装成了一个组件,有需求的同学就拿去用吧,别忘了点赞哦!动图演示:详细介绍和源码,请戳此链接:https://gi...

2020-01-07 15:46:08 1161

原创 js实现树形数据转成扁平数据

利用递归的方法循环树形数组,当遇到有children的对象再次调用递归函数循环children数组,每次循环的数据放入一个提前声明好的数组里,等所有递归函数执行完,这个数组即是想要得到的扁平数据数组。let res = []const fn = (source)=>{ source.forEach(el=>{ res.push(el) e...

2019-10-31 11:14:32 3274 2

原创 js如何修改伪类样式如before或after

概括通过js创建一个内嵌样式表,并添加需要修改的伪类样式,覆盖原始的伪类样式。介绍html代码<ul>  <li>apple</li>  <li>banana</li>  <li>pear</li></ul>css代码ul li{ list-style: no...

2019-07-29 15:46:07 1297

转载 .gitignore忽略规则的匹配语法

1、举例说明,掌握这些基本够用了#注释 .gitignore的注释*.txt 忽略所有 .txt 后缀的文件!src.a 忽略除 src.a 外的其他文件/todo 仅忽略项目根目录下的 todo 文件,不包括 src/todobuild/ 忽略 build/目录下的所有文件,过滤整个bu...

2019-06-13 09:14:12 2921

原创 Mint-UI的mt-search如何触发事件(确定和取消)

Mint-ui的官方文档写得是真的简单,简单到遗漏了许多重点,使用文档里关于mt-search的api只介绍了属性的部分,各个调用方法完全没有介绍,让用户自己去探索?官方文档。关于开源框架的使用文档,我接触到的还是Element-UI写得最为简洁明了了,相比于Mint-UI都是同一个爸爸(饿了么)出来的,差距为什么就这么大呢?正文1、确定事件mint-ui使用文档开头里有提到,...

2019-05-23 15:20:05 2143

原创 axios请求文件流下载文件

axios.post('/api',{ // 传参},{ responseType:'blob' // 设置响应数据类型}).then(res=>{ if (res.status == 200) { let url = window.URL.createObjectURL(new Blob([res.data])) ...

2019-04-30 16:07:49 8872

原创 JS数据结构与算法 —— 散列表(哈希表)

概念:散列表(Hash table,也叫哈希表),是根据关键码-值(Key-value)的形式进行存储和访问的数据结构。散列表类似于字典,是以 键-值(Key-value) 对形式存储的数据结构,不同点在于散列表的键key是经过散列函数计算得出,我们称之为关键码,每个关键码都对应一个值,我们把这种以 关键码-值 形式存储数据的数组称为散列表。作用:可以快速定位元素,并拿到对应的值。相...

2019-03-03 15:09:33 446

原创 JS数据结构与算法 —— 字典

字典是一些节点的集合,每个节点包含了一个key和数据域。字典是一种以 键-值对 形式存储数据的数据结构。如同我们平时查看通讯录一样,要找一个电话,首先要找到该号码的机主名字,名字找到了,紧接着电话号码也就有了。JavaScript 中的 Object 类就是以字典的形式设计的,下面我们将会借助 Object 类的特性,自主实现一个字典类。js实现一个字典定义一个Dictiona...

2019-01-05 14:31:20 201

原创 JS数据结构与算法 —— 集合,并集,交集,补集

概念:集合是由一组无序且唯一(每个元素只出现一次)的项组成的一组数据。其与数学里的集合是同一个概念。在ES6里已经引入了集合的数据结构概念——Set类。分类:常见的有空集,并集,交集,差集。应用场景:1)数据去重;2)用于存储一些独一无二的数据。js实现一个集合集合的特性类似于JavaScript数据类型里的Object,Object对象里的每个键都是唯一。下面用一个名为item的...

2019-01-05 14:10:31 840

原创 js高效修改对象数组里的对象属性名

有些时候,我们前端从后端拿过来的JSON对象数据,某些字段并不是前端想要的,需要对一些字段名进行重命名。一般修改对象数组的对象属性名,最简便的就是通过遍历对象数组的方法进行修改,但是用这个方法,如果处理的数据量很大,它的执行效率是非常低的。下面介绍一个更高效的方法,即通过正则的方法进行过滤修改。JSON.parse(JSON.stringify(data).replace(/title/g,...

2019-01-01 14:16:55 12861 10

转载 Flex布局教程 —— 实例篇

一、骰子的布局骰子的一面,最多可以放置9个点。下面,就来看看Flex如何实现,从1个点到9个点的布局。你可以到codepen查看Demo。如果不加说明,本节的HTML模板一律如下。<div class="box"> <span class="item&q

2018-12-08 16:10:17 165

转载 Flex布局教程 —— 语法篇

布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。本文介...

2018-12-08 15:52:06 930

原创 JS数据结构与算法 —— 链表

概念:链表是计算机的一种存储结构。链表由一系列结点组成,每个结点里包含了本结点的数据域和指向下一个结点的指针。如下图item存储数据,next存储下一个节点的引用,其中最后一个节点的指针指向了null,表示链表结束的位置。作用:按一定顺序储存数据,允许在任意位置插入和删除结点。分类:单向链表、双向链表、单向循环链表和双向循环链表应用场景:适用于需要频繁进行插入和删除操作的数据存储。...

2018-12-01 15:56:45 260

原创 JS数据结构与算法 —— 队列

概念:只允许在表的前端(front)进行删除操作,在表的后端(rear)进行插入操作的一种特殊线性表核心思想:先进先出分类:1)循环队列:普通队列的首尾相接形成圆环,这样的队列称为循环队列(Circular Queue)           2)优先队列:普通队列的元素被赋予了优先级,具有最高优先级的元素最先删除,这样的队列称为优先队列(Priority Queue)操作方法:1)...

2018-11-26 22:37:36 162

原创 JS数据结构与算法 —— 栈

概念:表头进行插入和删除操作的线性表核心思想:先进后出作用:在编程语言的编译器和内存中保存变量、方法调用操作方法:1)push() 进栈,即向栈里添加元素                  2)pop() 出栈,即把元素从栈中删除                  3)peak() 查询栈顶元素,即查询栈里最顶部那个元素(最后添加)                  4)i...

2018-11-25 13:12:12 352 2

原创 阿里巴巴web前端电话面试题

招聘网站上偶然间看到了一个阿里巴巴的前端招聘信息,要求半年到一年的工作经验,看起来要求不是很高,于是就抱着试试的心态投了简历,没想到第二天惊喜的收到了电话面试预约,然后顺利的进行了电话面试,面试后我把面试过程中问到的问题都大概的记录了下啦,拿出来供大家一起学习,希望对一些准备阿里前端面试的同学有帮助。题外话:由于我本人在vue缓存机制和跨域安全方面了解不深,故回答得不是很好,再加上自己的数据...

2018-11-24 23:05:31 5779 2

转载 Hybrid APP混合模式应用开发的经验和总结

Hybrid APP混合开发的一些经验和总结写在前面:由于业务需要,接触到一个Hybrid APP混合开发的项目。当时是第一次接触混合开发,有一些经验和总结,欢迎各位一起交流学习~1、混合开发概述Hybrid App主要以JS+Native两者相互调用为主,从开发层面实现“一次开发,多处运行”的机制,成为真正适合跨平台的开发。Hybrid App兼具了Native&...

2018-11-09 17:37:02 355

原创 Git clone项目时报错Permission denied (publickey).的解决方案

在一台新设备上首次使用git clone 克隆GitHub仓库项目时,报了这个错误,如下:git@github.com: Permission denied (publickey).fatal: Could not read from remote repository.原因新设备还不存在ssh key或者ssh key失效,解决办法就是新建一个ssh key。步骤1、查看s...

2018-11-06 15:48:00 4140

原创 vue项目引入vux-ui框架详解(快速入门)

一、新建自带vux框架的vue项目(免配置)1、安装vue环境 (已安装,跳过这一步)2、新建基于vux的vue项目;vue init airyland/vux2 projectName //(新建项目配置已省略) cd projectName //(新建成功后切换到项目根目录下)npm install --registry=https://re...

2018-11-04 13:32:02 2380 2

原创 基于Element-UI可以动态生成表单项的form表单

由于做项目的需要做一个不定项的form表单,即可以动态生成表单项的form表单,自己利用element-ui的el-form表单制作了一个,如下动图:此动态form表单是基于element-ui里的el-form表单基础上进行修改而来,它实现了新增表单项、删除表单项、表单验证和重置表单、表单提交等form表单所拥有的基本功能。详细介绍,请查看源代码应用场景:表单项不确定的form表单...

2018-10-14 20:08:38 12192 4

原创 解决GitHub每次push时都提示输入用户名和密码的问题

最近在GitHub上建了个项目仓库,可是在每次push的时候,都提示我输入用户名和密码,查了很多资料,得到如下解决方案:原因我们在建立远程仓库或者克隆项目时,使用的是HTTPS方式 ,HTTPS方式push不会保存用户名和密码。我们需要把HTTPS方式改成SSH的方式解决办法1、git remote -v 查看远程连接的方式2、git remote rm origin...

2018-10-13 23:17:26 10578 3

原创 CSS3实现内容以指定行数显示,超出后显示省略号

-webkit-line-clamp 结合其他样式属性一起使用,可以实现内容指定行数来显示的效果,不过,它还是一个不规范的属性,没有被列入CSS 规范草案(不影响实现效果)。代码如下:与其他属性配合使用:-webkit-line-clamp:n; //设置行数,n为行数(必选)display: -webkit-box; //盒子模型(必选)-w...

2018-10-09 19:19:02 1353

原创 CSS解决中英文的换行、不换行、超出后显示省略号的问题

white-space:nowrap;         //强制不换行(中英文都起作用)white-space:pre-wrap;       //只对中文起作用,强制换行word-break:break-all;        // 只对英文起作用,以字母作为依据,强制换行word-break:break-word;    //只对英文起作用,以单词作为依据,强制换行overfl...

2018-09-17 18:24:31 3674

原创 Git常用命令符和GitHub使用教程图文详解

这是本人学习Git的笔记,涵盖了大部分常用的操作,在工作和学习中使用足矣。前期准备安装GitGitHub的注册即使用Git常用命令符:1、git init //本地新建仓库2、git status //查看仓库状态3、git add <file> //添加单个文件到仓库(注意文件后缀) git add *.文件后缀...

2018-08-18 13:26:15 1001

转载 Vue简单的实现五星级评分

效果:原理:类似于四舍五入的方法,不同点在于四舍五入是把数字转成整数,而这个方法是把分数转成整数或(整数+0.5),有点抽象,举个例子就明白了,例如 把4.7转成4.5(即四个半星),4.3转成4.0(即四个星),4.0就是四个星。需要准备三张星星图片,即全星,半星,空星。代码:<template> <div class="score"> ...

2018-08-16 13:23:46 2279

原创 vue组件间传值的方法汇总(父子间、兄弟间)

1、组件间的传值1.1 父组件向子组件传值子组件自定义一个属性父组件通过自定义属性绑定值子组件调用自定义属性来拿到值(1.1 完)1.2 子组件向父组件传值子组件自定义一个事件父组件通过自定义事件绑定一个方法来接收值(1.2 完)1.3 兄弟组件间传值(或者夸组件传值)新建一个js文件作为兄弟组件间传值的中转站(new 一个vue)...

2018-08-07 14:22:04 4235

原创 一个基于Vue和Element-ui的个人博客系统(附完整代码)

简介        这是一个偏前端的博客项目,其前端是基于Element-UI和Vue2.0开发实现的,后端的实现使用了Google的Firebase作为实时数据库,直接调用它提供的接口来实现数据的读取和存储。(由于项目使用了国外的firebase,所以需要连接VPN才能正常工作。)        此博客系统实现了基本的博客发布,修改,删除和查询;应用到的vue技术主要有axios请求、父...

2018-07-04 13:49:39 8268 1

原创 js判断IE浏览器的版本,若版本过低则跳转到提示页面

IE9 以下浏览器都支持条件判断语句,可以在 </head> 标签结束前添加如下代码做自动跳转,自定义修改提示页面地址。方法一:var DEFAULT_VERSION = "9.0";var ua = navigator.userAgent.toLowerCase();var isIE = ua.indexOf("msie") > -1;var safariVer...

2018-07-03 11:27:34 6340

原创 element-ui框架的el-dialog弹出框被遮罩层挡住了

如图:解决办法在el-dialog标签里添加 :modal-append-to-body='false'实现效果:问题解析先来看看element-ui官网提供的属性说明文档文档解释:翻译成大白话就是,若el-dialog弹出框设置了modal-append-to-body='true'(默认)属性,它的遮罩层就会被插入到body标签下(即与组件所在的最外层d...

2018-07-02 19:24:30 47956 27

原创 vue制作一个无限层级伸缩树形菜单栏

        使用v-for循环生成一个多级嵌套菜单栏,只要你学会了这个方法,几乎所有的菜单栏都可以实现了。实例1:不能伸缩的多级菜单栏现在以一个三级菜单栏为例:<div class="level-one" v-if="obj.level == 1" v-for="obj in bar1"><a>{{obj.title}}</a> &

2018-06-25 14:02:31 6242 4

原创 vue使用vue-resource实现简单的post和get(实例详解)

本文只展示vue-resource实现的相关代码,对于页面的实现和数据渲染就不多加解释了。一、安装1、下载并安装vue-resourcenpm install vue-resource --save查看依赖文件存在vue-resource说明安装成功2、vue项目中引入vue-resource在main.js函数中引入,如下图二、应用我使用了“JSONP...

2018-06-21 19:25:50 7145

原创 vue实现路由跳转和嵌套(快速入门)

vue-router路由的原理是通过改变网址,来实现页面的局部刷新,相比a标签跳转的不同之处在于,路由跳转不需要刷新整个页面。一、路由跳转1、安装路由vue-router:npm install vue-router2、vue项目引入vue-ruoter:3、配置路由(页面跳转):可以建一个专门用于路由的js文件,里面配置路径。1)rout...

2018-06-20 12:39:26 56665 12

原创 vue项目引入element-ui的方法

安装element-ui:npm i element-ui -S查看是否安装成功:vue项目的依赖文件node_modules里存在element-ui依赖vue项目中引入element-ui:在main.js文件里引入,方法如下(完)...

2018-06-20 10:06:15 2153

转载 vue项目引入element-ui后报错的解决方案

错误:vue2.0引入element-ui后报错如下图原因:后来从依赖文件里找到了问题,vue无法识别.ttf和.woff文件解决办法:修改vue配置文件“webpack.config.js”如下:(重启vue项目,完美解决) 参考:https://segmentfault.com/q/1010000011762672?sort=created...

2018-06-19 16:08:43 6479 3

原创 web前端开发工作和学习笔记

1、div多层嵌套的高度自适应问题方法一:给最外层的div设置overflow:auto,则最外层的div高度就会自适应高度了。2、父级宽度不定的水平居中方法一:父级text-align:center,子级display:inline-block。方法二:父级relative,子级absolute,left:50%,transform:translateX(-50%)。垂直居中同理...

2018-05-24 12:58:40 815

转载 前端开发必会的Dom节点操作方法

1.访问/获取节点document.getElementById(id);           //返回对拥有指定id的第一个对象进行访问document.getElementsByName(name);      //返回带有指定名称的节点集合   注意拼写:Elementsdocument.getElementsByTagName(tagname);   //返回带有指定标签名的对象集合...

2018-04-13 18:46:55 394 1

提示
确定要删除当前文章?
取消 删除