代码优化片段

addEventListener 的passive

passive就是为了改善移动端滚屏性能而设计的
简单说就是如果你监听了window的scroll或者touchmove事件，你应该把passive设置为true，这样滚动就会流畅很多

 addEventListener(type, listener, {
    capture: false, //是否允许事件捕获
    passive: false, // 设置passive为 false，声明不是被动的
    once: false //是否只执行一次
})

passive为false时，浏览器执行完回调函数才知道有没有调用preventDefault，如果没有调用preventDefault，再去执行默认行为，就是滚动。这样就回造成滚动不流畅。
passive为true，就是告诉浏览器不会调用preventDefault，浏览器直接执行滚动就行，不用考虑回调函数了。
这时，即使你在回调函数里调用preventDefault也不会生效。
mdn中说，在有些浏览器（特别是Chrome和Firefox）中，监听window、document或者document.body上的touchstart和touchmove，会将passive默认设置为true。
不需要调用preventDefault的时候，监听scroll或者touchmove，将passive设置为true

**sourceMap是用做源码映射
webpack帮助我们把代码打包
代码在浏览器运行时报错，
这个时候我们需要能够帮助
我们定位到源代码哪行错误
而不是定位到打包后的代码错误**
devtool配置场景：

开发模式：devtool:‘cheap-eval-source-map’   
  
生产模式：devtool:‘cheap-source-map’  

webapck.config.js

{
    entry:'./src/index.js',
+    devtool:'cheap-eval-source-map'
    ...
}

浏览器会帮助我们定位到源代码哪一行出错

css解决fixed布局不会出现滚动条的问题

 .fixed-content {
  top: 0; 
  bottom:0;
  position:fixed;
  overflow-y:scroll;
  overflow-x:hidden;
 }

最优的清浮动

 .clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }

单独触发elementUI验证规则

/**
     * @description: 离开富文本框触发验证规则
     */
    onBlur () {
      this.$refs.addKrProgressForm.validateField(''march'')
    },

使用一个插件，new一个实例可在mounted中创建

同后端合作 导出.xlsx文件

downloadUsed (componentId) {
      var self = this
      window.location.href = self.publicPath + '/used/downloadUsed/' + self.$route.query.id
    }

单选状态的控制

<el-form-item label="下一个状态">
            <el-radio v-if="oldStatus == 1"  v-model="changeForm.opinionStatus" label="2">{{opinionStatusList[oldStatus + 1]}}</el-radio>
            <el-radio v-else-if="oldStatus == 2"  v-model="changeForm.opinionStatus" label="3">{{opinionStatusList[oldStatus + 1]}}</el-radio>
            <el-radio v-else-if="oldStatus != 3"  v-model="changeForm.opinionStatus" label="3">{{opinionStatusList[oldStatus]}}</el-radio>
          </el-form-item>

输入框做判空

let content = this.commentContent.trim()
      if (content == '') {
        self.$message.error('发布内容不能为空')
        return false
      }

echarts

cdn引入：http://www.bootcdn.cn/echarts/

echarts

formatter:"{b0}: {c0}<br />{b1}: {c1}", 
//提示框浮层内容格式器，
支持字符串模板和回调函数两种形式,模板变量有
 {a}, {b}，{c}，{d}，{e}，
 分别表示
 系列名，数据名，数据值
 等

显示剩余天数

/**
 * 格式化日期
 * @param {*} timestamp 要转换的时间戳
 * @param {*} formate 格式的格式  支持yyyy-MM-dd HH:mm:ss和yyyy-MM-dd两种
 * @param {*} separator 分隔符
 */
const timestampToTime = (timestamp, formate, separator) => {
  let result = timestamp // 字符串的话原封不动返回
  if (timestamp && typeof timestamp !== ''string'') {
    if (timestamp.toString().length === 10) {
      timestamp = timestamp * 1000 /// /时间戳为10位需*1000，时间戳为13位的话不需乘1000
    }
    separator = separator || ''-''
    let date = new Date(timestamp)
    let year = date.getFullYear() + separator
    let month =
      (date.getMonth() + 1 < 10
        ? ''0'' + (date.getMonth() + 1)
        : date.getMonth() + 1) + separator
    // let nowDate = date.getDate() + '' '';
    let nowDate = date.getDate() < 10 ? ''0'' + date.getDate() : date.getDate()
    let hour = date.getHours()
    hour = hour < 10 ? ''0'' + hour : hour
    hour = hour + '':''
    let minutes = date.getMinutes()
    minutes = minutes < 10 ? ''0'' + minutes : minutes
    minutes = minutes + '':''
    let second = date.getSeconds()
    second = second < 10 ? ''0'' + second : second
    if (formate === ''yyyy-MM-dd'') {
      result = result = year + month + nowDate
      return result
    }
    nowDate += '' ''
    result = year + month + nowDate + hour + minutes + second
  }
  return result
}

validEndDate (endTime) {
      const endTimeStr = `${endTime} 23:59:59`
      const defaultFormat = ''yyyy-MM-dd''
      const timed = new Date().getTime()
      const startTimeStamp = dateUtil.timestampToTime(timed, defaultFormat)
      const startTimeStr = `${startTimeStamp} 00:00:00`
      const startTime = new Date(startTimeStr).getTime()
      const endTimeCompu = new Date(endTimeStr).getTime()
      const timeDiff = Math.abs(endTimeCompu - startTime)
      const day = timeDiff / (24 * 60 * 60 * 1000)
      this.toDate = Math.ceil(day)
    },

储存到localstoreage

/**
 * @description: 获取会话中存储的数据
 * @param key
 * @return: data
 */
export function getSessionStorage (key) {
  let data, obj
  try {
    obj = sessionStorage.getItem(key)
    data = JSON.parse(obj)
  } catch (e) {
    data = obj
  }
  return data
}

/**
 * @description: 保存数据到会话
 * @param key
 * @param value
 */
export function setSessionStorage (key, value) {
  if (typeof value === ''object'') {
    value = JSON.stringify(value)
  }
  sessionStorage.setItem(key, value)
}

返回站点地址

window.location.origin    返回站点主地址  indow.location.origin + ''/api/pf/attachment/upload/'' + self.issueKey

强制路由刷新

''$route.query'' () {
      this.setMainCss()
    }

监听页面的尺寸的变化

window.addEventListener(''resize'', function () {
      self.setMainCss()
    })

解析url路径的路径

let paraString = url.substring(index + 1, url.length).split(''&'')
  for (let i in paraString) {
    keyvalue = paraString[i].split(''='')
    key = keyvalue[0]
    value = keyvalue[1]
    obj[key] = value
  }
  return obj

深拷贝

JSON.stringify()与JSON.parse()的深拷贝的缺点
**这种方法很简单而且好用，但是有一点点瑕疵，它会抛弃对象的constructor。也就是深拷贝之后，不管这个对象原来的构造函数是什么，在深拷贝之后都会变成Object。
而且这种方法能正确处理的对象只有 Number, String, Boolean, Array，即那些能够被JSON直接表示的数据结构。RegExp对象或者function是无法通过这种方式深拷贝。**

lodash
这是我个人目前使用的方法，只需要一行var obj2 = _.cloneDeep(obj1)

回退

goBack: function () {
        // 页面回退
        var referrer = document.referrer,
            local = window.location.href;

        if (referrer && referrer != local) {
            window.history.back()
        } else {
            this.backToApp()
        }
    },

Vue.ls
*Vue插件，用于从Vue上下文中使用本地Storage，会话Storage和内存Storage
一个vue封装的本地储存的方法。*

Day.js ：一个轻量的处理时间和日期的 JavaScript 库

viser-vue

基于AntV-G2可视化引擎

ant的使用

{
          title: '亮点与不足',
          align: 'center',
          key: 'highlightsShort',
          dataIndex: 'highlightsShort',
          customRender: (text, row, index) => {
            var vm = this;
            // console.log("表格亮点与不足text", text);
            var child = vm.$createElement("a-textarea", {
                attrs:{
                  value:text,
                },
                domProps: {
                  value:text,
                  placeholder:"请输入亮点与不足",
                },
                on: {
                  change: function (event) {
                      vm.onChangeHighLightsShort(row,index,event);
                  },
                }
            });
            const obj = {
              children: child,
              attrs: {},
            };
            if(index===0){
              //第1组 启动策划责任,第2组 组织管理
              obj.attrs.rowSpan = 7;
            }else if(index===7){
              // 第三组 合同管理
              obj.attrs.rowSpan = 6;
            }else if(index===13){
              // 第四组 资金管理
              obj.attrs.rowSpan = 6;
            }else if(index===19){
              // 第五组 设计管理
              obj.attrs.rowSpan = 2;
            }else if(index===21){
              // 第六组 技术管理
              obj.attrs.rowSpan = 10;
            }else if(index===31){
              // 第七组 物资及设备管理
              obj.attrs.rowSpan = 5;
            }else if(index===36){
              // 第八组 分包管理
              obj.attrs.rowSpan = 8;
            }else if(index===44){
              // 第九组 工期管理
              obj.attrs.rowSpan = 7;
            }else if(index===51){
              // 第十组 成本管理
              obj.attrs.rowSpan = 5;
            }else if(index===56){
              // 第十一组 质量管理
              obj.attrs.rowSpan = 9;
            }else if(index===65){
              // 第十二组 安全与职业健康管理
              obj.attrs.rowSpan = 13;
            }else if(index===78){
              // 第十三组 环境管理
              obj.attrs.rowSpan = 7;
            }else if(index===85){
              // 第十四组 收尾管理（进入收尾阶段此部分打分）