防抖节流、加密解密 公共函数

树形数据筛选 子节点存在展示父节点

getFilterArr (arr, str) {
      const data = arr.filter(item => {
        if (item.children) {
          item.children = this.getFilterArr(item.children, str)
          if (item.children.length) return true
        }
        return !!item.name.includes(str);
      })
      return data
    }

保留小数点的方法 四舍五入

scoreToFixed(num, n) {
  const changeNum = (Math.round(num * Math.pow(10, n)) / Math.pow(10, n) + Math.pow(10, -(n + 1))).toString().slice(0, -1);
  return parseFloat(changeNum).toFixed(n);
},

防抖函数的全部封装

/**
 * 防抖
 * @param {Function} func 要执行的回调函数
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行
 * @return null
 */
let timeout
export function Debounce (func, wait = 2000, immediate = false) {
  // 清除定时器
  if (timeout !== null) clearTimeout(timeout)
  // 立即执行，此类情况一般用不到
  if (immediate) {
    const callNow = !timeout
    timeout = setTimeout(function () {
      timeout = null
    }, wait)
    if (callNow) typeof func === 'function' && func()
  } else {
    // 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
    timeout = setTimeout(function () {
      typeof func === 'function' && func()
    }, wait)
  }
}

## loadsh引入再vue中使用
<template>
  <div>
    <el-button @click="handelClick">点击防抖事件</el-button>
  </div>
</template>

<script>
// 正确示例

//  加载到vue原型链上的lodash在method函数后的定义的地方取不到，重新引了一遍
import _ from 'lodash'
export default {
  methods: {
    // 加载到原型链上的lodash，在getRemote后取不到
    // 注意，这里debounce中的第一个参数，不能写成箭头函数，否则，取不到this
    getRemote: _.debounce(function () {
      console.log('this', this)
      console.log('我呗打印了')
    }, 1000),
    handelClick () {
      this.getRemote()
    }
  }
}
</script>

节流函数的封装使用

/**
 * 节流
 * @param {Function} func 要执行的回调函数
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行
 * @return null
 */
// eslint-disable-next-line no-unused-vars
let timer, flag
export function throttle (func, wait = 300, immediate = true) {
  if (immediate) {
    if (!flag) {
      flag = true
      // 如果是立即执行，则在wait毫秒内开始时执行
      typeof func === 'function' && func()
      timer = setTimeout(() => {
        flag = false
      }, wait)
    }
  } else {
    if (!flag) {
      flag = true
      // 如果是非立即执行，则在wait毫秒内的结束处执行
      timer = setTimeout(() => {
        flag = false
        typeof func === 'function' && func()
      }, wait)
    }
  }
};

vue中调用

<template>
<div>
  <el-button @click="handelDebounce">防抖</el-button>
</div>
</template>
<script>
import { Debounce, throttle } from '@/utils/common.js'
export default {
  data () {
    return {

    }
  },
  methods: {
    handelDebounce () {
      Debounce(this.handelLog) // 防抖调用
      throttle(this.handelLog, 2000, false) // 节流调用
    },
    handelLog () {
      console.log(22222)
    }
  }
}
</script>
<style>
</style>
https://blog.csdn.net/mysunli/article/details/111379328 //外网实现的地址

路由参数加密解密，防止用户改路由参数进行页面操作

// const CryptoJS = require('crypto-js') // 引用AES源码js
import CryptoJS from 'crypto-js'
const key = CryptoJS.enc.Utf8.parse('1234123412ABCDEF') // 十六位十六进制数作为密钥
const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412') // 十六位十六进制数作为密钥偏移量
// 加密方法
export function Encrypt (word) {
  let srcs = CryptoJS.enc.Utf8.parse(word)
  let encrypted = CryptoJS.AES.encrypt(srcs, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  })
  return encrypted.ciphertext.toString().toUpperCase()
  // 如果不需要解密.ciphertext.toString().toUpperCase();将这段代码删除
}

// 解密方法
export function Decrypt (word) {
  let str = null
  if (word) {
    let encryptedHexStr = CryptoJS.enc.Hex.parse(word)
    let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr)
    let decrypt = CryptoJS.AES.decrypt(srcs, key, {
      iv: iv,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.Pkcs7
    })
    let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
    str = decryptedStr.toString()
  }
  return str
}

export default {
  Decrypt,
  Encrypt
}