记录vue、echarts等工作中遇到并解决的问题

自2020-04-16起记录工作中遇到的问题和解决的过程(一)

1. element-ui解决表格需要单选的场景

这个问题也是上网找了很多资料,很多人都是按照文档的说明来写，最后
找到这种最简单的解决办法

2.echarts图表切换的显示问题

因为echarts本身的特性，造成在需要根据tab页切换不同图表时会导致显示问题,原因是echarts图表display为none时不能渲染，解决办法是在切换tab之后手动将echarts的display设置成block

3.vue监听路由传参问题

有时会遇到从特定页面传过来参数来判断的特殊场景，这时最好用beforeRouteEnter(to,from,next)而不要用$route(to, from)

4.页面高度宽度总结

offsetWidth=width(样式中设置的)+左右padding+左右border
offsetHeight=height(样式中设置的)+上下padding+上下border
clientWidth=width(样式中设置的)+左padding+右padding-垂直滚动条宽度
clientHeight=height+顶部padding+底部padding-水平滚动条宽度
当不存在水平或垂直滚动条时，scrollWidth和scrollHeight等于clientWidth和clientHeight
也可以这样理解，scrollWidth和scrollHeight即可视区域宽高度+被隐藏区域宽高度。

5.规定字数超出多少显示省略号

css可以利用overflow的方式限制文字超出多少长度后显示省略号，但有时也无需要明确规定限制文字的个数，这时可以用vue的过滤器
比如规定最多的长度是25 用法如下

6.解决IE11 浏览器下 a标签download属性不生效的问题

7.JS常见的Object方法

Object.keys返回一个所有元素为字符串的数组，其元素来自于从给定的object上面可直接枚举的属性

var arr = [‘a’, ‘b’, ‘c’];
console.log(Object.keys(arr)); // console: [‘0’, ‘1’, ‘2’]

// array like object
var obj = { 0: ‘a’, 1: ‘b’, 2: ‘c’ };
console.log(Object.keys(obj)); // console: [‘0’, ‘1’, ‘2’]

Object.is()用于比较两个值是否严格相等

console.log(Object.is({},{})); // false

Object.assign()用于用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

8.IE下get方式传中文参数乱码解决方法

适配IE11浏览器过程中发现get请求在传递url的时候，会使用自己的编码格式对地址进行编码，如果浏览器所使用编码与服务器采用编码不一致，服务器接收到的参数就会出现乱码，解决方法:使用js encodeURI 对地址进行统一编码，
var url = encodeURI(“url?param=我是中文”)

9.JS对象中的key值使用变量

var Key = ‘test’
“currentClomn”: {
[Key]: i.clomn
}

10.location.href传参中文乱码解决

传参之前加两次编码 encodeURI(encodeURI(参数))）
接参数时解码 decodeURI(参数)

10.判断IE11以下版本用chrome浏览器打开

let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
 let isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
  let isIE11 = userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1; //判断是IE11浏览器
      let browser = {
        versions: (function() {
          var u = navigator.userAgent;
          return {
            trident: u.indexOf("Trident") > -1 //判断是否是IE内核
          };
        })()
      };
      if (browser.versions.trident && isIE) {
		 // window.location.href = '/test.html'
          //创建ActiveXObject实例，只在IE下有效，才可以创建
          var objShell= new ActiveXObject("WScript.Shell");
          /*
          命令参数说明
          cmd.exe /c dir 是执行完dir命令后关闭命令窗口。
          cmd.exe /k dir 是执行完dir命令后不关闭命令窗口。
          cmd.exe /c start dir 会打开一个新窗口后执行dir指令，原窗口会关闭。
          cmd.exe /k start dir 会打开一个新窗口后执行dir指令，原窗口不会关闭。
          */
          var URL = window.location.href.replace(/\&/g,"%26");
          var result = objShell.Run(`cmd.exe /c start chrome ${URL}`, 0, true);
	  }

10.vue动态取路由import路径cant find module问题

静态import写死没问题 想动态判断path就会报cant find module问题
解决：component: () => import('@/views/index') 改成

 component: (resolve) => require([`@/views/${path}.vue`], resolve),

11.循环去除数组中附和要求的项（根据下标或值）

如果运用splice方法会改变数组长度，无法在for循环里继续删除

 for(var a in arr){
	if(arr[a] == '符合条件'){
			delete arr[a]
	}
}
//之后再进行去空操作
arr= arr.filter(function (val) {
	return val
})

12. 千分位方法

//千分位的方法
 toThousands(num) {
     return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
 },

13. 时间戳转yymmdd

let year = val.getFullYear()
let month = val.getMonth() + 1
let day = val.getDate()
// let hour = val.getHours()
// let minute = val.getMinutes()
if (month >= 1 && month <= 9) { month = `0${month}` }
if (day >= 1 && day <= 9) { day = `0${day}` }
// if (hour >= 0 && hour <= 9) { hour = `0${hour}` }
// if (minute >= 0 && minute <= 9) { minute = `0${minute}` }

echarts相关配置经验

1.渐变颜色设置

echarts设置在series.itemStyle中(object),vCharts设置在color属性中(object或array)

• x : 从左向右 1 ——> 0
• x2：从右向左 1 ——> 0
• y：从上向下 1 ——> 0
• y2：从下向上 1 ——> 0

	color: [{
			type: 'linear',
			x: 0,
			y: 0,
			x2: 0,
			y2: 1,
			colorStops: [{
			    offset: 0, color: '#67D6F2' // 0% 处的颜色
			}, {
			    offset: 1, color: '#2D8AF8' // 100% 处的颜色
			}],
			globalCoord: false // 缺省为 false
		},{
			type: 'linear',
			x: 0,
			y: 0,
			x2: 0,
			y2: 1,
			colorStops: [{
			    offset: 0, color: '#67D6F2' // 0% 处的颜色
			}, {
			    offset: 1, color: '#44D7B6' // 100% 处的颜色
			}],
			globalCoord: false // 缺省为 false
		}],

vue3相关

reactive相关data直接赋值导致数据响应式失效

如:
const dataList = reactive([]);
直接给dataList赋值会失效，因为reactive不允许直接覆盖代理对象。
正确做法是将新的arr的值push到dataList中,例：dataList.push(…arr)