À propos du partage de code utilisé par le fichier d'outil du projet Vue utils.js

Le contenu de cet article est de partager avec vous le code utilisé dans le fichier de l'outil du projet vue utils.js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer

<.>

import Vue from 'vue'
import XLSX from 'xlsx'
/**
 * 图片预览方法
 * 已注入所有Vue实例，
 * template模板里调用 $imgPreview(src)
 * 组件方法里调用 this.$imgPreview(src)
 */
const imgPreview = (src) => {
let p = document.createElement('p')
let img = document.createElement('img')
let close = document.createElement('i')
p.className = 'body__img__preview'
img.src = src
close.className = 'body__img__close'
close.onclick = () => {
document.body.removeChild(p)
}
p.appendChild(img)
p.appendChild(close)
document.body.appendChild(p)
}
/**
 * 格式化日期方法
 * 已注入所有Vue实例，
 * template模板里调用 $dateFormat(date)
 * 组件方法里调用 this.$dateFormat(date)
 * 例：this.$dateFormat('Dec 27, 2017 3:18:14 PM') 得到 '2017-12-27 15:18:14'
 */
const dateFormat = (date) => {
if (!date) return ''
let date_format = new Date(date)
let year = date_format.getFullYear()
let month = date_format.getMonth() + 1
if (month < 10) month = &#39;0&#39; + month
let mydate = date_format.getDate()
if (mydate < 10) mydate = &#39;0&#39; + mydate
let hours = date_format.getHours()
if (hours < 10) hours = &#39;0&#39; + hours
let minutes = date_format.getMinutes()
if (minutes < 10) minutes = &#39;0&#39; + minutes
let seconds = date_format.getSeconds()
if (seconds < 10) seconds = &#39;0&#39; + seconds
let time = `${year}-${month}-${mydate} ${hours}:${minutes}:${seconds}`
return time
}
/**
 * 格式化日期方法
 * 已注入所有Vue实例，
 * template模板里调用 $dateFormatNoTime(date)
 * 组件方法里调用 this.$dateFormatNoTime(date)
 * 例：this.$dateFormatNoTime(&#39;Dec 27, 2017 3:18:14 PM&#39;) 得到 &#39;2017-12-27&#39;
 */
const dateFormatNoTime = (date) => {
if (!date) return &#39;&#39;
let date_format = new Date(date)
let year = date_format.getFullYear()
let month = date_format.getMonth() + 1
if (month < 10) month = &#39;0&#39; + month
let mydate = date_format.getDate()
if (mydate < 10) mydate = &#39;0&#39; + mydate
let time = `${year}-${month}-${mydate}`
return time
}
/**
 * 获取当天日期方法
 * 已注入所有Vue实例，
 * template模板里调用 $todayFormat
 * 组件方法里调用 this.$todayFormat
 * 例：this.$todayFormat() 得到 &#39;2018-01-31&#39;
 */
const todayFormat = () => {
let date_format = new Date()
let year = date_format.getFullYear()
let month = date_format.getMonth() + 1
if (month < 10) month = &#39;0&#39; + month
let date = date_format.getDate()
if (date < 10) date = &#39;0&#39; + date
let time = `${year}-${month}-${date}`
return time
}
/**
 * 导出数据报表xlsx文件
 * 已注入所有Vue实例，
 * template模板里调用 $$outputXlsxFile
 * 组件方法里调用 this.$outputXlsxFile
 * 例：this.$outputXlsxFile([[&#39;字段1&#39;, &#39;字段2&#39;], [1, 2]], [{wch: 10}, {wch: 50}], &#39;测试导出&#39;) 得到 测试导出.xlsx 文件
 * 第一个参数是导出的数组对象，第二个参数是设置字段宽度，第三个参数是文件名
 */
const outputXlsxFile = (data, wscols, xlsxName) => {
/* convert state to workbook */
const ws = XLSX.utils.aoa_to_sheet(data)
ws[&#39;!cols&#39;] = wscols
const wb = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(wb, ws, xlsxName)
/* generate file and send to client */
XLSX.writeFile(wb, xlsxName + ".xlsx")
}
/**
 * 判断开始时间和结束时间
 * 已注入所有Vue实例，
 * template模板里调用 $checkTime
 * 组件方法里调用 this.$checkTime
 * 例：this.$checkTime([&#39;2018-01-01&#39;, &#39;2018-02-02&#39;]) 得到 {&#39;2018/01/01&#39;, &#39;2018/02/02&#39;}
 */
const checkTime = (date) => {
if (!date) {
Vue.prototype.$notify.error({
message: &#39;日期不能为空&#39;
})
return false
} else {
let begTime = date[0].replace(/-/g, &#39;/&#39;)
let endTime = date[1].replace(/-/g, &#39;/&#39;)
if (+((new Date(endTime)).getTime()) < +((new Date(begTime)).getTime())) {
Vue.prototype.$notify.error({
message: &#39;开始日期不能大于结束日期&#39;
})
return false
} else {
begTime = date[0]
endTime = date[1]
return {begTime, endTime}
}
}
}
/**
 * 判断性别
 * 已注入所有Vue实例，
 * template模板里调用 $typeSex
 * 组件方法里调用 this.$typeSex
 * 例：this.$typeSex(1) 得到 男
 * 参数 0：未知 1:男 2:女
 */
const typeSex = (value) => {
let sex = &#39;&#39;
switch (value) {
case &#39;0&#39; : sex = &#39;未知&#39;
break
case &#39;1&#39; : sex = &#39;男&#39;
break
case &#39;2&#39; : sex = &#39;女&#39;
break
}
return sex
}
/**
 * 时间戳转换
 * 已注入所有Vue实例，
 * template模板里调用 $timestampToTime
 * 组件方法里调用 this.$timestampToTime
 * 例：this.$timestampToTime(1523440865000) 得到 &#39;2018-04-11 18:1:5&#39;
 */
const timestampToTime = (timestamp) => {
var date = new Date(timestamp)
let Y = date.getFullYear() + &#39;-&#39;
let M = (date.getMonth() + 1 < 10 ? &#39;0&#39; + (date.getMonth() + 1) : date.getMonth() + 1) + &#39;-&#39;
let D = date.getDate() + &#39; &#39;
let h = date.getHours() + &#39;:&#39;
let m = date.getMinutes() + &#39;:&#39;
let s = date.getSeconds()
return Y + M + D + h + m + s
}
Vue.prototype.$imgPreview = imgPreview
Vue.prototype.$dateFormat = dateFormat
Vue.prototype.$dateFormatNoTime = dateFormatNoTime
Vue.prototype.$todayFormat = todayFormat
Vue.prototype.$outputXlsxFile = outputXlsxFile
Vue.prototype.$checkTime = checkTime
Vue.prototype.$typeSex = typeSex
Vue.prototype.$timestampToTime = timestampToTime

Recommandations associées :

Vue tutoriel détaillé sur l'utilisation de xe-utils

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!