Bug

1、form表单视图不更新

主要是老忘记使用$set设置对象的值，破坏了vue的动态响应

2、element的table组件自定义表头使用了表单元素，但是视图不更新

加上作用域插槽

3、元素鼠标悬浮多了莫名其妙的提示框

使用v-bind="$attrs"在不知情的情况下绑定了title到元素

4、beforeRouteEnter的使用

注意在次钩子函数中this不能使用，可以通过next((vm)=>{})获得当前的vue实例

5、$slots,$listener,$attrs,$props

6、jquery计算隐藏元素的宽高会出错

7、activated钩子函数会在mounted之后执行

8、beforeDestroy中清除定时器

9、原生DOM操作要放在nextTick中执行

10、echarts的数据集不能使用，发现是datasetComponent没有按需引用

11、通过this.$refs['comp']修改的子组件data数据似乎不能被watch监视

12、el-table的fixed列加上宽度，不然视图有时候异常

13、IE10 echarts 的颜色如果有alpha通道就渲染为黑色了，鼠标移上去才变正常

14、echarts IE10 下载报异常

1
2
3
4
5
6
7
8
9
10
// 异常文件
// .\node_modules\echarts\lib\component\toolbox\feature\SaveAsImage.js
// 异常位置
var blob = new Blob([u8arr])
// 解决
try {
  var blob = new Blob([u8arr]);
} catch (error) {
  var blob = new Blob([u8arr.buffer])
}

15、请求时时间传参错误

当用new Date()或者 el-date-picker未格式化时间得到的本地时间Fri Nov 19 2021 17:07:41 GMT+0800 (GMT+08:00)直接当作参数通过axios发送时，时间会被置为格林威治时间。所以，所有的时间都要格式化为字符串，或者时间戳

开发

1、echarts如何修改默认颜色

1、 \node_modules\echarts\lib\model\globalDefault.js 修改其中的color
2、主题定制

2、echarts自定义toolbox并保存图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// 必须以 my 开头
let mySaveAsImage = {
  show: true,
  title: '下载图片',
  icon: 'image:///images/download.png',
  onclick: (params,api) => {
    const type = 'png'
    const imgUrl = api.getConnectedDataURL({
      type,
      pixelRatio: 4,
      backgroundColor: '#fff',
      excludeComponents: ['toolbox']
    })
    const name = (params.option.title && params.option.title[0].text) || 'echart下载'
    if (window.navigator.msSaveOrOpenBlob) {
      // 截取base64的数据内容（去掉前面的描述信息，类似这样的一段：data:image/png;base64,）并解码为2进制数据
      let bstr = atob(imgUrl.split(',')[1])
      // 获取解码后的二进制数据的长度，用于后面创建二进制数据容器
      let n = bstr.length
      // 创建一个Uint8Array类型的数组以存放二进制数据
      let u8arr = new Uint8Array(n)
      // 将二进制数据存入Uint8Array类型的数组中
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      let blob
      try {
        blob = new Blob([u8arr])
      } catch (error) {
        blob = new Blob([u8arr.buffer])
      }
      // 调用浏览器的方法，调起IE的下载流程
      window.navigator.msSaveOrOpenBlob(blob, name + '.' + type)
    } else {
      //类似chrome浏览器创建一个a标签并使用a标签的href属性下载
      let tempA = document.createElement('a')
      tempA.download = name + '.' + type
      tempA.href = imgUrl
      document.body.appendChild(tempA)
      tempA.click()
      tempA.remove()
    }
  }
}
option.toolbox = {
  show: true,
  feature: {
    mySaveAsImage
  }
}

3. 使用单个el-tooltip根据文字是否溢出,动态显示

  • template
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <template>
      <div>
        <ul>
          <li
            v-for="(item,key) in 10"
            @mouseenter.native="handleMouseEnter"
            @mouseleave.native="handleCellMouseLeave">
            <span class="cell">{{item}}</span>
          </li>
        </ul>
        <el-tooltip
          ref="tooltip"
          :content="tooltipContent"
          placement="top"
          effect="light"
        ></el-tooltip>
      </div>
    </template>

  • script
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    activateTooltip = _.debounce((tooltip) => tooltip.handleShowPopper(), 50)

    handleMouseEnter(event) {
      const cell = event.target
      const cellChild = event.target.querySelector('.cell')
      if (cell) {
        // 获得文字部分的宽度
        const range = document.createRange()
        range.setStart(cellChild, 0)
        range.setEnd(cellChild, cellChild.childNodes.length)
        const rangeWidth = range.getBoundingClientRect().width
        const padding =
          parseInt(window.getComputedStyle(cellChild).paddingLeft || 0) +
          parseInt(window.getComputedStyle(cellChild).paddingRight || 0)
          // 如果溢出
        if (
          (rangeWidth + padding > cell.offsetWidth || cellChild.scrollWidth > cell.offsetWidth) &&
          this.$refs.tooltip
        ) {
          const tooltip = this.$refs.tooltip
          // 改变el-tooltip的显示内容
          this.tooltipContent = cellChild.innerText || cellChild.textContent
          // 改变el-tooltip的关联元素
          tooltip.referenceElm = cell
          // 将之前的销毁重新展示新的
          tooltip.$refs.popper && (tooltip.$refs.popper.style.display = 'none')
          tooltip.doDestroy()
          tooltip.setExpectedState(true)
          this.activateTooltip(tooltip)
        }
      }
    },
    // 鼠标移出
    handleCellMouseLeave(event) {
      const tooltip = this.$refs.tooltip
      if (tooltip) {
        tooltip.setExpectedState(false)
        tooltip.handleClosePopper()
      }
    }