前端
曾、小闲
我很闲
展开
-
使用vscode编辑vue模板
在用vscode做vue项目时,每次新建vue页面都需要自己写各种方法,比较麻烦,其实可以写片段模板,每次新建vue页面后输入关键字就可以出现模板。在文件 -》 首选项 -》 vue.json -》 进入编辑:效果:新建vue页面,直接输入vue关键字,回车,效果:...原创 2019-11-07 15:01:59 · 1306 阅读 · 0 评论 -
关于vue中css源文件路径在控制台显示
vue中css源文件在控制台显示与隐藏是通过config中index中cssSourceMap来控制的,为true就显示 为false无法显示原创 2019-10-31 13:51:24 · 1096 阅读 · 0 评论 -
使用z-index属性需要注意的事项
z-index是用来提高元素层级关系的,数字越大层级越高需要注意的:被使用的元素必须是定位元素最近在做项目时使用了z-index发现下面的文字还是没被遮挡找了好久才发现自己忘了给元素添加背景颜色,所以背景颜色默认为透明的,此时加上白色背景下面的文字就被遮住了所以在使用z-index时除了要给元素添加定位,还必须要加上背景颜色...原创 2019-10-24 16:33:28 · 679 阅读 · 0 评论 -
element-ui中el-table添加动态高度,添加窗口监听事件
1.在el-table中添加动态高度:2.定义动态高度变量:3.写动态高度方法 :4.监听窗口发生变化时表格高度动态变化:原创 2019-10-23 09:08:40 · 2272 阅读 · 0 评论 -
关于element-ui中el-table表头和表体错位及边框不显示问题
element-ui中自带的一个bug,在2.0.4版本中已经得到了修复解决方法:将element-ui版本升级到2.0.4就可以正常显示表格了原创 2019-10-21 11:38:19 · 4491 阅读 · 0 评论 -
动态设置rem的相对值
在运用rem时,想要在页面变化时达到自适应的效果,那么rem的相对值,也就是body或者html的字体大小要成比率进行变化,可以用以下方法:(function () {resize();// 动态设置font-size大小zfunction resize() {var wH = window.innerHeight; // 当前窗口的高度var wW = window.innerWid...原创 2019-08-26 09:53:46 · 428 阅读 · 0 评论 -
将科学计数法转为数值类型
function toNonExponential(num) {var m = num.toExponential().match(/\d(?:.(\d*))?e([±]\d+)/);return num.toFixed(Math.max(0, (m[1] || ‘’).length - m[2]));}toNonExponential(3.3e-7) // “0.00000033”to...原创 2019-08-21 10:33:37 · 1400 阅读 · 0 评论 -
关于判断浏览器方法
方法:通过拿到浏览器的userAgent字符串做判断function myBrowser(){var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串if (userAgent.indexOf(“Opera”) > -1) {return “Opera” //判断是否Opera浏览器};if (userAgent.in...原创 2019-08-14 09:41:13 · 177 阅读 · 0 评论 -
用vscode打开多个项目
点击 菜单栏(文件)—> 将文件夹添加到工作区原创 2019-08-02 13:40:44 · 408 阅读 · 0 评论 -
在vscode中添加vue的模板
1.安装VueHelper扩展,安装后重启以下vscode2.打开用户代码片段方法一:Ctrl+Shift+P打开命令输入 snippets; 在搜索框输入vue选择‘vue.json’。方法二:文件 → 首选项 → 用户代码片段 → 在搜索框输入vue选择‘vue.json’3.清空内容,输入模板,具体格式如下(可根据自己的喜好进行修改) 其中$0代表模板生成后,光标停留的位置:{“...原创 2019-08-30 14:06:19 · 286 阅读 · 0 评论 -
vue-cli项目打包
1.打开webpack.dev.conf.js文件,找到publicPath: config.dev.assetsPublicPath,按Ctrl点击,跳转到index.js(config/index.js)文件2.其中dev是开发环境,build是构建版本,找到build下面的assetsPublicPath: ‘/’,然后修改为assetsPublicPath: ‘./’,即“/”前加点...原创 2019-09-09 11:02:54 · 189 阅读 · 0 评论 -
搭建express项目
1.下载express:cnpm/npm i express --save-g2.安装express生成器:cnpm/npm i express-generator -g3.express myapp4.cd myapp5.启动 node start或者node app.js6.在浏览器中输入localhost:3000 查看项目...原创 2019-09-09 15:25:11 · 205 阅读 · 0 评论 -
使用vue中element组件的表格树形结构遇到的坑
在使用element的表格树形结构时候报错:[Vue warn]: Error in callback for watcher “data”: “Error: if there‘s nested data, rowKey is required.”解决方法 :第一种:查看element-ui的版本,我使用的是"2.8.2",后来换成"2.3.2"就没问题了,网上很多人说要加上row-key=...原创 2019-09-18 10:36:48 · 9593 阅读 · 1 评论 -
关于network中timing详解
参数具体含义:Queueing:请求文件顺序的排序。浏览器是有线程限制的,发请求也不能所有的请求同时发送,会将请求加入队列中(Chrome的最大并发连接数是6)。此参数表示从添加到待处理队列,到实际开始处理的时间间隔标示。Stalled(阻塞):浏览器得到要发出这个请求的指令,到请求可以发出的等待时间,一般是代理协商、以及等待可复用的TCP连接释放的时间,不包括DNS查询、建立TCP连接等时...转载 2019-09-29 11:29:25 · 2886 阅读 · 0 评论 -
关于bootstrap-table在不使用工具栏时表头上面出现多余的留白
在使用bootstrap-table时,没有用到自带的工具栏,发现表头上面还是有多余的位置,找了一下元素,发现虽然没有使用工具栏,但是元素中还是会有fixed-table-toolbar这个工具栏的类,虽然高度为0,但还是会占空间,导致表头上面留白,设置margin为负数用处不大,而且影响整体布局最终解决方案,直接隐藏元素就可以了结果:...原创 2019-08-06 10:14:34 · 1625 阅读 · 0 评论 -
vuex运用
1.下载:npm/cnpm i vuex --save-dev 局部npm/cnpm i vuex -g 全局2.使用:2-1:引入 import Vuex from ‘vuex’2-2 使用:Vue.use(Vuex)2-3 全局暴露2-4 配置 common user引入common user...原创 2019-07-23 14:12:59 · 83 阅读 · 0 评论 -
vue中的路由Router
1.在脚手架项目中下载路由:cnpm/npm i vue-router --save-dev 项目中布局cnpm/npm i vue-router -g 全局下载2.使用:2-1 引入: import Router from ‘vue-router’2-2 使用: Vue.use(Router)2-3 配置:全局路由:主入口路由...原创 2019-07-23 11:48:09 · 157 阅读 · 0 评论 -
关于CST标准时间转化,14小时差距
将Wed Jul 17 02:02:02 CST 2019 转化为标准时间:function dateFormat (date, format) {date = new Date(date);date.setHours(date.getHours()-14); //转化过程会有14小时的差距var o = {‘M+’ : date.getMonth() + 1, //month‘...原创 2019-07-08 10:53:51 · 1141 阅读 · 0 评论 -
上传图片(仿原生写法、cropper插件写法)
1.仿原生写法:(多张上传)html: 点我上传文件 js:上传改变事件:提交上传请求:上传成功后回显:删除上传的图片:提交表单:2.cropper插件写法:(单张上传)html: 点我上...原创 2019-07-05 09:49:37 · 152 阅读 · 0 评论 -
bootstrap-table在设置高度固定表头后,表头与表内容不对齐情况
在使用bootstrap-table时,如果想要实现表头固定,就要设置高度属性,但是设置高度属性后会导致表头和表内容错位1.设置高度:2.表头固定但是表头和表内容错误查了很久,发现是因为设置高度后新生成了一个表头,与之前的表头的宽度不一致,所以将新生成的表头的宽度设置为整数,将表内容也设置成整数即可3.设置宽度4.效果,表头和表内容对齐注意:高度设置可以用方法动态设置fun...原创 2019-07-10 17:20:21 · 7506 阅读 · 3 评论 -
input中file文件上传改变事件问题
在input为file类型时,改变事件错误后不执行问题:1.改变事件:上传文件2.在读取文件之前发送请求,验证文件类型是否正确:不正确:提示用户,中断,再次验证错误文件类型就不执行改变事件,此时多做一步,将input中的值清空即可3.正确:读取文件流4.提交表单验证5.回显...原创 2019-07-05 15:13:22 · 5642 阅读 · 0 评论 -
关于上传图片中标题一直显示未选择任何文件问题
原生的input框中,当选择上传文件回显后,上传按钮上还是会显示未选择任何文件:这个是无法解决的,想要去掉只能仿原生写:点我上传文件利用label代替input中的上传按钮,input隐藏即可,此时未选择任何文件不在显示...原创 2019-07-05 16:56:00 · 4414 阅读 · 0 评论 -
vue-cli目录详解
vue-cli脚手架目录一览最近在学习vue,看的稀里糊涂。今天从头开始,把cli配置的vue项目目录和配置文件搞清楚。先看看整个项目目录结构:再看看build文件夹下相关文件及目录:config文件夹下目录和文件:接下来说说vue-cli项目中页面相关的主要文件o首先是index.html:说明:一般只定义一个空的根节点,在main.js里面定义的实例将挂载在#app节点下,...转载 2019-07-23 16:10:55 · 1833 阅读 · 0 评论 -
关于bootstrap-table中刷新时有白色背景遮盖loading
bootstrap-table在使用时,翻页切换后者刷新时,表格会有白色的背景,是因为在css样式中,设置了样式:将背景颜色修改后,loading正常显示原创 2019-07-19 14:45:46 · 2094 阅读 · 0 评论 -
vue中axios的运用
1.下载:npm/cnpm i axioscdn: 2.页面引入:import axios from ‘axios’3.使用:**// 发送 POST 请求axios({method: ‘post’,url: ‘/user/12345’,data: {firstName: ‘Fred’,lastName: ‘Flintstone’}}).then(function (...原创 2019-07-24 10:10:53 · 203 阅读 · 0 评论 -
关于echarts加载地图的坑
项目中下载的echarts是3.8.5版本的,不知道为什么,下载后加载地图一直不显示,后来重新引入完整版的echarts资源,就可以显示了所以在不考虑体积的情况下,建议下载完整的echarts资源下载完整echarts的地址:https://echarts.baidu.com/dist/echarts.min.js...原创 2019-07-30 11:22:57 · 5088 阅读 · 1 评论 -
在vue-cli项目中使用jquery
在vue中使用jquery步骤:1.下载:cnpm/npm i jquery --save2.加载webpack,配置jquery,加入以下配置3.重启项目原创 2019-07-30 15:11:11 · 370 阅读 · 0 评论 -
关于input为file时获取的files为伪数组
在开始时,遇到input为file,获取到files后,刚开始以为files是数组,于是用了数组中的一些方法,发现报错,一直得不到想要的结果,于是大胆猜想files为伪数组,并将之进行转化,转为真正的数据就能运用数组的方法操作了转化前转化后通过 files = Array.prototype.slice.call(files);进行转化...原创 2019-07-25 16:19:42 · 1074 阅读 · 0 评论 -
vue项目中踩过的坑-this
在vue项目中,this一般指向vue对象,可以使用this.routethis.route this.routethis.staore 等方法,但是遇到一个this指向发生变化的坑项目中使用echarts组件,在触发图表点击事件时,this不再指向vue对象,而是指向echarts组件,此时用 this.$staore会报错:此时解决方法为:将指向vue点的this保存给一个变量 _...原创 2019-07-31 15:47:56 · 997 阅读 · 2 评论 -
前端流行的三种布局详解
目前比较流行的布局有三种1.流式布局:含义:页面元素的宽度按照屏幕分辨率进行适配调整,但整体布局不变。这就导致如果屏幕太大或者太小都会导致元素无法正常显示设计原理:使用百分比定义宽度,高度大都是用px来固定,可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。缺点:在过大或者过小的屏幕下,元素不会正常显示,会错位正常屏幕效果:过小屏幕下:2....原创 2019-07-26 17:08:39 · 1250 阅读 · 0 评论 -
关于vue项目启动
需要下载node.js环境,并下载npm cnpm1.新建文件夹:2.在git上找到项目并复制:git clone 项目链接3.进入目录renren-new1-cmd-粘贴项目链接4.cd 克隆下来的项目名 - cnpm i5.npm run dev关于vue中比较重要的vue-route 和 vuex 后面再记录...原创 2019-07-23 11:26:21 · 99 阅读 · 0 评论 -
开发注意事项(自适应、内外边距,rem)
1.开发自适应布局:宽度和高度尽量用百分比,内外边距和字体用rem,rem是相对于html设置的字体大小为基准,比如:html设置字体大小为16px 那么1rem=16px,如果不设置,默认为16px高度自适应布局:上下设置固定单位的高度 中间内容用margin-top和buttom 高度设置为 height:auto宽度自适应布局:左右分别设置固定宽度,并且进行左右浮动,中间部分设置m...原创 2019-05-29 17:21:49 · 747 阅读 · 0 评论