当前位置：首页 > article >正文

前端常用utils方法持续更新中

article 2024/11/14 1:36:38

1.数字太长截断显示

在data上方定义一个filter 在template中{{value | ellipsis}}

  filters: {
    ellipsis(value) {
      if (!value) return ''
      if (value.length > 8) {
        return value.slice(0, 8) + '...'
      }
      return value
    }
  },

2.根据数据值动态更改表格样式

:cell-style=“changeCellStyle” 利用column上的label，以及property， row[column.property]拿到单元格数值、

 <template>
          <el-table
            fit
            :header-cell-style="getRowClass"
            :cell-style="changeCellStyle"
            height="350"
            :data="analysistabledata"
            style="width: 100%"
          >
            <el-table-column
              v-for="i in analysistabledatacolumn"
              :key="i.key"
              show-overflow-tooltip
              :prop="i[0]"
              :label="i[1]"
              width="86"
            ></el-table-column>
          </el-table>
</template>

  changeCellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.label === '') {
        column.width = 120
        return 'text-align:left;'
      }
      if (
        column.property !== 'name' &&
        column.property !== 'yesterday' &&
        column.property !== 'mtd' &&
        column.label !== ''
      ) {
        let textcolor = '#26A872'
        if (
          row[column.property] !== null &&
          row[column.property].includes('%') &&
          row[column.property].includes('-')
        ) {
          textcolor = '#ea4025'
          return `color:${textcolor};text-align:right;`
        }
        return `color:${textcolor};text-align:right;`
      }
      return 'text-align:right;'
    },

3.dayjs库处理日期

import dayjs from 'dayjs'

// 获取昨天日期
export function getYesterday() {
  const yesterday = dayjs().subtract(1, 'day')
  const formatYesterday = dayjs(yesterday).format('YYYY-MM-DD')
  return formatYesterday
}
// 获取上个月第一天日期
export function getLasterMonthFirstDay() {
  const LasterMonthDay = dayjs().subtract(1, 'month')
  const lastermonthfirstday = dayjs(LasterMonthDay).startOf('M')
  const formatlastermonthday = dayjs(lastermonthfirstday).format('YYYY-MM-DD')
  return formatlastermonthday
}

// 获取今天日期
export function getTodayFormat() {
  return dayjs().format('YYYY-MM-DD')
}

// 是否是15号之后
export function isAfterFifteenDay() {
  return dayjs().date() > 15
}

4.数字处理

// 将数字以万为单位保留一位小数
export function formateThousand(num:number) {
  num = Number(num)
  if (!num) return '--'
  if (num === 0) {
    return `${num}`
  } if (num > 1 && num < 10000) {
    return `${num}`
  }
  return `${(num / 10000).toFixed(1)}万`
}

export function addPrecent(num:number) {
  num = Number(num)
  if (!num) return '--'
  return `${(num)}%`
}

5.利用set做去重

      const keyList = new Set()
      this.data.nodeList.forEach(item => {
        keyList.add(item.monitorKey)// 用add增加数据
      })
      console.log(keyList.size - 1)//长度使用size而非length

6.对象数组根据某个key值去重

/*
arr:对象数组
uniId :某个key
*/
  uniqueObjArr(arr, uniId) {
    const res = new Map()
    return arr.filter((item) => !res.has(item[uniId]) && res.set(item[uniId], 1))
  },

7.随机数生成

/* 生成随机数 */
  curDateTime() {
    var d = new Date()
    var year = d.getFullYear() + ''
    var month = d.getMonth() + 1
    var date = d.getDate()
    var day = d.getDay()
    var Hours = d.getHours() // 获取当前小时数(0-23)
    var Minutes = d.getMinutes() // 获取当前分钟数(0-59)
    var Seconds = d.getSeconds() // 获取当前秒数(0-59)
    var curDateTime = year
    if (month > 9) {
      curDateTime = curDateTime + month
    } else {
      curDateTime = curDateTime + '0' + month
    }
    if (date > 9) { curDateTime = curDateTime + date } else { curDateTime = curDateTime + '0' + date }
    if (Hours > 9) { curDateTime = curDateTime + Hours } else { curDateTime = curDateTime + '0' + Hours }
    if (Minutes > 9) { curDateTime = curDateTime + Minutes } else { curDateTime = curDateTime + '0' + Minutes }
    if (Seconds > 9) { curDateTime = curDateTime + Seconds } else { curDateTime = curDateTime + '0' + Seconds }
    return curDateTime
  },

  RndNum(n) {
    var rnd = ''
    for (var i = 0; i < n; i++) {
      rnd += Math.floor(Math.random() * 10)
    }
    return rnd
  },
  // 输出指定位数的随机数的随机整数
  getTimeAndRandom() {
    return this.curDateTime() + this.RndNum(4)
  },

8.大数相加

  /**
     * js 实现一个函数，完成超过范围的两个大整数相加功能
     * @param {*} number1
     * @param {*} number2
     */
    bigNumberAdd(number1,number2) {
      // start
      let result = '' // 保存最后结果
      let carry = false // 保留进位结果

      // 将字符串转换为数组
      number1 = number1.split('')
      number2 = number2.split('')

      // 当数组的长度都变为0，并且最终不再进位时，结束循环
      while (number1.length || number2.length || carry) {
        // 每次将最后的数字进行相加，使用~~的好处是，即使返回值为 undefined 也能转换为 0
        carry += ~~number1.pop() + ~~number2.pop()

        // 取加法结果的个位加入最终结果
        result = carry % 10 + result

        // 判断是否需要进位，true 和 false 的值在加法中会被转换为 1 和 0
        carry = carry > 9
      }

      // 返回最终结果
      return result
    },

9.向url中添加参数

/**
 * Add the object as a parameter to the URL
 * @param baseUrl url
 * @param obj
 * @returns {string}
 * eg:
 *  let obj = {a: '3', b: '4'}
 *  setObjToUrlParams('www.baidu.com', obj)
 *  ==>www.baidu.com?a=3&b=4
 */

export function setObjToUrlParams1(baseURL:string, obj:any):string {
  let parameters = '';
  for(const key in obj) {
    parameters +=key + '=' + encodeURIComponent(obj[key]) + '&';
  }
  return /\?$/.test(baseURL) ? baseURL + parameters : baseURL.replace(/\/?$/, '?') + parameters;
}
// 1. /\?$/：这个正则表达式用于检查 baseURL 是否以问号(?)结尾。其中，\? 表示问号，$ 表示字符串的末尾。所以，/\?$/ 匹配以问号结尾的字符串。

// 2. /\/?$/：这个正则表达式用于在 baseURL 的末尾添加一个问号。其中，\/ 表示斜线，? 表示前面的字符（这里是斜线）可以出现也可以不出现，$ 表示字符串的末尾。所以，/\/?$/ 匹配以斜线或无字符结尾的字符串。在这个正则表达式中，replace 函数将匹配的部分（无论是斜线还是无字符）替换为问号。