22年5月工作笔记整理（前端）

五月份干的都是写琐碎的业务需求，大部分时间都在改样式的东西，所以学会了很多样式的知识

一、 query传参问题

为了保留路由刷新的值不会动，我们项目使用query传参，但是如果这个参数是对象刷新还是会变动。
解决的办法：
先把对象转为json，再把json转为对象

JSON.stringify()    JSON.parse()

二、 样式问题

1.如果给容器加圆角不生效，对容器使用：overflow:hidden

2.在tabs组件下使用echarts的坑，切换的时候获取不到echarts的dom元素，会默认100px的宽度
解决：延时，或者使用nextTick

3.关于echarts的自适应问题
侧边栏：

watch:{
 '$store.getters.sidebar.opened'() {
      setTimeout(() => {
        this.map.updateSize()
      }, 1000)
    }
    }

4.图片与文字不对齐时，使用vertical-align:middle

屏幕大小：

 window.onresize = function () {
          myChart.resize()
        }

5.对图片去色（遇到懒UI就得前端自己上了）

//黑白
img{
fillter:grayScale(100%)
}
//正常
img{
fillter:none;
opactity:1
}

6.:hover悬浮效果，:last-child 选中最后一个元素
7.echarts的暂无数据效果

在options里加上：
     graphic: {
          type: 'text', // 类型：文本
          left: 'center',
          top: 'middle',
          silent: true, // 不响应事件
          invisible: this.xData.length > 0, // 有数据就隐藏
          style: {
            fill: '#9d9d9d',
            fontWeight: 'bold',
            text: '暂无数据',
            fontFamily: 'Microsoft YaHei',
            fontSize: '16px'
          }
        },

8.svg改不了颜色的时候，找到它的属性，去掉fill
9.flex布局的宽度等于每个div撑开的宽度之和（如果不设置宽度的话）
10.对于修改原生组件的hover样式，可以在控制台上勾选去筛查

三、 获取今天是周几

      //获取今天是周几
      var arr = ['日', '一', '二', '三', '四', '五', '六']
      this.week = '周' + arr[new Date().getDay()]

四、 千分位方法

num.toLocaleString()我导师说这个方法有缺点，但目前我还没发现，就先用着吧

五、 动态加载图片

在路径字符串里使用require(绝对路径)