Vue常用技术

Vue全局过滤器（常用的）：

1、时间过滤器

引入Vue
引入moment，并设置时间类型为中文

import Vue from 'vue'
import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')

/**
 * @name 时间过滤器
 * @param {*} pattern  默认格式
*/

Vue.filter('dateFilter', function (dateStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
  return moment(dateStr).format(pattern)
})

2、整数逢三断一

只有全部都是整数才会以逗号分隔去呈现
如果有小数点则会没有效果

/**
 * @name 整数逢三断一，用逗号隔开(如果有小数则不行)
 * 例如：124362343  =>  124,362,343
*/
Vue.filter('numberFormat', function (val) {
  if (!val) {
    return '0'
  }
  const intPartFormat = val.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
  return intPartFormat
})

3、二进制流文件下载

引入axios并写好接口

import axios from '@/utils/request'

// 文件导出
export function fileExport() {
  return axios({
    url: '/file/download',
    method: 'get', // 这是根据后端接口来设置的，并不是唯一的
    responseType: 'blob' // 设置类型为blob
  })
}

编写一个公共方法，然后引入写好的文件接口
后端返回一个二进制流或者文件流，和文件类型
如果有文件名则去出文件名，如果没有自己可以自定义文件名字，以下是后端把文件名存到了请求头headers里面，所以就从headers里取出文件名
attachId是文件id，一般每一个文件都会有一个id作为标识

// 引入文件导出接口
import { fileExport } from '../services/test'

/**
 * @name附件下载方法
 * @param {*} attachId 附件ID
 * 二进制流下载
 */
export function downloadFile(attachId) {
  fileExport(attachId).then(res => {
    // 设置好文件类型，并构建blob对象
    const blob = new Blob([res.data], { type: res.data.type })
    // 创建一个新的对象URL，这个对象可以是File对象或Blob对象
    const url = window.URL.createObjectURL(blob)
    // 取出返回在头部的文件名，也可以自己取名字
    let filename = res.headers[' content -disposition'].split('filename=')[1]
    // 生成一个a链接
    const link = document.createElement('a')
    // 设置隐藏样式
    link.setAttribute('style', 'display: none ')
    // 设置下载链接
    link.setAttribute('href', url)
    // 文件重命名
    link.setAttribute(' download', filename)
    //将a元素追加到body中，为了兼容火狐浏览器
    document.body.appendChild(link)
    // 点击事件
    link.click()
    //重点，兼容火狐浏览器
    document.body.removeChild(link)
    //释放内存，针对火狐浏览器必须注释，否则火狐浏览器无法下载
    // URL . revoke0bjectURL (ur1)
  })
}

温馨提示：以上方法仅供参考！博主只是想记录一下，方便以后回顾。