记录Vue常用一些工具自留

1. 使用postcss-pxtorem

vue2 项目由于需要适配不同电脑屏幕宽度 在放大的时候不需要改变

vueconfig.vue

  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            // 把px单位换算成rem单位
            require('postcss-pxtorem')({
              rootValue: 16, // 换算的基数 375的设计稿，换算基数就是37.5 ,本项目是1920，则192
              propList: ['*'], // 可以从px更改为rem的属性。
              selectorBlackList: [], // 要忽略的选择器并保留为px。
              minPixelValue: 2 // 设置要替换的最小像素值。
            })
          ]
        }
      }
    }
  }

px-rem.js

const baseSize = 16 // 跟postcss.config.js中rootValue的值是一致的
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 1920 宽的缩放比例，可根据自己需要修改
  const scale = document.documentElement.clientWidth / 1920
  console.log(scale)
//最大为1.1倍
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 1.1)) + 'px'
//   if()
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

main.js

import '@/utils/px-rem'

2.getTime 转时间格式

//args length===0 返回当前时间
//args的数字值是当前第几天对应的时间
export function getTimeFormat (...args: number[]|string[]) {
  let time:string = ''
  if (args.length === 0) {
    time = new Date()
    console.log(time)
  } else {
    const copytime = args[0] > 0 ? ((new Date()).getTime() - 0) + (Math.abs(args[0]) * 86400000 - 0) : ((new Date()).getTime() - 0) - (Math.abs(args[0]) * 86400000 - 0)
    time = new Date(copytime)
  }
  const year = time.getFullYear() // getFullYear()代替getYear()
  // 月 getMonth()：0 ~ 11
  const month = (time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)
  // 日 getDatetime：(1 ~ 31)
  const day = time.getDate() < 10 ? '0' + time.getDate() : time.getDate()
  // 时 getHours()：(0 ~ 23)
  const hour = time.getHours() < 10 ? '0' + time.getHours() : time.getHours()
  // 分 getMinutes()： (0 ~ 59)
  const minute = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes()
  // 秒 getSeconds()：(0 ~ 59)
  const second = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds()
  return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
}

3.关于多个合并单元格处理行合并 （列合并一样）

// 行合并
function rowSpan (name: string[], table: any[]) {
  // 生成目标对象
  //name为表头对应的字段名数组 table为tableData数组
  const targetSpan:Record<string, any> = {}// 目标对象
  const tagSpan:{ [key: string]: any } = {}// 游标对象
  //const tagValue:{ [key: string]: any } = {}// 计算加值
  console.log(name, table)
  name.forEach((item:string) => {
    tagSpan[item] = 0
    targetSpan[item] = [0]
 //   tagValue[item] = [0]
  })
  //   const tagArr:number[] = []
  table.forEach((item, index:number) => {
    // const bool = false
    name.forEach((rowItem, rowIndex) => {
      if (index === 0) { // 初始化 游标为0
        targetSpan[rowItem][index] = 1
       // tagValue[rowItem][tagSpan[rowItem]] += item.failRow
      } else {
        if (item[rowItem] === table[index - 1][rowItem] && !(rowIndex > 0 && tagSpan[name[rowIndex - 1]] === index)) { // 位置 一定大于2
          targetSpan[rowItem].push(0)
          targetSpan[rowItem][tagSpan[rowItem]] += 1
          //tagValue[rowItem].push(0)
          //tagValue[rowItem][tagSpan[rowItem]] += item.failRow
        } else {
          targetSpan[rowItem][index] = 1
          tagSpan[rowItem] = index
          //tagValue[rowItem][index] = item.failRow
        }
      }
    })
  })
 // return { targetSpan, tagValue }
return tagValue
}
export default rowSpan

el-table-columen 超出隐藏

<el-popover placement="top-start"
                        trigger="click"
                        width="400">
              <div style="max-height: 400px;overflow-y: auto;"> {{ scope.row['name']}}</div>
              <div slot="reference" style="
                                        white-space: nowrap;
                                        cursor: pointer;
                                        overflow: hidden;
                                        text-overflow: ellipsis;">{{scope.row['name']}}</span></div>
            </el-popover>