
前端
heyNewbie
这个作者很懒,什么都没留下…
展开
-
IE浏览器 min-height 失效
可以尝试加hack.box { min-height:500px; height:auto !important; height:500px;}原创 2022-01-12 10:29:42 · 440 阅读 · 0 评论 -
echarts-箱线图(盒须图)
搞了一套和官网不同的option,也能渲染出效果来,虽然我不知道这个箱线图有啥意义啊哈哈哈~需求:填充背景色(中间的横线我是真的无能为力了,有搞出来的小伙伴欢迎留言)剩下的一些自定义轴刻度显示、tooltip的自定义就很常规了。。。option: { color: ["#007FFF", "#F5A623", "#B620E0", "#F11455"], tooltip: { trigger: "item", },原创 2021-12-29 16:47:43 · 8669 阅读 · 1 评论 -
关于上传附件的需求
附件上传原创 2021-12-15 17:50:10 · 1344 阅读 · 0 评论 -
放置几个常用input实时限制输入
放置几个,需要的时候不用麻爪找度娘了--value1、不能输入空@keyup="value=value.replace(/^\s+|\s+$/g, '')"原创 2021-06-02 17:08:18 · 132 阅读 · 0 评论 -
Cannot read property ‘get‘ of undefined 报错
刚才vue项目中报错“Cannot read property 'get' of undefined”可以肯定的是echart出的问题遂打断点一级一级的找,卡在了渲染环节可以检查一下option的配置是否齐全,比如xAxis和yAxis,legend等条件格式是否正确,渲染需要的是否齐全一般把需要的option填写正确,就OK了...原创 2021-05-17 16:06:01 · 7220 阅读 · 0 评论 -
vue 全局监听浏览器窗口关闭以及无痕模式场景提示
需求场景一:用户退出时清空localStorage并告知后台用户退出,保持登录状态时关闭窗口或者浏览器达到相同目的实现:// 在mounted中触发beforeunload事件以及在destroyed中触发beforeunload事件// 当文档或一个子资源正在被卸载时, 触发 unload事件,unload在beforeunload之后被触发// 参考地址:https://blog.youkuaiyun.com/weixin_45372546/article/details/108538026// 要原创 2021-04-12 15:45:31 · 1548 阅读 · 0 评论 -
git add . 时关于报错 LF will be replaced by CRLF
出现这个问题的原因是像缓存区中提交文件时出现的原因:windows中的换行符为 CRLF,而在Linux下的换行符为LF,所以在执行add . 时出现提示也就是,工作区的文件都应该用 CRLF 来换行。如果改动文件时引入了 LF,提交改动时,git 会警告你哪些文件不是纯 CRLF 文件,但 git 不会擅自修改工作区的那些文件,而是对暂存区(我们对工作区的改动)进行修改。也因此,当我们进行 git add 的操作时,只要 git 发现改动的内容里有 LF 换行符,就还会出现这个警告.转载 2021-03-17 13:43:18 · 1959 阅读 · 1 评论 -
数组的拷贝 不影响源数据
有时候需要把某些数组进行拷贝,在做功能性的处理,有时候需要浅拷贝,有时候需要深拷贝,我常用的是需要保留源数据不被污染的,用到的最多的方法var arr = [1,2,3,4,5,6];var newArr = JSON.parse(JSON.stringify(arr));是个万金油在这总结一下能够进行数组拷贝,并且不污染源数据的方法1、Array.sliceconst number = [1, 2, 3, 4, 5]; const newNumber = n原创 2020-12-09 18:01:13 · 1430 阅读 · 0 评论 -
echarts 自定义legend icon出现的路径错误等
echarts提供给我们默认的legend icon只有'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'这么几种类型, 有时候我们需要自定义,比如去引入图片等自定义icon为图片legend: { data: [ { name: "XXX", textStyle: { fontSize: 12, .原创 2020-08-24 16:49:16 · 1471 阅读 · 1 评论 -
【收集】几个常用正则
正则对于大部分前端小伙伴来说都不陌生,但是吧,也并不是很很熟悉,至少我是这样子的,啥时候需要用到了,就去现查现测试,今儿就收集几个常用到的,以备不时之需1、匹配中文字符[\u4e00-\u9fa5]2、匹配空白行\n\s*\r3、匹配Email地址[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?4、匹配URL[a-原创 2020-08-24 10:38:45 · 526 阅读 · 0 评论 -
vue 报错 Cannot read property ‘_wrapper‘ of undefined
vue项目中,使用了各种插件和ui库,有时候会出现Cannot read property '_wrapper' of undefined 这样的报错,一开始还以为是引用的插件报错,其实是自定义的方法名在methods{} 中没有对应的方法<span @click="handleClick"></span>// 在span 标签中定义的 handleClick 方法,并没有在methods中有具体的对应methods: { handleClick() .原创 2020-08-13 14:40:17 · 3559 阅读 · 0 评论 -
关于Js获取日期的那些个事(事儿的需求)
怎么用js 获取时间就不多赘述了,相信小伙伴们都懂获取当前日期: var time = new Date();获取当前日期的时间戳: var timeStamp = time.getTime;获取当前日期年份:var year = time.getFullYear();获取当前日期月份: var month = time.getMonth()+1;获取当前时间日: var day = time.getDate();日期格式: var timeFormat = year + '-' + mo原创 2020-08-11 17:45:02 · 425 阅读 · 1 评论 -
关于maxlength在IE中失效,以及input常见限制,校验手机号(只能输入数字、不能输入)
项目中遇见了,就记录下来,省的以后找不到了一、maxlength 属性在IE中失效当 input 的 type 属性为 ‘text’ 时,maxlength 有效当input 的 type 属性为 ‘number’ 时,失效解决办法:<input type="number" placeholder="请输入手机号..." v-model="telNumber" maxlength="11" @input="telNumber=te原创 2020-07-15 16:39:03 · 1100 阅读 · 0 评论 -
ElementUI 中 table 的template 和 formatter 函数不能一起使用
项目中的表格要使用到table的template插槽做数据自定义处理,但是为了自己写的组件能够复用,还需要用到formatter函数来进行数据的操作,这种情况下,template和formatter是不能一起使用的,咱们可以使用针对插槽内的结构进行针对处理...原创 2020-07-13 18:34:52 · 3429 阅读 · 0 评论 -
关于console对象的那些个方法
突然想起来这么个事,加上博主比较的懒,就找了一篇全面的记录直接搬过来保存,留着以后慢慢看方法 描述 实例 assert() ssert方法接受两个参数,第一个参数是表达式,第二个参数是字符串。只有当第一个参数为false,才会输出第二个参数,否则不会有任何结果。 // 实例console.assert(true === false, "判断条件不成立")// Assertion failed: 判断条件不成立 clear() 清除当前控制台的所转载 2020-07-01 15:20:11 · 880 阅读 · 0 评论 -
vue 实现点击空白处执行方法(列表收回、隐藏等操作)
项目中一直在用elementUI组件,但是有些需求是需要定制化开发的,不能完全的依赖组件现有功能,比如:定制化下拉菜单,并提供带有提示标志的单选和多选等小伙伴们相信也碰到不少这样的例子,最头疼的就是点击空白处的判定然后就转了一篇,以防丢失简单想应该怎么实现?1、肯定是给document增加一个click事件监听2、当发生click事件的时候判断是否点击的当前对象结合着本思路和指令咱们来实现。简单介绍vue指令一个指令定义对象可以提供如下几个钩子函数 (均为可选):bind:只转载 2020-06-21 11:45:56 · 6961 阅读 · 5 评论 -
简单的纯数数组取极值(最大值和最小值)
今天举个简单的例子:项目中遇到已知是纯number类型的数组,需要取该数组的极值ES5:let Array = [0.15,-0.5,1,99,35,0,19,22]原创 2020-06-04 17:22:17 · 965 阅读 · 0 评论 -
【原创】Echarts :说说formatter自定义toolTip内容后,颜色丢失
在使用Echarts的时候,经常会碰见需要自定义toolTip显示内容的需求,常见的就是使用formatter(params) {}函数进行拼接,不清楚的可以看官网介绍但是使用formater进行自定义显示后,会出现样式丢失的情况,就是显示内容全都是白色了,这里提供两种方法进行参考一、在formatter中使用富文本进行编辑formatter: function (params) { var str = "<span style='color: #ff0000'>" +原创 2020-05-19 16:35:35 · 4522 阅读 · 0 评论 -
Vue 报错: Error in nextTick: "InvalidCharacterError"
我遇到这个错误是在IE浏览器中,而项目在chrome浏览器中是正常没有问题的,按照字面意思很难找到这个问题到底出在哪了,出现的bug为v-if失效,该出现的DOM没有出现,于是我就尝试分析DOM,提示在渲染时出现无效字符,我的input中加入了正则去替换内容,我尝试去掉之后就好了...原创 2020-04-14 16:03:36 · 3075 阅读 · 0 评论 -
获取当前XXXX-XX-XX格式的日期
function getDate () { var newDate = new Date(), Year = newDate.getFullYear(), Month = newDate.getMonth() + 1, Day = newDate.getDate(), nowDate = ''; if (M...翻译 2020-04-10 16:23:27 · 2018 阅读 · 0 评论 -
vue 报错Failed to mount component: template or render function not defined.的解决方法
之前的项目都没有问题,结果突然出现这个报错,查阅度娘后发现有大手子们要把vue-loader降低版本来解决,但是我的版本是别的路径都没有问题,唯独新创建的一个组件有问题经过阅读这位同学的文章,我尝试去测试了一下,果然问题出现在路由填写上,因为我的写法和他的大致相同解决办法:因为在router/index.js文件中,我是用的懒加载的写法,所以把文件后缀.vue跟上就好了...原创 2020-03-23 18:24:24 · 2441 阅读 · 0 评论 -
vue报错”Invalid prop: type check failed for prop "data". Expected Array, got String.“
vue项目中遇到的报错如下图:大概意思就是期望的data值是数组,但是得到的是字符串,在页面上并不影响功能的实现,是因为data在赋值的时候虽然格式不对,但是得到的数据格式是正确的,所以不会影响页面功能点开报错,浏览信息找到你的文件,还有文件里的方法,以及所在行,就在相关方法中找到data的数据赋值,改过来就行了...原创 2020-02-12 00:32:29 · 5621 阅读 · 0 评论 -
【转载】echarts 实现渐变色
在管网的文档中可查看其配置项,以柱状图为例:首先在series中找type:'line'然后找到areaStyle在color中有方法能生成渐变色:// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置color: { type...转载 2020-01-19 16:01:00 · 967 阅读 · 0 评论 -
vue项目打包git提交后,在线上看不到dist文件夹
问题描述:项目写完后,打包提交到测试环境,发现dist文件夹在本地,并没有提交到测试服务器,问题原因:vue项目在git打包上传过程中,为了节约包体积,会禁止dist的上传,解决办法:打开文件列表中的.gitigone文件.DS_Storenode_modules//dist/npm-debug.log*yarn-debug.log*yarn-error.log...原创 2020-01-15 16:24:07 · 3097 阅读 · 0 评论 -
总结:Vue项目中的报错:vue-router.esm.js?8b48:2007 Uncaught (in promise)
遇到的情景:router.beforeEach((to,from,next) => { const flag = sessionStorage.getItem("isLogin"); if(!token){ next('/login) }else{ next(); }});因为如果我们手动在地址栏填写路径'/logi...原创 2020-01-15 15:57:19 · 9748 阅读 · 0 评论 -
总结:在vue项目中的报错:Maximum call stack size exceeded
一、情景1:在路由守卫中router.beforeEach((to, from, next) => {})针对 to 的路径进行判断时条件错误,导致页面陷入死循环例:to.name.indexOf("XXX") > 0 当路径中包含目标文字在首位时,返回是0,导致页面白屏情景2:在页面中引入某个组件,名称和页面的name重复了,导致页面进入死循环,...原创 2020-01-15 15:49:21 · 3183 阅读 · 0 评论 -
【转载】npm安装依赖时-S和-D的作用以及区别
-S即--save(保存)包名会被注册在package.json的dependencies里面,在生产环境下这个包的依赖依然存在-D即--dev(生产)包名会被注册在package.json的devDependencies里面,仅在开发环境下存在的包用-D,如babel,sass-loader这些解析器啥也不写包名不会进入package.json里面,因此别人不知道你...转载 2020-01-07 11:32:50 · 1009 阅读 · 0 评论 -
关于Vue中element按需引入
在项目中使用elementui确实是很方便的一件事,但是如果我只需要用到其中的某一些元素来简化代码的话,全局引入就显得有点臃肿了,这就有了按需引入的概念,需要什么就引入什么,方便一、安装element-uinpm i element-ui -S二、安装按需引入的必要插件npm install babel-plugin-component -D三、修改.babelrc文件(注...原创 2020-01-07 11:28:40 · 1592 阅读 · 0 评论 -
vue初始化新项目,安装常用的依赖
总结一下自己在项目中使用过的常用的依赖,省的用到时再去找了首先初始化vue新项目安装node,npm或者cnpm,吧啦吧啦。。。npm install --save-dev vue-cli安装vue-cli,完成后准备使用webpack初始化新项目vue init webpack "你的项目名称"出现的选项:Project Name: 项目名称,自己用的项目直接默...原创 2019-12-27 13:43:47 · 2981 阅读 · 0 评论 -
限制input标签只能输入数字
1、onkeyup = "value=value.replace(/[^\d]/g,'')"使用 onkeyup 事件,有 bug ,那就是在中文输入法状态下,输入汉字之后直接回车,会直接输入字母2、onchange = "value=value.replace(/[^\d]/g,'')"使用 onchange 事件,在输入内容后,只有 input 丧失焦点时才会得到结果,并不能在...转载 2019-12-07 18:19:28 · 818 阅读 · 0 评论 -
vue 兼容IE浏览器 报“@font-face 未能完成 OpenType 嵌入权限检查。权限必须是可安装的。”错误
再IE中兼容一直是一个很让人头疼的事情,做到自定义字体兼容的时候,发现报错了是时候改变一下字体来提升观赏性了!!!@font-face是CSS3新规则,针对IE惯例不是很友好,这就需要我们来转换一下字体格式了,我用的是字体转换这个网站很不错,将转换好的.eot文件下载解压到项目的font目录中,和你的.ttf字体文件放在一起,在font.css文件中引入在需要的...原创 2019-11-20 11:37:33 · 4479 阅读 · 0 评论 -
js 解决页面切换时,定时器setInterval 会变得越来越慢
在项目中经常会用到自定义动画或者自定义一些无缝滚动什么的,需要用到js中的定时器setinterval,但是,楼主发现在项目中测试的时候,切换页面或者浏览器上面的页签时,定时器明明没有收到干扰,但是页面呈现明显变慢了,解决:一、如果用到jQuery的动画在animate前加上 $(obj).stop(true,true)$(obj).stop(true,true).animate(...原创 2019-11-19 18:34:10 · 5075 阅读 · 0 评论 -
echarts-仪表盘设置项详解
样例:在项目中大概需要这样一个仪表盘,就去看了官网,也在博客上看了大神们的代码上代码:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>单仪表盘案例</title> <!-- 引入 ECharts 文件 --> &...原创 2019-11-01 18:33:09 · 8115 阅读 · 0 评论 -
关于flex布局在IE浏览器上的坑
最近在项目中,钟情于flex布局来搭架子,感觉确实是挺方便的,但是今天遇到一个挺玄幻的问题,flex-direction 属性在IE中执行力并不好,代码就不贴出来了,毕竟是公司财产,情景:并排的表格,在浏览器尺寸改变时,变更排列方式,结果在方法执行的时候,元素表格消失了,是的,消失了!!!找到最后,发现是flex-direction: colum这个属性不能够执行,经过百度,发现是...原创 2019-09-24 18:22:32 · 39394 阅读 · 8 评论 -
Vue项目中,需要的常规引入(持续更新中。。。)
随着vue的普及,项目中需要用到的技术也是越来越来多,眼花缭乱的,但是有一些是基础需要的,现在我就来总结一下,也省去了逐个去查找的麻烦,随用随看1、babel-polyfill用来转换javascript语言到ES6版本,让浏览器去识别,针对vue项目在IE浏览器中空白页也有一定的支持安装: npm install --save-dev babel-polyfill引...原创 2019-09-09 16:57:42 · 1032 阅读 · 0 评论 -
踩坑:vue-particles粒子插件在IE中出现空白,报错:缺少“:”
国际惯例,按照步骤使用npm安装了vue-particles插件,项目跑起来后,在chrome,Edge以及safari中都没有什么问题,但是在IE中出现了空包页现象,没有报错,在强刷页面后出现 缺少":" 的报错,最初以为是不兼容IE版本低的问题,经过多次测试,IE11都会出现同样的问题,这不是太扯了嘛,经过度娘一番询问得知,是因为IE浏览器是需要做对ES6的兼容处理,但是发现已经在ma...原创 2019-08-15 10:46:06 · 2197 阅读 · 0 评论 -
【总结】JS 获取浏览器可视区域的宽高 兼容多浏览器
平时在些项目的时候,难免会用到一些基础的宽高等数据,可能是用来做屏幕的适配,也可能是用来计算效果的临界值,总之看似简单的数据,却经常能够用得到,不知道小伙伴们都是怎么获取的,反正楼主是比较懒的那种,非常不喜欢去记那些个方法,所以就总结一下,方便以后查找先来张经典的图IE中:document.body.clientWidth ==> BODY对象宽度document.bod...原创 2019-08-23 17:58:25 · 1301 阅读 · 0 评论