随笔（二）——项目代码优化

---

前言

提示：

---

一、传入的props的默认值定义为空数组

1.问题（提示对象的类型为unknwn）

2.优化

二、document 上不存在xxx属性

1.问题

类型“Document”上不存在属性“mozCancelFullScreen”。
属性“webkitExitFullscreen”在类型“Document”上不存在。你是否指的是“exitFullscreen”?

2.做了一个兼容浏览器的关闭全屏方法

但是显示document不存在某些属性

3. 解决方法 （使用declare globa设置全局变量类型）

（1）declare globa 作用

使用 declare global 可以在 npm 包或者 UMD 库的声明文件中扩展全局变量的类型

（2）declare globa 使用

在declare globa里面重写添加新的全局属性

declare global {
  interface Document {
    mozCancelFullScreen?: () => Promise<void>;
    webkitExitFullscreen?: () => Promise<void>;
    msExitFullscreen?: () => Promise<void>;
  }
}

三、ant design vue tab组件渲染优化

根据状态渲染不同的状态返回不同的状态说明，以及传入不同状态的标签颜色
如 状态为5，显示文字为驳回，显示颜色为红色

1: 起始代码

<Tag :color="record.status === 1 ? '#d9d9d9' :
      record.status === 2 ? '#e99f43' :
      record.status === 3 ? '#58c08a' :
      record.status === 4 ? '#c72929' : ''">
  {{ record.status === 1 ? '未完成' :
    record.status === 2 ? '审核中' :
    record.status === 3 ? '已通过' :
    record.status === 4 ? '驳回' : '' 
  }}
</Tag>

2: 优化代码

使用一个对象或者 Map 来存储这些对应关系，然后模板中直接使用这个对象

<template v-if="column.key === 'process_status'">
  <Tag :color="statusMap[record.process_status].color">
    {{ statusMap[record.process_status].text }}{{ index }}
  </Tag>
</template>

const statusMap = {
  1: { color: '#d9d9d9', text: '未完成' },
  2: { color: '#e99f43', text: '审核中' },
  3: { color: '#58c08a', text: '已通过' },
  5: { color: '#c72929', text: '驳回' },
};