Just-MenHee-优快云博客

原创 Echarts图表自适应宽高大小

最近项目用到了Echarts,他要求在容器上以行内样式固定宽高。这就无法按照浏览器大小进行自适应调整。经过一番纠结发现了解决方法.官网描述的截图如下：这个鬼东西，简直是反人类的设定好吗。这都什么年代了不能自适应的网站是不可以滴。我在这个项目使用的是百分比布局。先说下整体的思路，就是在Echarts的容器外面套一个盒子来自适应屏幕大小，然后用js获取盒子宽高在赋值给Echart...

2018-08-14 11:28:43 102411 49

原创 js点击空白无效区域关闭弹窗

弹出弹窗后，点击非活动区域关闭弹窗一般的场景是弹出一个全屏的遮罩，中间有我们的弹窗内容，点击无效区域可关闭HTML的结构如下<div class="mask" v-show="msgShow" @click="invalid($event)"> <div class="popup"> 弹窗内容 </div></div>JS如下

2021-03-12 14:26:13 1366

当你需要从一个文件夹内导入多个模块，挨个逐一配置劳神费力，此时可以用require.context来实现自动化导入，也就是我们常说的前端工程自动化。先来看一个例子const context = require.context('./file', false, /\.js$/); //导入file文件下所有的js文件require.context('../', true, /\.stories\.js$/); //官网样例详细解读：一个webpack的api,通过执行require.c

2020-11-26 17:41:17 499 4

原创 vue生产环境清除所有console.log

安装依赖cnpm install terser-webpack-plugin -Dvue.config.js中配置 configureWebpack: (config)=>{ if(process.env.NODE_ENV === 'production'){ config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true } },...

2020-09-27 10:24:42 1003

原创 input表单验证提示信息不消失

当我点击取消后，表单验证的提示信息不消失，类似下图这种此时，你要确保你的prop 和 v-model 里字段名称保持一致，就是下图的那俩字段；然后，如果prop和v-model是一样的但是提示信息没有消失，程序在点击取消后给v-model赋值，但是验证提示文案没有消失，说明此时没有触发elementui的验证，此时可以手动重置验证；官网给了一个resetFields方法只要在点击取消后执行这个方法this.$refs['formData'].resetFields();.

2020-09-09 11:18:59 5227

原创 React无法用@来引入模块

vue的项目中因为webpack已经配置，可以直接用，但是react需要自己配置一下更改config/webpack.config.js文件中的aliasalias: { ... '@': path.resolve('src')},如果你的工程目录中没有config文件夹的话，cmd执行npm run eject此时会多处config和scripts目录...

2020-04-09 11:06:16 1581

原创自定义input单选框radio的样式

今天帮后端弄一个很古老的项目，要用原生方法改变radio的样式，顺便贴出来给大家分享效果是这样的，当然你可以自己定义你喜欢的样式HTML：这里label 的for可以将lable和input关联起来<div> <input id='one' checked type="radio" name="all" value="0"><label fo...

2020-04-03 15:18:59 1545

原创如何在测试环境防止代码混淆？JS代码混淆

代码混淆是一种代码保护机制可以保护js逻辑不被破译。项目一般要经过三个阶段开发、测试、部署上线。在部署的时候我们会对代码进行压缩和整合。代码混淆一般是通过正则替换实现或者语法树替换实现。代码混淆后安全级别有显著提升。但是这也让我们在测试环境测试的时候很难跟踪问题。我们要做的事其实可以理解为，针对不同的运行环境产出不同的代码。我们可以通过BOI来处理（boi是一款开源的前端工程...

2019-12-06 17:36:26 425

原创 Tableau嵌入视图失败解决办法

在正式说这个问题之前先跟大家介绍一下Clickjack攻击（即单击劫持）。点击劫持是对网页的一种攻击，攻击者试图通过在不相关页面上的透明层中显示要攻击的页面来诱使用户点击或输入内容。可能大家都知道，但我在啰嗦举个例子????具体说明一下什么是单击劫持，假如有一个电商网站，页面上有一个立即购买的按钮，攻击者网站可能会在其自己的某个页面上创建一个“我最可爱”按钮，然后用iframe将此网站嵌入，那么...

2019-11-25 10:53:19 1998

原创 VUE每次切换路由返回页面顶部

默认情况下，每次点击切换页面会记住原来的卷曲位置，那么想要每次点击切换路由操控页面变化。请在你的main.js文件中配置router.afterEach((to,from,next) => { window.scrollTo(0,0); });当然前提是你要有import router from './router'...

2019-07-23 11:11:11 497

原创 Tableau单点登录iframe嵌入找不到资源

TABLEAU报表在单点后，嵌入到iframe里面，页面显示找不到资源，有以下可能，1、可以和分析师确认改报表所在的文件夹是否已经确认发布，而不是在test文件夹内。此时使用admin账号单点登录，可以成功。2、同一个页面，嵌入了两个tableau，并且两张报表都采用了单点登录。此时会冲掉一个，从而导致无法查看。3、确认单点认证信息拼接无误...

2019-07-16 17:30:20 1109 1

原创 ECharts 坐标轴文字显示不全（倾斜处理）

ECharts横坐标文字倾斜，有的时候因为X轴的坐标文字较长，无法水平展示，又要全部显示，这时候就需要倾斜文字显示，当然我做这个不是因为无法显示，因为我们的设计就是斜着的哈哈。（你要是想y轴倾斜也是一样的配置）用到的是xAxis.axisLabel 属性axisLabel: { interval:0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）...

2019-07-12 11:10:12 36637 2

原创前后端交互跨域，问题处理，Access to XMLHttpRequest...but only one is allowed.

在前后端数据交互的时候控制台报错如下。一般情况下，服务端按如下设置请求头就可以解决跨域问题public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {...

2019-03-25 20:44:15 12455

原创 CSS文本超出盒子显示省略号...单行文本和多行文本省略

CSS文本超出盒子显示省略号...只需要添加三个属性//单行文本div{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}多行文本最后一行省略//多行文本省略div{ text-overflow: -o-ellipsis-lastline; overflo...

2019-02-25 17:35:33 2160

原创 VUE引入CKEditor方法

最近在做一个CMS系统，然后找了几个插件，最后在ueditor和CKEditor挑选的，为什么没有选择百度的ueditor呢？总之就是issue太多了，百度爸爸不想在搞这个麻烦了。然后就用了CKEditor.引入的时候在网上搜了好多文章，用了各种姿势，全部都找不到依赖，有各种各样的问题。然后就去研究了官方文档。具体步骤如下1.先引入包npm install --save ...

2019-02-21 11:40:57 7106 3

原创 go语言项目执行bee run 报错 combining dwarf failed: Unknown load command 0x32 (50)解决办法

今天改跑路GO语言程序员留下的项目，用的是beego框架，执行bee run 的时候失败了。报错截图如下只要将更新go的版本到1.10以上就可以了官网https://golang.org/ （需要科学上网）更新后命令行查看版本go version...

2019-02-16 16:51:29 2898

原创 Vue解决跨域问题，本地代理

浏览器对于javascript的同源策略的限制。请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同。否则就会抛出跨域错误哦～在传统的JQuery项目里面，后端给一个callback函数，然后前端用jsonp来处理。或者后端将header设置为 * 来允许全部来源访问现在大部分公司都在用Vue来开发，可以用本地代理来解决这个问题，At first在...

2019-01-07 11:07:24 956

原创 JS判断是不是邮箱、身份证号、以及电话号～正则判断

业务中遇到了需要判断用户输入的信息是不是符合格式要求的功能点、索性就分享出来～判断是不是邮箱 //判断是不是邮箱 email(str) { var string = str.replace(/\s|&nbsp;/g, '') //先去除用户输入的无效字符 var reg = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|c...

2019-01-07 10:16:50 1410

原创网页颜色搭配，网站设计，Google logo配色 Google官方配色表

一直觉得Google的logo配色超级好看，也很清新，就去查找了具体色值蓝：#2d85f0红： #f4433c黄： #ffbc32绿： #0aa858By the way 附上Google官方提供的颜色表...

2018-12-14 14:29:14 31509 1

原创如何修改谷歌浏览器input自动填充的黄色背景

input默认在focus状态下会有一个蓝色或黄色（浏览器以及设备系统不通，默认外边框颜色可能会不同）的外边框样式Like this 只要添加一个属性就可以去掉input{ outline:none;} ...

2018-12-13 15:04:42 1186

原创 JS文件下载，文件下载页面跳转出现空白页解决办法

文件下载出现空白页或页面跳转，是因为直接用文件地址跳转window.open或者location.href这种方式会有页面跳转的情况出现。下面看怎么解决这个问题例子方案一（推荐）：用js触发<a>标签点击事件var downLoad=function(src){ var a = document.createElement('a'); a.id = 'expe...

2018-12-13 10:07:33 13339 5

原创如何去掉input选中时的默认边框以及input各项设置

input在focus状态下会有一个蓝色的外边框，这是一个自带的默认样式Like this给input添加一个属性就可以去掉input{ outline:none;}如果想要设置为自己要想的颜色input设置focus背景颜色input:focus{ background-color: #1E8E76; } ...

2018-11-29 11:14:07 5171 1

原创如何判断一个对象是不是数组、

如何判断一个对象是不是数组？是一个比较常见的问题。我总结链四种方法，如下。The First methodArray.prototype.isPrototypeOf(obj) // 判断Array是否在obj的原型对象上。返回true/falseThe Second methodobj instanceof Array //返回true/falseThe Thir...

2018-09-16 14:37:04 346

原创前端JS原型、原型链

原型和原型链是前端比较重要的概念，也比较绕，很多人都搞不明白。刚好今天有人问我索性就写篇文章整理一下。首先来说一下什么是原型、原型链和构造函数。原型：JS中的对象都包含了一个prototype的内部属性，这个属性所对应的就是该对象的原型。原型链：原型链是是有一些用来继承和共享属性的对象组成的对象链。并且原型链的长度是有限的。构造函数：原型对象包含一个constructor属性，对应...

2018-09-16 14:15:39 4993

原创去除字符串里面的空格,清除无效字符

去除字符串里面的空格,清除无效字符 //去除字符串空格函数 function trim(str) {　　　 return str.replace(/\s|&nbsp;/g, '') }

2018-09-04 15:25:23 1234

原创不同页面间传递参数并获取参数值、获取浏览器地址栏携带参数

将参数传给其他页面window.location.href='跳转的url?username='+name+'&passwprd='+word; 获取地址栏里面的字符串，传入的参数为想要匹配的参数名称。方法和调用方式如下所示 function queryString(name) { var reg = new RegExp("(^|&)" + nam...

2018-09-04 14:28:04 863

原创 CSS动画效果、文字渐变过渡效果、文本阴影

写了一个文字渐变的动画效果,纯CSS动画.文字加了一点阴影效果,看起来有发光哒感觉~效果如下图这里因为是截图,所以没有办法看到动态的效果.大家可以拷贝我下面的代码自己试一试代码看下面html<div class="son"> Particia</div> css.son { color: #5BA6DF; ...

2018-08-27 17:36:16 6567

原创移动端适配方案、Rem适配方法

现在说一下rem ，rem是根字号的大小。也就是<html>元素的字号大小,em是相对于自身的字号大小。REM适配移动端就是用js设置根字号的值，然后所有的值都用rem来设置。这个方法很方便，直接调用方法就可以。我封装了一个给大家参考。var setRem = { init: function() { function set() { ...

2018-08-27 10:03:11 401

原创 ==和===的区别，浅谈js里面的=

= 一个等号是赋值的意思比如： a=2；就时将a赋值为2。== 两个以上就是比较了,==在比较之前会进行隐式转换,只要值相等就满足条件。比如：true==1,是正确的返回true。（这里面==进行了隐式转换 1转换为true）。=== 比较时要求比较严格，要值和类型都完全一样的时候才满足条件。比如上面的例子，true===1；返回fals...

2018-07-27 13:41:51 198

原创前端,JS判断浏览器类型,兼容IE浏览器

一、判断是否是IE 在做兼容的时候，经常要适配浏览器，做常见的就是兼容IE。下面提供一个简单的方法，供小伙伴们参考function IEright() { if (!!window.ActiveXObject || "ActiveXObject" in window){ return true; }else{...

2018-07-18 14:31:11 3566

原创 JS如何判断变量有没有被赋值?

如何判断一个参数有没有被赋值这个是一个很简单的操作,今天有人问我,于是就直接写出来分享给大家.估计大家也是都会,我就在啰嗦一下.if ( typeof a==='undefined' ) { console.log('没有赋值')} else { console.log('已经被赋值')}...

2018-07-06 15:05:33 4960

原创 VUE空格警告解决办法

在你运行npm run dev 的时候会有很多警告.都是空格警告.这个是ESLint搞的鬼.ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。他对于格式要求十分严谨.找到webpack.config.js或者webpack.base.conf.js将这段代码注释掉或者删除掉,就行啦~...

2018-07-05 16:58:32 1975

原创使用webpack打包vue项目,无法自动在浏览器中打开,情况总结

最近用vue-cil快速构建vue项目的时候,发现他默认的是无法在浏览器的窗口中打开的,很不方便.当你运行 npm run dev 的时候窗口会显示I Your application is running here: http://localhost:8080这段话的意思是：你的程序运行地址是:http://localhost:8080于是总结了一下浏览器默认打开的设置方法.其实归根结底就是一...

2018-07-05 15:12:34 3388