About the code sharing used by the vue project tool file utils.js

The content of this article is to share with you the code used by the vue project tool file utils.js. It has a certain reference value. Friends in need can refer to it

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

Related recommendations:

vue detailed tutorial on using xe-utils

The above is the detailed content of About the code sharing used by the vue project tool file utils.js. For more information, please follow other related articles on the PHP Chinese website!