自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 CSS常用的属性方法

清除浮动 .clear:after { content:''; display:block; clear:both; height:0; overflow:hidden; visibility:hidden; } .clear { zoom:1...

2019-11-01 09:32:09

阅读数 49

评论数 0

原创 工具类

格式化数字 千分位 format(num) { var reg = /\d{1,3}(?=(\d{3})+$)/g return (num + '').replace(reg, '$&,') }, 限制输入框只能输入...

2019-10-14 10:21:46

阅读数 29

评论数 0

原创 Vue项目中稳健的获取dom元素

1、获取Element的弹框中的Dom元素 **由于弹框由v-if控制,在初始页面渲染的时候,并不存在该Dom元素,所以在mounted中,获取不到该弹框的Dom元素,无法添加原生时间,如下拉加载** 下面提供稳健的获取弹框Dom元素的方法, 首先,由于弹框是由v-if判断,则可以在watc...

2019-10-09 09:52:30

阅读数 39

评论数 0

原创 表单布局

表单布局 对于横向一致排开的搜索表单(上搜索下结果),最好使用固定框宽度的布局,可以结合element表单控件 在布局的时候,最好能统一html标签格式(如,统一将class放在标签第一位,并且该class带有语义性),使其易于区分和语义化,如下面的结构就是很好的结构,区分度大,代码可维护性高 &...

2019-09-27 10:10:51

阅读数 102

评论数 0

原创 Echarts的初始化及数据为空的处理

首先需要确保图表的容器存在,然后再开始渲染(v-if或者嵌套在弹框内) 且对于图表类的需求,最好写成组件以复用 <div ref="chartContainer" class="chart-container"/> import echart...

2020-03-30 14:27:32

阅读数 9

评论数 0

原创 Element表格二次封装

基础表格(修改表头及移除默认hover事件) <template> <el-table class="table-wrapper" :data="tableData" border style=&quo...

2020-03-19 10:19:27

阅读数 18

评论数 0

原创 Vue限制输入框只能输入数字

<el-input v-model="weiboID" @input="numValid('weiboID')" style="height:100%;" size="small">&l...

2020-03-18 11:27:18

阅读数 27

评论数 0

原创 Element 上传控件

Element上传控件可以只作为获取文件的途径 文件格式的上传,需要配合表单 <el-upload class="upLoad-box" :limit="1" ref="upLoad" action ...

2020-03-18 11:02:43

阅读数 16

评论数 0

原创 Element 日期控件 日期限制

开始时间不能大于当前时间,且结束时间不能小于开始时间 <el-date-picker style="width:180px;" v-model="startDate" size="mini" type...

2020-03-18 10:24:54

阅读数 24

评论数 0

原创 Element表格自定义表头注意事项

当自定义表头用于点击排序操作,此时随着排序规则改变对应icon也应改变,而此时需要添加slot-scope属性,来使其变为作用域插槽,从而使其可以动态变化 如果不是作用域插槽,则插槽对应页面不会重新渲染 ...

2020-03-16 11:48:52

阅读数 13

评论数 0

原创 优化需要条件满足的if else语句

遇到从上而下执行的判断语句,除了利用if进行逐条判断,还可以利用或关系及处理函数解决 if (plantArrLength === 0) { this.$message.error('请选择数据来源') return } if (!this.timeArr) ...

2020-03-04 11:34:35

阅读数 37

评论数 0

原创 Vscode的Emmet的一些快捷操作

语法规则 E 代表HTML标签。 E#id 代表id属性。 E.class 代表class属性。 E[attr=foo] 代表某一个特定属性。 E{foo} 代表标签包含的内容是foo。 E>N 代表N是E的子元素。 E+N 代表N是E的同级元素。 E^N 代表N是E的上级元素。 快捷选中 ...

2020-03-04 11:04:57

阅读数 25

评论数 0

原创 Element嵌套弹框蒙层混乱处理

可以在第二层的弹框上面绑定 append-to-body 属性 <el-dialog class="body-dialog" append-to-body ></el-dialog> 但此时该弹框为出现在body的子元素,...

2020-02-28 10:33:41

阅读数 33

评论数 0

原创 DOM操作之获取窗口宽高&&元素样式

获取视口宽高 function getVierPortOffset(){ if(window.innerWidth){ return { w:window.innerWidth, h:window.innerHeight, } }else{ ...

2020-02-27 09:45:18

阅读数 38

评论数 0

原创 Webpack打包不同的测试环境以及对应包名

输出值不同 在脚本中 若在config下的index中有 console.log(process.env) 则会在打包的控制台中有输出,在npm run dev这种的环境不会有输出 此处的值与packgae.json中定义的值完全相同 而若是在自己定义的js模块中,打印process.e...

2020-02-25 15:34:38

阅读数 77

评论数 0

原创 解决设置min-height的子元素高度为百分比不生效的情况

不生效的情况 <div class="box-inner"> <div class="content"></div> </div> .box-inner{ m...

2020-02-24 12:13:59

阅读数 102

评论数 1

原创 正则表达式 -- kebab-case转PascalCase

let str = 'aa' str.replace('a','b') => 'ba' //只能替换一个 let reg = /-(\w)/g; let str = "the-firs...

2020-02-18 10:42:34

阅读数 42

评论数 0

原创 Echarts图表在切出页面resize后空白的问题

如若使因为使用了Vue的缓存组件 activated(){ var myEvent = new Event('resize'); window.dispatchEvent(myEvent); }, 则可以通过该缓存组件的activated,...

2020-02-13 14:27:44

阅读数 33

评论数 0

原创 通过闭包对computed进行传参

进行传参 <i :class="arrowSortDown('time')" ></i> arrowSortDown () { let that = this return function (typeName)...

2020-01-03 11:40:32

阅读数 49

评论数 0

原创 video标签在ios和安卓下的不同表现

在微信和微博下的表现(未考虑一般浏览器) 可以添加h5同层播放器属性, 但需要区分安卓和ios, 两种终端可以添加不同的同层播放器属性来达到不弹窗播放的效果, 但是此时静音无法通过物理按键取消(待优化) play()方法只有通过触碰dom元素才可以触发 设置了autoplay的属性, 若无法自动...

2019-12-27 09:42:17

阅读数 37

评论数 0

原创 微信小程序授权

首先要清楚小程序的几种授权,且oppenid是可以静默拿到,不需要授权 所以,在获取oppenid这一块,可以写在app.js的onLaunch中,并且在封装好的post和get请求中,直接全局加入oppenid参数,并且在请求前如果没有oppenid,直接先进行获取,确保每一次请求都携带着opp...

2019-12-12 10:11:13

阅读数 21

评论数 0

原创 获取元素至可视区域的位置

在滚动条滚动过程中,如果需要在滚动到某一区域才展示某一元素可以利用 getBoundingClientRect() 里面包含了至可视区距离的信息

2019-12-11 09:40:33

阅读数 19

评论数 0

原创 图片随滚动条距离变化而变化

首先,需要明确所要实现的效果 滚动条上推时页面恢复原样 当滚动条下拉的时候,顶部的样式出现变化 最开始的思路,是想着利用自定义滚动条的原理去做,通过页面与滚动条所成比例进行,高度的设置,但是效果并不理想。首先步骤复杂,其次卡顿效果明显。 解决方案 通过css3中的 transition 加 s...

2019-12-10 11:59:08

阅读数 25

评论数 0

原创 Element选择框多选时增加全选按钮

要实现的目标,即在选择框的基础上,实现多选框的效果 最重要的一点是,新旧值的保存,且值的变化只能通过Element提供的方法去获取,不能通过Vue事件监听,因为要改变被选中的值 对于不是通过Element的方法修改的新值,对应的旧值也需要做更改,这样在回显的时候,即可保持一致 ...

2019-12-05 09:37:16

阅读数 132

评论数 0

原创 未解决的bug----

镰刀布局 Video组件 自动播放的兼容问题 controls黑边问题 安卓下唤出键盘页面抖动的问题

2019-11-28 09:37:23

阅读数 17

评论数 0

原创 由Echarts自定义图标引起的对图片Base64位的思考

由于echarts中自定义下载图标的时候,其不支持相对路径的写法,只支持网上地址,或者base64的写法 由于在vue项目中,webpack会把小于限制的图片转为base64位,所以利用过这一点去将icon转为base64然后直接粘贴过去,以为和项目里的静态资源还有联系,其实,转为base64后...

2019-11-27 10:00:07

阅读数 41

评论数 0

原创 Echarts有无数据的渲染

在柱状图中,如果可以点击切换数据,在有数据的时候显示正常,如果没有数据的时候,不想显示空白柱状图,而显示暂无数据。 首先一点,要明确v-if和v-show对echarts的影响 v-show 只是设置了元素的display属性为none,在切换的时候没有获取到元素的宽高所有会有问题 v-if 可...

2019-11-27 09:48:20

阅读数 22

评论数 0

原创 表格中表格排序通用方法

需求是,一个表格有几种排序方式,每次只按其中一种方式排序,切换排序方式的时候,默认倒序

2019-11-25 15:10:52

阅读数 71

评论数 0

原创 微信小程序,图片加载问题

异步请求获取图片 图片为异步请求,加载较慢,若没有给图片设置默认的高度,那么在获取dom元素的信息的时候,如果写在onLoad或者onReady中,会出现获取错误的情形 正确做法为 给图片一个默认的高度,可以通过相对单位vw来设置,并调整至图片不被拉伸,或者添加不被拉伸属性 获取DOM元素的方法...

2019-11-15 10:50:22

阅读数 77

评论数 0

原创 Vue全局注册filters

Vue全局注册filters 首先,在src中定义filters文件夹,在index.js中定义过滤函数, 如千分位的过滤函数 /** * 10000 => "10,000" * @param {number} num */ export functi...

2019-11-13 10:11:49

阅读数 69

评论数 0

原创 Vue表格组件复用

复用的原则,将DOM的操作交给开发者,比如表头和表体,而封装只是将,样式和一些通用的方法进行封装。 目前想法是通过插槽进行实现,表格外框的内容是固定的,但是表头和表体是通过插槽引入的。相当于表格只是一个空壳子。这样就可以在样式上面少改很多代码,但是需要注意如果有操作项的时候,目前需要注意是否要父子...

2019-10-25 10:39:01

阅读数 75

评论数 0

原创 对Vue一些方法的理解

Vue.filter 场景:时间戳转化成年月日这是一个公共方法,所以可以抽离成过滤器使用 并且可以在HTML标签中使用,这就可以在v-for中使用 // 使用 // 在双花括号中 {{ message | capitalize }} // 在 `v-bind` 中 <div v-bind:...

2019-10-17 10:03:22

阅读数 34

评论数 0

原创 Vue路由传参及传参后刷新导致参数消失处理

在刷新后,使路由传递的参仍然存在 this.$router.push({ name: 'test2', query: { id: '1' }}) 获取参数 this.$route.query.id 原理是通过在路径上面绑定参数传递。

2019-10-16 18:21:20

阅读数 49

评论数 0

原创 Vue路由升级导致的错误

Uncaught (in promise) 解决方法一:在调用方法的时候用catch捕获异常 this.$router.replace({ name: 'foo' }).catch(err => { console.log('all good')...

2019-10-16 16:47:29

阅读数 12

评论数 0

原创 自定义背景的进度条

在一个需要用到进度条的场景下,且背景是图片,可以利用裁剪功能来进行完成 下面提供思路 关键点在于rect(0px, params + ‘px’, 0px, 0px) 中的params位置不能写死,需要配合JS,或者Vue中的模板表达式来进行设置,提供后一种实现代码 <img src=&...

2019-10-14 15:26:38

阅读数 15

评论数 0

原创 Loadsh中的防抖

前提条件 **在给Vue中添加原生滚动条事件的时候出现了,出现了使用鼠标滚轮滑动时,再容器底部会抖出一部分距离** *在这一小部分距离即会,连续触发两次下拉加载函数* ![小范围抖动](https://img-blog.csdnimg.cn/20191012111801471.png) ...

2019-10-12 11:24:28

阅读数 39

评论数 0

原创 vue中异步数据获取(确保数据被获取)

1、获取异步数据,通过async/await限制 import { fetchList } from '@/api/article' //在created中即开始获取 created() { this.getList() } methods:{ async get...

2019-09-23 15:58:23

阅读数 691

评论数 0

原创 使用下拉框,模拟单选框效果

踩坑较多,记录下来,分析坑点,填坑 首先,数据由两个接口返回 1、一个为选择框固定信息,以及选择框中的每个选项后面所跟的可以选填的输入框 2、一个为用户选填的输入框信息 其次,每个选择框所选中的值,不能出现重复项 再者,可以动态添加选择框,内容默认展示条目内容,且不能重复,且上限为条目内容的上限 ...

2019-09-20 10:41:49

阅读数 51

评论数 0

原创 图片防盗链问题

<meta name=referrer" content=“no-referrer” /> 防盗链" <meta name=referrer" content="no-referrer" />

2019-09-19 10:37:16

阅读数 19

评论数 0

原创 Vue自定义指令汇总

1、限制input输入框只能输入纯数字 在main.js中定义这段代码 Vue.directive('enterNumber', { inserted: function (el) { el.addEventListener("keypress"...

2019-09-17 11:10:41

阅读数 45

评论数 0

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