91 lines
1.7 KiB
Vue
91 lines
1.7 KiB
Vue
|
<template>
|
|||
|
|
<text>{{dateShow}}</text>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
/**
|
|||
|
|
* Dateformat 日期格式化
|
|||
|
|
* @description 日期格式化组件
|
|||
|
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
|
|||
|
|
* @property {Object|String|Number} date 日期对象/日期字符串/时间戳
|
|||
|
|
* @property {String} locale 格式化使用的语言
|
|||
|
|
* @value zh 中文
|
|||
|
|
* @value en 英文
|
|||
|
|
* @property {Array} threshold 应用不同类型格式化的阈值
|
|||
|
|
* @property {String} format 输出日期字符串时的格式
|
|||
|
|
*/
|
|||
|
|
import {
|
|||
|
|
friendlyDate
|
|||
|
|
} from './date-format.js'
|
|||
|
|
export default {
|
|||
|
|
name: 'uniDateformat',
|
|||
|
|
props: {
|
|||
|
|
date: {
|
|||
|
|
type: [Object, String, Number],
|
|||
|
|
default () {
|
|||
|
|
return Date.now()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
locale: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'zh',
|
|||
|
|
},
|
|||
|
|
threshold: {
|
|||
|
|
type: Array,
|
|||
|
|
default () {
|
|||
|
|
return [0, 0]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
format: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'yyyy/MM/dd hh:mm:ss'
|
|||
|
|
},
|
|||
|
|
// refreshRate使用不当可能导致性能问题，谨慎使用
|
|||
|
|
refreshRate: {
|
|||
|
|
type: [Number, String],
|
|||
|
|
default: 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
refreshMark: 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
dateShow() {
|
|||
|
|
this.refreshMark
|
|||
|
|
return friendlyDate(this.date, {
|
|||
|
|
locale: this.locale,
|
|||
|
|
threshold: this.threshold,
|
|||
|
|
format: this.format
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
refreshRate: {
|
|||
|
|
handler() {
|
|||
|
|
this.setAutoRefresh()
|
|||
|
|
},
|
|||
|
|
immediate: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
refresh() {
|
|||
|
|
this.refreshMark++
|
|||
|
|
},
|
|||
|
|
setAutoRefresh() {
|
|||
|
|
clearInterval(this.refreshInterval)
|
|||
|
|
if (this.refreshRate) {
|
|||
|
|
this.refreshInterval = setInterval(() => {
|
|||
|
|
this.refresh()
|
|||
|
|
}, parseInt(this.refreshRate))
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
|
|||
|
|
</style>
|