自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

且听风吟的博客

不断在前端路上探索~

原创 vue 设置el-date-picker 当前日期之前不可选择

<el-date-picker v-model="startTime" type="datetime" value-format="yyyy-MM-dd HH" :picker-options="expireTimeOption" placeholder="选择日期时间"> </el-date-picker>如下图所示,今天以前的都不能选择:

2020-08-07 15:28:18 63

原创 vue element-ui的el-upload上传图片校验

element-ui的el-upload上传图片相关校验,记录笔记组件封装:<template> <div class="el-img-upload-container"> <div class="el-img-upload" :class="{'limit-num': fileList.length>=limit, 'mini': size === 'small'}"> <el-upload :action="url" :file

2020-07-28 18:14:28 157

原创 git 把本地一个分支推到另一个git仓库

今天遇到一个问题,在当前项目上面创建的本地分支,需要推送给另一个仓库,网上查了下,参考其他人的方法实现了。执行下面的命令就可以:git remote set-url origin --push --add '你的远程库地址'接下来输入以下命令进行查看:git remote -v两个仓库地址是不一样的。...

2020-07-15 18:10:04 274

原创 css 页面从左侧向右滑入,动画只执行一次

简单实现了页面进入时的动画:(1)从左侧滑入;(2)只执行一次。<template> <div class="big_screen_contant"> <div class="contant"> </div> </div></template><script>import $ from "jquery";export default { data () { return {

2020-06-17 19:29:11 742

原创 html 在html文件中循环遍历数组并展示

用html文件实现一个简单的遍历数组并输出到页面上面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>常见问题</title> <style> html { wid

2020-06-12 19:39:09 742

原创 vue 解决: target is not existed: .page-component__scroll .el-scrollbar__wrap"问题

这两天要实现:页面滑出一页后,返回页面顶部的功能。使用了 element-ui 返回顶部组件 el-backtop 却报错,如下图:原因:组件都有默认参数,可以直接使用组件,不用传参数。把代码放在最外层包裹元素里的第一个。参考博客:http://www.fjkysq.com/blog/77.html/...

2020-02-12 22:40:35 2687

原创 vue 设置el-carousel的高度

el-carousel 默认高度为300,如下图:设置height:<template> <div class="carousel-container"> <el-carousel trigger="click" :interval="5000" :height="dataHeight" arrow="always"> <el-...

2020-01-14 10:32:33 1572

原创 vue 项目自动打开浏览器

当我们输入npm run dev,运行项目,命令行提示我们运行成功,但是浏览器也没有自动打开,只能自己手动输入。module.exports配置中找到autoOpenBrowser,默认设置的是false:将autoOpenBrowser改为true:...

2020-01-07 18:26:33 305

原创 vue npm安装webpack报错:Unexpected end of JSON input while parsing near

搭建一个vue项目,安装webpack和vue-cli时一直报错:网上大多数解决方案都是清空npm缓存:npm cache clean --force依旧报错。于是,按照网上给的方法,发生这种错误是因为node和npm的版本不合适,于是需要降低一下npm的版本。npm -g i npm@4接下来,可以安装成功了:...

2020-01-06 18:59:30 601

原创 svg 读取SVG文件并绘制矩形框选择图元

首先是SVG文件,里面包含了几个不同的图元:<?xml version='1.0' standalone='no'?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd"><svg width=...

2019-12-31 09:46:22 528

原创 ES6 Object.is()

ES5 中判断两个值是否相等:(1)相等运算符(==)(2)严格相等运算符(===)这两个方法各自有各自的特点:F12打开chrome调试器,如下例子:5=="5"//true可以看到:相等运算符(==)会对比较的两个值进行类型转换。5==="5"//false严格相等运算符(==)不会对比较的两个值进行类型转换。NaN === NaN//false但是,使用严格相...

2019-12-25 19:08:47 95

原创 javascript reduce() 方法应用 —— 数组去重

let arr = [1,2,1,2,3,5,4,6,1,2,3,4,8,9,5];let res = arr.reduce((prev,curr)=>{ if(!prev.includes(curr)){ return prev.concat(curr); }else{ return prev }},[]);console.log(res);运行结果:[1, 2, ...

2019-12-24 18:29:35 46

原创 javascript reduce() 方法应用 —— 将二维数组转化为一维数组

let arr = [[0, 1, 3, 4], [2, 3, 4 ,5], [4, 5, 6, 7, 8 ]]let res = arr.reduce((prev,curr)=>{ return prev.concat(curr)},[])console.log(res);运行结果:[0, 1, 3, 4, 2, 3, 4, 5, 4, 5, 6, 7, 8]...

2019-12-24 18:28:25 371

原创 javascript reduce() 方法应用 —— 统计数组中每个元素出现的次数

let arr = ['abc','abd','abc','acd','abd','bcd','abc','abc','lmn','efj','lmn'];let res = arr.reduce((prev,curr)=>{ if(curr in prev){ prev[curr]++; }else{ prev[curr]=1; } return prev;},{});...

2019-12-20 17:57:53 231

原创 vue el-tree 添加鼠标右键菜单

最近实现了一个功能:点击 el-tree 某一行,鼠标右键出现菜单,点击相应的菜单可进行对应的操作。基础布局代码: <div class="dev-type-main-left"> <!--鼠标右键菜单栏 --> <div v-show="showRightMenu"> <ul id="me...

2019-12-19 20:25:14 1086 3

原创 javascript reduce() 方法应用 —— 数组求乘积

reduce可以用来求数组中所有元素的乘积。let arr = [1,2,3,4,5];let res = arr.reduce((x,y)=>x*y);console.log(res);console.log(arr);运行结果:VM4078:3 120VM4078:4 (5) [1, 2, 3, 4, 5]...

2019-12-18 20:01:56 174

原创 javascript reduce() 方法应用 —— 数组求和

reduce() 方法最简单的应用就是用于数组求和:let arr = [1,2,3,4,5];let res = arr.reduce((x,y)=>x+y);console.log(res);console.log(arr);运行结果:15[1, 2, 3, 4, 5]

2019-12-18 20:01:01 153

原创 javascript reduce() 方法

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。语法:array.reduce(function(total, currentValue, currentIndex, arr), initialValue)参数说明:total 必需。初始值, 或者计算结束后的返回值。currentValue 必需。当前元素currentInd...

2019-12-18 19:15:56 27

原创 ES6 Set 和 Map

SetSet是无重复值的有序列表。let s = new Set();console.log(s);运行结果:Set(0) {}可以看到,属性和方法如下:给 Set 添加元素:let s = new Set();s.add(1).add(2).add(3).add(1).add(2).add(4).add(5).add(6);console.log(s);运行结果:VM...

2019-12-16 20:38:25 39

原创 javascript 比较两个数字的大小

今天写代码时发现一个问题: if ( this.formData.minValue <= this.formData.defaultValue && this.formData.defaultValue <= this.formData.maxValue ) { return true } els...

2019-12-13 18:22:49 384

原创 CSS 实现两栏布局,左侧固定宽度,右侧自适应

基本布局: <div class="dev-type-main"> <div class="dev-type-main-left"> 左侧固定宽度 </div> <div class="dev-type-main-right"> 右侧自适应 </div&gt...

2019-12-12 20:15:39 54

原创 css3 flex 实现常见页面布局

css3 flex 实现常见页面布局上中下布局左中右三列布局圣杯布局Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{display:flex;}行内元素也可以使用Flex布局。.box{display:inline-flex;}Webkit内核的浏览器,必须加上-webkit前缀。.box{...

2019-12-10 20:36:45 182

原创 ES6 const

ES6 中,const 声明的是一个常量。声明的常量值不能进行改变。如果对 const 声明之后的值进行修改,则会报错。如下图所示:而且,const 不能进行重复声明。如下图:但是,const 有需要注意的地方:例(1):const 声明一个对象:const a = {};a.name='mini';a.age = 18;console.log(a);运行结果:VM754...

2019-12-09 20:06:29 30

原创 css3 flex 布局实现平均分配元素

例子一:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>flex 布局</title> <style> *{ padding:0; margin:0; } ...

2019-12-05 20:24:17 7339

原创 javascript 深浅拷贝

深拷贝和浅拷贝基本数据类型:引用数据类型:浅拷贝:数组的concat()、slice(),对象的assign()方法:concat():slice():assign():深拷贝(1)JSON.parse(JSON.stringify(obj))(2)自定义深拷贝函数在 javascript中,变量可以分为两大类:(1)基本数据类型(2)引用数据类型基本数据类型:String、number...

2019-12-04 19:58:47 30

原创 javascript Object.assign()

Object.assign() 用于将源对象的所有可枚举属性的值复制到目标对象。const a = { a:1, b:2, c:3, d:4};const b = { a:1, b:2, c:3 };const c = Object.assign(a, b);console.log(a);console.log(b);console.log(c);运行结果:VM557:4 {a: ...

2019-12-03 20:00:26 65

原创 jQuery empty() VS remove()

empty 和 remove的区别empty()remove()empty()empty() 是移除被选元素的所有子节点,不包括自身。例子:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>test</title> <script ...

2019-12-02 19:12:59 25

原创 NaN

NaN(not a number,非数)表示未定义或不可表示的值。NaN 属于 number 类型。typeof NaN运行结果:"number"NaN 和任何值比较都不相等。NaN === NaN运行结果:falseNaN == NaN运行结果:falseisNaN() 用于检查其参数是否为非数字值。isNaN(NaN)运行结果:trueisNaN('abc...

2019-11-28 19:00:25 41

原创 javascript 去除一个数组中与另一个数组中的值相同的元素

let a = [1,2,3,4,5,6,6,'a','b'];let b = [2,3,4];let c = [];for(let i of a){ if(b.indexOf(i) === -1){ c.push(i) }}console.log(c)运行结果:VM94:9 (6) [1, 5, 6, 6, "a", "b"]let a = [1,2,3,4,5,6,6...

2019-11-27 19:42:14 588

原创 css3 flex 布局——骰子

flex 布局小demo——骰子练习单项目两个项目三个项目四个项目九个项目单项目(1)<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>flex 布局——骰子</title> <style type="text/css"...

2019-11-26 19:39:01 75

原创 VScode 代码注释与取消注释快捷键

没有进行特殊设置的话,代码注释和取消注释快捷键:CTRL + /

2019-11-26 11:10:45 396

原创 javascript 去掉一个字符串中的空格

(1)replace正则表达式替换空格:let str = " kl kkl "console.log(str.replace(/[ ]/g,''))运行结果:klkkl(2)trim():trim()可以去掉字符串开头和结尾的空格:let str = " kl kkl "console.log(str.trim())运行结果:kl kkl(3)split 和 join...

2019-11-21 19:56:14 63

原创 jQuery 获取radio的值

最近维护一个jQuery的项目,需要增加一个点击弹出对话框,进行单项选择,比较简单,但是发现网上好多方法获取不到 radio选项变化之后的值,所以自己试了一些,找到一个可用方法,亲测有效哦:页面布局代码如下:<div id="dialog-audit" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save...

2019-11-20 18:17:07 25

原创 javascript 数组排序

let arr = [1,781,75,12,2,2,3,5,4,4,6,48,7,8];const res = arr.sort(function(a,b){ return a-b;})console.log(res)运行结果:VM877:5 (14) [1, 2, 2, 3, 4, 4, 5, 6, 7, 8, 12, 48, 75, 781]

2019-11-19 19:40:05 21

原创 css 实现三个 div 等分排在一行

(1)box-sizing: border-box;实现:<!DOCTYPE html><html><head> <title>border-box 实现三个div等分排在一行</title> <style> *{ padding:0; margin:0; } .container {...

2019-11-15 14:32:07 3281

原创 javascript caller 和 callee 的区别

callercaller 返回一个函数的引用,这个函数调用了当前的函数。通俗的说法就是:caller 返回调用当前函数的函数。function judgeType(){ console.log(judgeType.caller);}function test(){ judgeType();}test();运行结果:ƒ test(){ judgeType();}te...

2019-11-14 19:52:47 44

原创 css 圣杯布局和双飞翼布局

圣杯布局1、三者都设置向左浮动;2、设置main宽度为100%;3、设置负边距,left 设置负左边距为100%,right设置负左边距为负的自身宽度。4、设置bd的padding值给左右两个子面板留出空间。5、设置两个子面板为相对定位,left的left值为负的sub宽度,right的right值为负的extra宽度。但是,圣杯布局有个问题:当面板的main部分比两边的子面板宽...

2019-11-13 19:00:33 36

原创 css 负外边距

css 负边距static 元素使用负边距无宽度元素使用负边距浮动元素使用负边距应用(1)元素居中(2)多列布局圣杯布局和双飞翼布局负边距是将 margin 的外边距值设置为负数。static 元素使用负边距一个static元素是指没有使用过浮动的元素。例子:<!DOCTYPE html><html lang="en"><head> <me...

2019-11-12 18:30:08 58

原创 css margin 外边距

margin作为属性规定元素的外边距。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圣杯布局</title> <style> *{ margin: 0; padding: 0; } .c...

2019-11-11 18:46:39 26

原创 javascript ['1','2','3'].map(parseInt)

这个问题包含了两个知识点:(1).map 回调函数(2)parseInt() 函数javascript中,Array的方法 .map() 语法如下:语法:array.map(function(currentValue,index,arr), thisValue)参数描述:javascript中,parseInt() 函数语法如下:语法:parseInt(string, rad...

2019-11-08 18:54:05 28

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