目录
1,下载模板文件,后端接口返回工作流,前端处理后才可以下载
封装方法:
export const downLoadFetch = (conf, params, name, suffix) => {
const par = JSON.stringify(params) == '{}' ? '' : `?${qs.stringify(params)}`
axios({
method: 'get',
url: `${conf.url}${par}`,
responseType: 'blob',
})
.then(response => {
if (!response.data) return
const link = document.createElement('a')
link.style.display = 'none'
link.href = window.URL.createObjectURL(new Blob([response.data]))
link.setAttribute('download', `${name || 'export'}.${suffix || 'xls'}`)
document.body.appendChild(link)
link.click()
})
.catch(console.error)
}
downLoadFetch = (conf, params, name, suffix)
四个参数分别代表:接口,需要给接口传的参数,文件名,文件后缀
使用:先页面引入,然后调用
downLoadFetch(this.$billURL.downloadExcel(), '', '文件名')
2,input框验证及使用方法
限制及使用方法一(当输入正确时才可提交):
位置(和import同级)
const regTel = /^1(2|3|4|5|6|7|8|9)\d{9}$/;//手机号验证
const regTel = /^[0][0-9]{2,3}-[0-9]{5,10}$/;//座机号验证
使用方式:
限制及使用方法二(在输入时就开始限制,也就是无法输入错误的):
下面是限制只能输数字以及小数点后两位
<el-input
v-model.trim="input"
placeholder="请输入内容"
size="mini"
:maxlength="13"
@input="
(v) =>
(input = v
.replace(/[^\d.]/g, '')
.replace(/^0{1,}/g, '')
.replace(/\.{2,}/g, '.')
.replace(/^\./g, '')
.replace('.', '$#$')
.replace(/\./g, '')
.replace('$#$', '.')
.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'))
"
></el-input>
3,数组对象根据某个key值去重
封装:
// 数组去重
export function unique(arr, key) {
const res = new Map()
return arr.filter(arr => !res.has(arr[key]) && res.set(arr[key], 1))
}
页面调用(记得先在页面引入):
4,input 框阻止默认回车换行
html:
<el-input
v-model="scope.row.categoryGoalName"
placeholder="请输入"
v-if="!disabled"
type="textarea"
:rows="1"
autosize
@keydown.enter.native="textareaKeydown"
/>
方法:
textareaKeydown() {
let e = window.event || arguments[0];
if (e.key == "Enter" || e.code == "Enter" || e.keyCode == 13) {
e.returnValue = false;
return false;
}
},
5,数据上移下移
//this.mapTableData 数据源
//index 当前行索引
handleChangeItem(index, type) {
if (type == "up") {
let upData = this.mapTableData[index - 1];
this.mapTableData.splice(index - 1, 1);
this.mapTableData.splice(index, 0, upData);
} else {
let downData = this.mapTableData[index + 1];
this.mapTableData.splice(index + 1, 1);
this.mapTableData.splice(index, 0, downData);
}
},
6,a标签下载文件,并自定义文件名
down(url, fileName) {
var xhr = new XMLHttpRequest()
xhr.open('get', url, true)
xhr.responseType = 'blob'
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var oA = document.createElement('a')
var href = window.URL.createObjectURL(xhr.response)
oA.href = href
oA.download = fileName
oA.style.display = 'none'
document.body.appendChild(oA)
oA.click()
document.body.removeChild(oA)
window.URL.revokeObjectURL(href)
} else {
console.log('请求状态错误', xhr.status)
}
}
}
xhr.send()
}
7,随机生成具有唯一性的字符串方法
soleString32() {
var str = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
var timestamp = +new Date() + Math.floor(Math.random() * 10)
var resultStr = ''
for (var i = 0; i < 19; i++) {
resultStr += str.charAt(Math.floor(Math.random() * str.length))
}
resultStr += timestamp
resultStr = resultStr.split('')
resultStr.sort(function (a, b) {
return Math.random() - 0.5
})
resultStr = resultStr.join('')
return resultStr
}
8,转化时间戳
export default function formatDate(date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, `${date.getFullYear()}`.substr(4 - RegExp.$1.length))
}
const o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds(),
}
for (const k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
const str = `${o[k]}`
fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : `00${str}`.substr(str.length))
}
}
return fmt
}