- 博客(78)
- 收藏
- 关注
RSS订阅
原创 CSS常用的属性方法
清除浮动 .clear:after { content:''; display:block; clear:both; height:0; overflow:hidden; visibility:hidden; } .clear { zoom:1; }图片不拉伸 img { object-fit: cover; -o-object-fit: co...
2019-11-01 09:32:09
184
原创 工具类
格式化数字千分位 format(num) { var reg = /\d{1,3}(?=(\d{3})+$)/g return (num + '').replace(reg, '$&,') },限制输入框只能输入数字 oninput="value=value.replace(/[^0-9]/g,'')"...
2019-10-14 10:21:46
101
原创 Vue项目中稳健的获取dom元素
1、获取Element的弹框中的Dom元素 **由于弹框由v-if控制，在初始页面渲染的时候，并不存在该Dom元素，所以在mounted中，获取不到该弹框的Dom元素，无法添加原生时间，如下拉加载** 下面提供稳健的获取弹框Dom元素的方法， 首先，由于弹框是由v-if判断，则可以在watch中监听v-if所对应的变量，在为true时，则弹框打开，此时去获取DOM元素，发现仍然获取不到。。。...
2019-10-09 09:52:30
1064
原创 表单布局
表单布局对于横向一致排开的搜索表单（上搜索下结果），最好使用固定框宽度的布局，可以结合element表单控件在布局的时候，最好能统一html标签格式（如，统一将class放在标签第一位，并且该class带有语义性），使其易于区分和语义化，如下面的结构就是很好的结构，区分度大，代码可维护性高<div style="margin-left: 25%;margin-top: 40px;"&g...
2019-09-27 10:10:51
418
原创 颜色转换：十六进制转RGBA并可控制透明度
hex2Rgb(hex,opacity = 1) { //十六进制转为RGB var rgb = []; // 定义rgb数组 if (/^\#[0-9A-F]{3}$/i.test(hex)) { //判断传入是否为#三位十六进制数 let sixHex = "#"; hex.replace(/[0-9A-F]/gi, function(kw) { sixHex += kw + kw; //把三...
2021-01-07 14:39:16
879
原创 Js控制css样式的一个实践
主要思路是通过给html动态设置css变量，在对应位置使用该变量实现function setCssProperty(key,value){ document.documentElement.style.setProperty(key,value);}
2021-01-07 14:34:40
201
原创 自定义requestInterceptor
主要目的，熟悉如何通过promise挂起异步，并在指定位置调用 let requests = [] let isGetOpening = false //请求拦截 async function requestInterceptor(params){ let token = false //判断条件 if (!token) { if(!isGetOpening){ isGetOpening = true //从接口获取token t
2020-12-31 18:52:03
870
原创 git commit规范
typefeat :新功能fix :修复bugdocs : 文档改变style : 代码格式改变refactor :某个已有功能重构perf :性能优化test :增加测试/测试用例revert: 撤销上一次的 commitchore: 改变构建流程、或者增加依赖库、工具等Init：新建库build :改变了build工具 如 grunt换成了 npm...
2020-12-31 10:05:02
130
原创 微信小程序自定义导航栏（顶部&&底部）
结合colourUi来自定义顶部和底部导航栏组件1、自定义顶部// 获取系统状态栏信息wx.getSystemInfo({ success: e => { this.globalData.StatusBar = e.statusBarHeight; //手机状态栏高度 let capsule = wx.getMenuButtonBoundingClientRect(); if (capsule) { this.globalData.Custom =
2020-10-19 15:49:06
714
原创 ES11新特性
正式支持了安全的链式操作：Optional chaining：新运算符**?.能够在属性访问、方法调用前检查其是否存在Nullish coalescing Operator：用来提供默认值的新运算符*??***babel-polyfill的引用和使用npm install --save @babel/polyfillimport “@babel/polyfill”;https://www.babeljs.cn/docs/babel-polyfill...
2020-10-15 10:34:00
1075
原创 Vue动态缓存页面
原理通过keep-alive标签的include属性及vuex完成需求说明：A页面到B页面需要缓存，A页面到C页面不需要缓存所要缓存页面的顶级出口<keep-alive :include="kpAlive"> <router-view/></keep-alive><script>export default { computed: { /** * router-alive */
2020-07-01 13:43:34
1193
1
原创 axios取消上次请求
利用axios自带的cancel函数import axios from 'axios'let pendingAjax = []const fastClickMsg = '数据请求中，请稍后'const CancelToken = axios.CancelTokenconst removePendingAjax = (url, type) => { const index = ...
2020-04-23 10:09:21
278
原创 Element el-time-picker开始时间不小于结束时间
时间控件与日期控件不同，其是通过selectableRange来控制时间选择范围format为时分，但selectableRange只能解析时分秒，所以在变量之后拼接’:00’<el-time-picker v-model="timeStart" :picker-options="{selectableRange:`00:00:00-${timeEnd ? timeEnd + ':0...
2020-04-08 11:52:27
2110
2
原创 修改Chrome记住密码后自动填充表单的黄色背景
产生原因：由于Chrome默认会给自动填充的input表单加上 input:-webkit-autofill 私有属性造成的解决方案1：在form标签上直接关闭了表单的自动填充：autocomplete="off"解决方案2：input:-webkit-autofill { background-color: transparent; }...
2020-04-01 10:20:02
186
1
原创 Element 分页二次封装
对分页进行了二次封装<template> <div :class="{'hidden':hidden}" class="pagination-container"> <span class="total-num">共 {{total | toThousandFilter}} 条</span> <el-pagination...
2020-03-31 10:31:11
430
原创 Echarts的初始化及数据为空的处理(update)
首先需要确保图表的容器存在，然后再开始渲染（v-if或者嵌套在弹框内）且对于图表类的需求，最好写成组件以复用 <div ref="chartContainer" class="chart-container"/>import echarts from 'echarts' data() { return { eChart: null, arr: []...
2020-03-30 14:27:32
9603
原创 Element表格二次封装
基础表格（修改表头及移除默认hover事件）<template> <el-table class="table-wrapper" :data="tableData" border style="width: 100%"> <el-table-column align="center" prop="...
2020-03-19 10:19:27
489
原创 Vue限制输入框只能输入数字
<el-input v-model="weiboID" @input="numValid('weiboID')" style="height:100%;" size="small"></el-input>//利用函数传参达到复用，以减少代码量numValid(val){ //只能输入数字 this[val] =this[val].replace(/[^0-...
2020-03-18 11:27:18
8314
原创 Element 上传控件
Element上传控件可以只作为获取文件的途径文件格式的上传，需要配合表单<el-upload class="upLoad-box" :limit="1" ref="upLoad" action :show-file-list="false" :auto-upload="false" :on-change="handleChange...
2020-03-18 11:02:43
218
原创 Element 日期控件 日期限制
开始时间不能大于当前时间，且结束时间不能小于开始时间<el-date-picker style="width:180px;" v-model="startDate" size="mini" type="datetime" placeholder="选择日期" :picker-options="startOption"></el-...
2020-03-18 10:24:54
325
原创 Element表格自定义表头注意事项
当自定义表头用于点击排序操作，此时随着排序规则改变对应icon也应改变，而此时需要添加slot-scope属性，来使其变为作用域插槽，从而使其可以动态变化如果不是作用域插槽，则插槽对应页面不会重新渲染...
2020-03-16 11:48:52
630
原创 优化需要条件满足的if else语句
遇到从上而下执行的判断语句，除了利用if进行逐条判断，还可以利用或关系及处理函数解决 if (plantArrLength === 0) { this.$message.error('请选择数据来源') return } if (!this.timeArr) { this.$message.error('请选择发表时间') return } if (this.di...
2020-03-04 11:34:35
317
原创 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的上级元素。快捷选中选中相同的元素 ctrl + d竖列多选 Alt+Shift+左键...
2020-03-04 11:04:57
579
原创 Element嵌套弹框蒙层混乱处理
可以在第二层的弹框上面绑定 append-to-body 属性 <el-dialog class="body-dialog" append-to-body ></el-dialog>但此时该弹框为出现在body的子元素，可以给其起一个独特的类名进行样式修改...
2020-02-28 10:33:41
900
原创 DOM操作之获取窗口宽高&&元素样式
获取视口宽高function getVierPortOffset(){ if(window.innerWidth){ return { w:window.innerWidth, h:window.innerHeight, } }else{ //浏览器怪异模式 if(document.compatMode === 'BackCompa...
2020-02-27 09:45:18
148
原创 Webpack打包不同的测试环境以及对应包名
输出值不同在脚本中若在config下的index中有 console.log(process.env)则会在打包的控制台中有输出，在npm run dev这种的环境不会有输出此处的值与packgae.json中定义的值完全相同而若是在自己定义的js模块中，打印process.env的值，则会发现其值，与在config文件夹下中，导出的值相同这就给我们打包的过程中，进...
2020-02-25 15:34:38
718
原创 解决设置min-height的子元素高度为百分比不生效的情况
不生效的情况 <div class="box-inner"> <div class="content"></div> </div> .box-inner{ min-height: 300px; background: #cccccc; } .content{ ...
2020-02-24 12:13:59
3447
3
原创 正则表达式 -- kebab-case转PascalCase
let str = 'aa' str.replace('a','b') => 'ba' //只能替换一个 let reg = /-(\w)/g; let str = "the-first-name" //$全局匹配的内容 $1第一个表达式匹配的内容 $2第二个表达式匹配的内容...... srt.replace(reg,function($,$1){return $1...
2020-02-18 10:42:34
924
原创 Echarts图表在切出页面resize后空白的问题
如若使因为使用了Vue的缓存组件 activated(){ var myEvent = new Event('resize'); window.dispatchEvent(myEvent); },则可以通过该缓存组件的activated，手动触发一下resize代码，使图表重绘即可。...
2020-02-13 14:27:44
1132
2
原创 通过闭包对computed进行传参
进行传参 <i :class="arrowSortDown('time')" ></i> arrowSortDown () { let that = this return function (typeName) { return that[typeName + 'SortDown'] ? 'el-icon-arrow-down' : '...
2020-01-03 11:40:32
529
原创 video标签在ios和安卓下的不同表现
在微信和微博下的表现(未考虑一般浏览器)可以添加h5同层播放器属性， 但需要区分安卓和ios, 两种终端可以添加不同的同层播放器属性来达到不弹窗播放的效果, 但是此时静音无法通过物理按键取消（待优化）play()方法只有通过触碰dom元素才可以触发设置了autoplay的属性, 若无法自动播放, 会自动添加播放按钮, 在不添加controls的时候能不能实现进度条的优化。借鉴之前的思路...
2019-12-27 09:42:17
1402
原创 微信小程序授权
首先要清楚小程序的几种授权，且oppenid是可以静默拿到，不需要授权所以，在获取oppenid这一块，可以写在app.js的onLaunch中，并且在封装好的post和get请求中，直接全局加入oppenid参数，并且在请求前如果没有oppenid，直接先进行获取，确保每一次请求都携带着oppenidimport { login } from "./libs/api"; //接口文件, l...
2019-12-12 10:11:13
843
原创 获取元素至可视区域的位置
在滚动条滚动过程中，如果需要在滚动到某一区域才展示某一元素可以利用 getBoundingClientRect()里面包含了至可视区距离的信息
2019-12-11 09:40:33
750
原创 图片随滚动条距离变化而变化
首先，需要明确所要实现的效果滚动条上推时页面恢复原样当滚动条下拉的时候，顶部的样式出现变化最开始的思路，是想着利用自定义滚动条的原理去做，通过页面与滚动条所成比例进行，高度的设置，但是效果并不理想。首先步骤复杂，其次卡顿效果明显。解决方案通过css3中的 transition 加 scale 缩放来实现最开始，也是利用 transition 加 height 的方式，但是此种方式改...
2019-12-10 11:59:08
515
原创 Element选择框多选时增加全选按钮
要实现的目标，即在选择框的基础上，实现多选框的效果最重要的一点是，新旧值的保存，且值的变化只能通过Element提供的方法去获取，不能通过Vue事件监听，因为要改变被选中的值对于不是通过Element的方法修改的新值，对应的旧值也需要做更改，这样在回显的时候，即可保持一致...
2019-12-05 09:37:16
1183
原创 由Echarts自定义图标引起的对图片Base64位的思考
由于echarts中自定义下载图标的时候，其不支持相对路径的写法，只支持网上地址，或者base64的写法由于在vue项目中，webpack会把小于限制的图片转为base64位，所以利用过这一点去将icon转为base64然后直接粘贴过去，以为和项目里的静态资源还有联系，其实，转为base64后，echarts可以直接识别，与项目中的路径已经没有任何关系了，以后遇见此种情况，可以直接通过网站转...
2019-11-27 10:00:07
646
原创 Echarts有无数据的渲染
在柱状图中，如果可以点击切换数据，在有数据的时候显示正常，如果没有数据的时候，不想显示空白柱状图，而显示暂无数据。首先一点，要明确v-if和v-show对echarts的影响v-show 只是设置了元素的display属性为none，在切换的时候没有获取到元素的宽高所有会有问题v-if 可以正确的切换图表数据**但是，利用v-if 和 v-else去展示不用的 div（无数据）会出现问...
2019-11-27 09:48:20
893
原创 微信小程序，图片加载问题
异步请求获取图片图片为异步请求，加载较慢，若没有给图片设置默认的高度，那么在获取dom元素的信息的时候，如果写在onLoad或者onReady中，会出现获取错误的情形正确做法为给图片一个默认的高度，可以通过相对单位vw来设置，并调整至图片不被拉伸，或者添加不被拉伸属性获取DOM元素的方法，应该写在setData的回调函数中...
2019-11-15 10:50:22
1654
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人