- 博客(150)
- 收藏
- 关注
RSS订阅原创 div内容超出自动滚动
情况一：1.要求：div内容超出自动滚动，鼠标进入停止滚动2.效果：3.代码（vue）<template> <div class='container'> <div ref="contentRef" class="content"> <div v-for="item in 20" :key="item" class="contentItem">{{item}}</div> </div&
2022-05-24 01:25:15
5490
原创 Unexpected aliasing of ‘this‘ to local variable.
报错原因：怕全局“this”与局部变量发生混叠。解决：按照eslint官方给出的解决方式在.eslintrc.js文件中备注this可用的局部变量名称{ "@typescript-eslint/no-this-alias": [ "error", { "allowDestructuring": false, // Disallow `const { props, state } = this`; true by default "allowedNames"
2022-05-23 23:15:07
8356
2
原创 css3之calc()设置无效
测试：1.height:calc(100vh-152); //无效2.height:calc(100vh-152px); //无效3.height:calc(100vh - 152px); // 终于起效结论：1.必须加上单位2.必须在运算符左右用空格隔开
2021-06-22 21:24:24
757
原创 单行文本溢出隐藏用省略号代替
1.单行文本溢出隐藏用省略号代替 display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;/*设置为省略号显示*/2.多行文本溢出隐藏用省略号代替 /*多行文本溢出隐藏，省略号代替*/ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orientation: ver
2021-06-18 13:54:50
349
原创 vscode 保存自动格式化代码
settings.json文件内容{ "workbench.editor.enablePreview": false, //打开文件不覆盖 "search.followSymlinks": false, //关闭rg.exe进程 "editor.minimap.enabled": false, //关闭快速预览 "liveServer.settings.donotShowInfoMsg": true, //关闭liveserver提示 "files.autoSav.
2021-02-03 21:52:34
1641
原创 Plop-一个小而美的脚手架工具
功能:用于自动化创建及项目中特定同类型的文件具体使用:将plop模块作为项目开发依赖安装yarn add plop --dev在项目根目录下创建一个plopfile.js在plop file.js文件中定义脚手架任务举例://Plop入口文件 需要导出一个函数//此函数接收一个plop对象,用于创建生成器任务module.exports = plop => { // 第一个参数生成器的名字,第二个参数生成器的描述 plop.setGenerator('com
2021-01-19 22:42:25
280
原创 es6新语法
• 对原有语法进行增强• 解决原有语法上的一些问题或者缺陷• 全新的对象、全新的方法、全新的功能• 全新的数据类型和数据结构1.ES2015 let 与块级作用域(1)全局作用域(2)函数作用域(3)块级作用域2.let var const不用var 推荐const 修改用let3.数组的解构(按照位置提取数据)// 数组的解构 按照位置提取数据const arr = [100,200,300]//1.获取全部值的情况const [foo,bar,baz] = arrcon
2021-01-07 13:01:40
365
原创 typeof和instanceof区别
—typeof因为 ECMAScript 的类型系统是松散的，所以需要一种手段来确定任意变量的数据类型。typeof 操作符就是为此而生的。对一个值使用 typeof 操作符会返回下列字符串之一:"undefined"表示值未定义;"boolean"表示值为布尔值;"string"表示值为字符串;"number"表示值为数值;"object"表示值为对象(而不是函数)或 null;"function"表示值为函数;"symbol"表示值为符号。下面是使用 typeof 操作符的例子:
2020-12-16 23:47:41
1467
1
原创 element tree封装为可控制只可选末级或都可选(2)
接上一篇文章改点需求要求:把只能选择一个末级节点时,其他设置为不可选的地方改为可以再选择其他节点只不过替换掉原来的对节点checkedbox的选择.修改的封装组件的部分method代码: //点击节点触发 nodeClick(data) { if (!this.checkBoxFlag) { this.checkData = [] this.checkData = data } }, //获取
2020-12-16 10:19:21
568
原创 element tree封装为可控制只可选末级或都可选(1)
要求一:只可选择末级节点的数据,所以采用了只有末级节点有checkdbox来控制.要求二:选择末级节点情况下,是控制单选的,采用给每个节点加disabled属性,已选择时其他设置为不可选.要求三:后台传的数据(共三级节点,有的只有二级影响checkedbox展示)需要拿到数据后进行过滤要求四:实用性强,还需要满足节点都可选的业务,也就是说需要父组件传个flag值控制是都可选还是只有末节点可以传封装的组件代码:<template> <vab-dialog ref="di
2020-12-16 09:31:17
2199
原创 使用iconfont快速加图标
网址:https://www.iconfont.cn/今日被要求加几个图标,表示退出登录、消息、待办事项、头像图标.拿到任务先思考一下怎么做合适,参考了一下大家意见都觉得iconfront最适合不过了.使用阿里图标呢,有两种方式第一种,直接下载:可下载svg\png等,还可以调节大小,颜色等信息,也是很方便的.也支持多个一起下载,先添加至小车,后下载.第二种:1.把图标选择好加入小车,在小车里添加至项目2.根据所需可单独编辑图标设置大小颜色,图标格式.然后下载至本地3.下载的压缩包,解压后
2020-12-05 11:14:10
379
原创 JS中的宏任务and微任务
回调队列中的任务称之为[宏任务],宏任务执行过程中可以临时加上一些额外需求.可以选择作为一个新的宏任务进到队列中排队.也可以作为当前任务的[微任务],直接在当前任务结束过后立即执行.微任务:本轮结束后立即执行 ,提高了整体的响应能力注意:目前绝大多数异步调用都是作为宏任务执行微任务举例: Promise MutationObserver process.nextTick测试:console.log('global start');setTimeout(()=>{ cons
2020-12-03 20:12:19
183
原创 javascript之 箭头函数
1.语法: ()=>{函数体}2.举例:let fn = (num1,num2)=>{ return num1+num2 }console.log(fn(3,6)); //打印结果:93.注意点: (1)若参数只有一个可以省略()let fn = v=>{ return v*v}console.log(fn(3)); //打印结果 9(2)若函数体内只有一句话,可以省略{}let fn = (num1,num2)=> num1+n
2020-12-02 22:04:41
162
原创 vscode下的open in Browser VS open with live Server
open in Browser 对应的插件就是open in Browseropen with live Server 对应的插件是 live Server相同点:都是在浏览器中运行html文件不同点:访问地址不同:open in default brower:(访问的是项目保存的电脑地址,会存在图片加载不出来问题)open with live Server:127.0.0.1 就是localhost webstorm打开是localhost问题:利用webpack打包的js文
2020-12-02 17:27:12
2208
1
原创 函数柯里化
建一个函数用于判断年龄值是否大于某一要求值第一种方案:function checkAge(age){ let min = 18 return age>min }此种方案存在硬编码问题(min=18)第二种方案:函数柯里化当一个函数有多个参数的时候先传递一部分参数调用它(这部分参数以后永远不变)然后返回一个新的函数接收剩余的参数,返回结果// 新建一个函数检验age的值是否大于min的值function checkAge(min){ return func
2020-11-27 22:11:44
327
原创 element-ui dialog设置为点击弹窗以外的区域不关闭弹窗
第一种:在el-dialog标签中添加:close-on-click-modal="false"即可<el-dialog title="标题" :close-on-click-modal="false" :visible.sync="dialogEnrol" width="30%"> 弹窗内容</el-dialog>第二种:全局设置在mian.js里面：import ElementUI from 'element-ui';// 修改 el-dialog 默认点击
2020-11-24 09:38:45
6236
2
原创 屏幕录制GIF动图
今天在做笔记的时候发现一张图并不能让我迅速想起来这块代码的功能点.想到之前没有找到迅速制作GIF动图来写csdn文章的情况,最后不了了之,现在又觉得弄不出来难受了.网上也没搜查到什么,查到mac有自带的录屏软件quickTime,但是打开后发现没有权限,设置权限列表的app里面都没有这个软件,让我也无处勾选,后问朋友得知command+shift+5 就可以调出使用mac自带的截图或者屏幕录制功能了.这样确实可以了,但无法上传到csdn文章以及typora笔记中,后经推荐得到一个网址为制作GIF动图,h
2020-11-22 22:34:24
166
原创 本地svn项目用webstorm打开右上角没有提交图标
1.点击VCS下的Enable Version Control Integretion。2.选择svn就出来啦~
2020-11-20 12:39:45
959
原创 css之背景background
1.背景颜色background-color: red;一般情况下元素背景颜色默认值是transparent(透明),我们也可以手动指定背景颜色为透明色.2.背景图片实际开发中常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置(精灵图也是一种运用场景)background-color: none | url(url);3.背景平铺background-repeat: repeat | none-repeat | repeat-x | repeat-y;
2020-11-16 01:18:17
224
原创 css复合选择器
(1)后代选择器又称为包含选择器,可以选择父元素里面的子元素.其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,当标签发生嵌套时,内层标签就成为外层标签的后代. /* 元素1 元素2 {样式声明} 元素2为元素1后代,元素2可以是儿子也可以是孙子 */ol li {color: red;}(2)子元素选择器(子选择器)只能选择作为某元素的最近一级子元素(亲儿子)./* 元素1> 元素2 {样式声明}*/div> p {样式声明} /*选择div里面所有最
2020-11-15 13:39:34
299
原创 ＜a＞标签易忽视的两个使用
1.文件下载<a href="base.zip"></a>此处那本地压缩包测试,其他格式的文件也是可以的,文件下载用到的就是这个属性.例如之前写的一篇文章就是用的这个属性的作用PDF文件下载2.跳转本页面的某个位置<a href="#cat">猫咪</a><!--此处省略很多代码--><h4 id="cat">猫咪简介</h4>href中由#加要跳转部分id名称,点击即可跳转到id地方...
2020-11-14 00:02:11
68
原创 vue+element ui复杂表单的验证
1.应用场景：一个form表单对象中又包含好几个对象，其中包含联系人对象2.表单： newaddForm: { code: "", dwmc: "", dwdd: "", sjbm: "", zxyp: "", qyxz: "", khgxrs: [{}], cjhzdws: [{}], tjlshzs: [{}], },3.验证规则：正常
2020-10-29 16:32:58
1325
1
原创 父组件调用弹窗子组件
封装的子组件代码：<template> <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body @close="handleClose"> <el-upload ref="upload" :limit="1" accept=".txt, .docx, .bpmn, .bar, .zip" :headers="upload.headers" :
2020-10-24 23:55:45
260
原创 父组件调用弹窗子组件
父组件：<template> <div> <el-button @click="show">按钮</el-button> <!-- 弹框子组件 --><!-- :addOrUpdateVisible为子附件props内的名字，先写props再调用--><!-- changeShow为子组件emit的方法名字--> <mydialog :addOrUpdateVisible=
2020-09-12 18:43:30
1644
原创 Java 字节流
1.IO流按数据类型分为：字节流和字符流2.使用：如果数据可通过Windows自带的记事本软件打开并且不乱码，就使用字符流；否则使用字节流；如果不知道使用哪种就使用字节流。3.字节流写数据与异常捕获 FileOutputStream fileOutputStream = null; try { //刷新写入数据 // fileOutputStream = new FileOutputStream("/Users/fuguangwu/itcast
2020-09-12 16:04:58
1004
原创 vue非父子组件传值
1.单独的事件中心管理组件间的通信var eventHub = new Vue()2.监听事件与销毁事件eventHub.$on('add-todo',addTodo)eventHub.$off('add-todo')举例：（1）事件中心（js文件）import Vue from 'vue'const hub = new Vue()export default hub（2）组件A<template> <div> {{value2}} &l
2020-09-03 23:06:55
471
原创 vue中使用echarts
安装echarts依赖npm install echarts -S或者使用淘宝的镜像npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install echarts -S创建图表首先需要全局引入在main.js中// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echartsvue中代码：<template&g
2020-08-17 21:50:58
237
原创 修改element ui中的样式
方法一：去掉scopedscoped会把央视局限在当前页面，无法覆盖element-ui的原有样式。方法二 使用 /deep/.homePage /deep/ .el-main {padding: 0;}.homePage为我们要修改组件类名的父级组件样式类名。.el-main为我们要修改组件的样式。或者/deep/ .el-form-item__content{margin-left: 140px !important;}...
2020-07-11 23:16:04
1203
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人