vue 프로젝트 도구 파일 utils.js에서 사용하는 코드 공유에 대해

이 글의 내용은 Vue 프로젝트 도구 파일인 utils.js에서 사용하는 코드를 공유하기 위한 것입니다. 여기에는 특정 참조 값이 있습니다. 필요한 친구가 참조할 수 있습니다.

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

관련 권장사항:

vue

와 함께 xe-utils를 사용하는 방법에 대한 자세한 튜토리얼

위 내용은 vue 프로젝트 도구 파일 utils.js에서 사용하는 코드 공유에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!