utils

1、时间格式化

Date.prototype.Format = function (fmt) {
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds() //秒 
    };
    if (/(y+)/.test(fmt)) { //根据y的长度来截取年
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    }
    return fmt;
}


const today = new Date().Format('yyyy-MM-dd');

2、下载

export function download(href, filename = '') {
  const a = document.createElement('a')
  a.download = filename
  a.href = href
  document.body.appendChild(a)
  a.click()
  a.remove()
}

3、脱敏

1、手机号脱敏
Vue.prototype.formatEditSecretMobile = (str) => {
  if(str && !str.includes('*')) {
    return str && str.replace(/(\d{3})\d*(\d{4})/, '$1****$2');
  } else {
    return str;
  }
};

2、姓名脱敏
Vue.prototype.formatEditSecretName = (str) => {
  if(str && !str.includes('*')) {
    if(str.length <= 3) {
      return '*' + str.substring(1, str.length) // 小于3脱姓
    }else if(str.length > 3) {
      return '**' + str.substring(2, str.length) // 大于3脱前两个字
    }
    return str;
  } else {
    return str;
  }
};

3、身份证脱敏
Vue.prototype.formatEditSecretIdcard = (str) => {
  if(str && !str.includes('*')) {
    return str && str.replace(/(\d{6})\d*(\d{4})/, '$1********$2');
  } else {
    return str;
  }
};

4、权限自定义指令(directive)

import { useStore } from '@/store'
import { Directive } from 'vue'
import { flattenByKey } from '@/utils'

const getPermisson = (role: string, path: string, arr: any[]) => {
  if (!arr.length || !role || !path) {
    console.error('menu 不存在 或role,path不存在')
    return
  }
  let permission = false;
  const menu = flattenByKey(arr, 'child');
  const url = path.includes('/edit') ? path.split('/edit')[0] : path
  menu.forEach(element => {
    if (element.menu_url === role && element.type === '3') {
      const parent = menu.find(n => element.parent_id === n.id)
      if (parent && parent.menu_url === url) {
        permission = true
      }
    }
  })

  return permission;
}

export const permission: Directive = {
  mounted(el, binding: any) {
    const { value } = binding;
    const path = location.pathname;
    const user = useStore().state.user.userInfo
    if (user && user.menu) {
      const { menu } = user;
      const data = getPermisson(value, path, menu);
      if (!data) {
        el.style.display = 'none'
      }
    }
  }
}

**main.js**

import { createApp, Directive } from 'vue'
import App from './App.vue'
const app = createApp(App)

// 自定义指令
Object.keys(directives).forEach(key => {
  app.directive(key, (directives as { [key: string ]: Directive })[key])
})

v-permission="'edit'"

5、全局传值实际应用(provide/inject & globalProperties)

**main.js**

import { createApp, Directive } from 'vue';
import App from './App.vue';
import { store } from './store';
import { httpUrl } from '@/utils';

const app = createApp(App)

app.provide('httpBaseUrl', httpUrl); // 方法一
app.config.globalProperties.httpUrl = httpUrl; // 方法二

app.use(store).use(router).mount('#app')

import { defineComponent, reactive, toRefs, computed, onMounted, getCurrentInstance, inject } from 'vue';
import { useStore } from '@/store';
import { debounce } from 'lodash';

export default defineComponent({
  setup(props, context) {
    const httpBaseUrl = inject('httpBaseUrl'); // 方法一
    const { proxy } = (getCurrentInstance() as any); // 方法二
    const store = useStore();
    
    const state = reactive({
      test: ''
    })
    
    const loading = computed(() => {
      return store.state.app.loading
    });
    
    onMounted(() => {
      methods.init();
    });
    
    const methods = reactive({
      init: debounce(async () => {
        // --
      }, 200)
    })
    
    return {
      ...toRefs(state),
      ...toRefs(methods),
      loading
    };
  }
})


console.log(11, proxy.httpUrl, httpBaseUrl)

6、Base64 to Blob

dataURLtoBlob(dataurl) {
  const arr = dataurl.split(',')
  const mime = arr[0].match(/:(.*?);/)[1]
  const bstr = atob(arr[1])
  let n = bstr.length
  const u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new Blob([u8arr], { type: mime })
}


const base64 = canvas.toDataURL('image/png');
const myBlob = this.dataURLtoBlob(base64)
const myUrl = URL.createObjectURL(myBlob)

7、是否ios

let ua = '' + window.navigator.userAgent.toLowerCase()
// 通过正则表达式匹配ua中是否含有MicroMessenger字符串且是IOS系统
let isIos = /\(i[^;]+;( U;)? CPU.+Mac OS X/i.test(ua) // 是IOS系统

7、根据key将多级数组展开成1级数组

export function flattenByKey(arr: any[], key: string) {
  const flattenArr: any[] = [];
  const arrfilter = (arr: any[], key: string) => {
    arr &&
      arr.forEach((n) => {
        if (!n[key]) {
          flattenArr.push(n);
        } else {
          flattenArr.push(omit(n, [key]));
          arrfilter(n[key], key);
        }
      });
  };

  arrfilter(arr, key);

  return flattenArr;
}