choupixiaolin的博客

原创 tinymce富文本编辑器内容改变后，编辑器光标位置重置到最前面的问题

tinymce富文本编辑器内容改变后，编辑器光标位置重置到最前面的问题

原创 video标签获取视频第一帧

video标签获取视频第一帧

原创 本地代码上传到git仓库

本地代码上传到git仓库

原创 elmentui 提示框input校验(属性inputValidator的使用)

elmentui 提示框input校验(属性inputValidator的使用)

原创 elementUI下拉框回显时未显示label而是显示value问题!!!

elementUI下拉框回显时未显示label而是显示value问题!!!

原创 js解码16进制中文乱码问题

原创 js实现批量下载文件--点击一次执行多次(利用iframe标签)

a标签及href指向的如果是一个下载链接，那么相当于下载文件，对于单文件下载还是ok的，不过快速点击几个下载按钮，有的下载会被Cancelled <el-dialog title="批量录音下载" :visible.sync="dialogVisible" width="30%" :before-close="closeDown" > <span>请确认一共下载{{ dowmloadNum }}条...

转载 session,cookie,sessionStorage,localStorage的区别及应用场景

浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式，可以利用cookie,session等跟服务端进行数据交互。一、cookie和sessioncookie和session都是用来跟踪浏览器用户身份的会话方式。区别：1、保持状态：cookie保存在浏览器端，session保存在服务器端2、使用方式：（1）cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie

原创 ES6/ES7/ES8特性

ES6ES71.Array.prototype.includes() 方法 在 ES6 中我们有 String.prototype.includes() 可以查询给定字符串是否包含一个字符，而在 ES7 中，我们在数组中也可以用 Array.prototype.includes 方法来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。const arr = [1, 3, 5, 2, '8', NaN, -0]arr.includes(1...

原创 VUE项目中遇到的一些问题(壹)

vue错误：Cannot set property 'render' of undefined at normalizeComponent...vue文件写了script标签对，却没写export default {} 这句语句...vue Router中导航守卫完整的导航解析流程导航被触发。 在失活的组件里调用beforeRouteLeave守卫。 调用全局的beforeEach守卫。 在重用的组件里调用beforeRouteUpdate守卫 (2.2+)。 ...

转载 vue项目bug解决记录_These dependencies were not found:

项目打包时出现了这种问题，是一个叫core-js的包出了问题；These dependencies were not found:* core-js/fn/array/flat-map in ./node_modules/@babel/polyfill/lib/noConflict.js* core-js/fn/promise/finally in ./node_modules/@babel/polyfill/lib/noConflict.js* core-js/fn/string/pa.

原创 element-ui中的疑难杂症

element-ui table下方出现滚动条的情况在使用element-ui table组件时，浏览器中出现了两条横向的滚动条，一条是浏览的自己的，一条是table的。table出现滚动条的原因是父元素的宽度不够，所以只要给父元素足够的宽度table的滚动条就会消失。更改elementUI组件样式而不会影响到全局样式在外层容器添加唯一class，在style样式钱加上".容器class名"多个table时要设定不同且唯一的row-key，否则多个table会混淆调用的api...

原创 七种设计模式

单例模式确保某一个类只有一个实例，并且提供一个全局访问点当系统中只需要一个实例对象或者系统中只允许一个公共访问点，除了这个公共访问点外，不能通过其他访问点访问该实例时，可以使用单例模式。使用场景 实现登录弹出框时只弹出一个框(只动态生成一个登录弹出框的div) 对数据库进行操作的时候用 第一次调用mysql的操作函数 执行连接 把连接对象进行保存 后续在调用时 直接使用保存的连接对象优点 减少全局变量的污染 同时也很好的解决了命名冲突 只需要创建一次...

原创 event事件

event对象 任何事件的触发都会产生event对象event事件对象属性键盘事件onkeydown 按下键盘触发onkeyup 松开键盘触发onkeypress 按下并松开键盘上每个按键都有对应的ascii码事件冒泡当最里面的元素触发了事件的时候，会依次向上触发所有元素的相同事件（从触发事件的元素开始一直向上触发） 阻止事件冒泡event.stopPropagation();说明：stopPropagation是事件对象Event的一个方法，作用是阻止目标元素事件冒泡到父级元...

原创 面试题(一)

多维数组的遍历<script> var arr=[["sdf",57,08],5,[1,3,85,[55,10],520],9]; function factoryArr(arr) { for(let val of arr){ // console.log(typeof val); // console.log(val); // var .

转载 Math.round()，Math.ceil()，Math.floor()的区别

1.Math.round()：根据“round”的字面意思“附近、周围”，可以猜测该函数是求一个附近的整数，看下面几个例子就明白。四舍五入小数点后第一位<5正数：Math.round(11.46)=11负数：Math.round(-11.46)=-11小数点后第一位>5正数：Math.round(11.68)=12负数：Math.round(-11.68)=-12小数点后第一位=5正数：Math.round(11.5)=12负数：Math.roun..

转载 getElementById和querySelector区别

1.常见的获取元素的方法有3种，分别是通过元素ID document.getElementById('idName');、通过标签名字document.getElementsByTagName(tagName);和通过类名字document.getElementsByClassName('className');来获取。2.querySelector(‘.className') 方法返回匹配指定 CSS 选择器元素的第一个子元素 。 该方法只返回匹配指定选择器的第一个元素。如果要返回所有匹配元素，.

原创 弹性盒子 / 怪异盒 / 媒体查询

弹性盒 display:flex;一//flex的属性（给父元素设置 控制灵活元素）flex-direction 设置主轴 row x轴顶端对齐（左）默认值 row-reverse x轴底端对齐（右） column y轴顶端对齐（上） 默认值 column-reverse y轴底端对齐（下） flex-wrap 设置换行 nowrap 挤压内容不换行 默认值 wrap 自动换行 wrap-r...

原创 BOM / DOM

BOM browser object model 浏览器对象模型location 地址栏对象 提供了对地址栏操作的方法和属性history 浏览器对象 提供了对浏览器历史记录操作的方法和属性screen 屏幕对象 获取屏幕信息navigator 浏览器对象 提供获取浏览器信息的方法和属性document 代表整个网页 DOM的根节点window 浏览器最大的对象window的属性window.innerWidth 获取浏览器可视区的宽度window.innerH...

原创 ES5/Math数学对象/进制转换/日期对象

ES5(ECMAscript5)严格模式 将 "use strict"放在<script></script>的第一行ES5新增数组方法字符集 (uft-8/gbk) 将汉字转化为二进制的编码 保存数据和解析数据都要使用 保持一致 避免乱码 http://www.ip138.com/ascii/字符串方法...

原创 JavaScript数组

数组可以存放多个任意类型的值两种声明方式 var arr=new Array( ) / var arr=[元素1,元素2,元素3......]数组的索引 从0开始 最大为arr.length-1 (arr.length为数组的长度)遍历数组,使用for()for(key in array){ array[key] } key 就是数组的下标多维数组[ ]中嵌套[ ],索引方式 比如 arr[ 2 [ 0 ]]数组的属性和方法属性 length 获取数...

原创 JavaScript函数

function函数

原创 JavaScript基础(数据类型/运算符/分支结构)

js的组成：ECMAScript、DOM、BOMjs的三种引入方式 1.外联引入 <script src="js文件路径"></script> 2.内联引入<script> 在标签内写入脚本</script>不管script写在某个位置，都会自动识别到对的位置 3.行内 比如： <p onclick="alert(弹跳框中的内容)">需要点击文本内容才能出现弹跳框</p>js的输出...

原创 页面实战难点

搜索框难点 文本框和按钮的间隙还有对齐问题 解决： 浮动解决 按钮的大小计算不是按照标准盒模型计算，按钮的高度包含边框 解决： 把按钮的边框距离加上...

原创 css3

属性选择器

原创 盒模型问题

margin常见的bug margin的重叠问题 上下排列的两个盒子之间，都设置margin，上下的margin会重叠，谁的外边距大设置谁 解决办法：设置一个margin就行 margin-top的传递问题 当大盒子的第一个子元素设置margin-top的时候，margin-top会错误的传递给父元素设置 解决方法： 设置父元素 ...

原创 css属性

css字体属性

原创 css选择器

伪类选择器（超链接常用）a:link {color: red;} /* 未访问的链接状态 */ a:visited {color: green;} /* 已访问的链接状态 */ a:hover {color: blue;} /* 鼠标滑过链接状态 */ a:active {color: yellow;} /* 鼠标按下去时的状态 */说明：1）当这4个超链接伪类...

原创 查错方法

控制台F12差错1：控制台上看得见的如果有黄色感叹号，说明是单词、语法

原创 css基础

css（cascading style sheet 层叠样式表）css样式表1 内部样式表- 在head中添加<style> 选择器{属性：属性值;属性：属性值;}<style>2 外部样式表- 新建一个css文件- 用link标签关联css文件 在head中添加 <link rel="stylesheet" type="text/css" href="css/demo.css"> ...