89 lines
1.7 KiB
Vue
89 lines
1.7 KiB
Vue
<template>
|
||
<text>{{dateShow}}</text>
|
||
</template>
|
||
|
||
<script>
|
||
import {friendlyDate} from './date-format.js'
|
||
/**
|
||
* Dateformat 日期格式化
|
||
* @description 日期格式化组件
|
||
* @tutorial https://ext.dcloud.net.cn/plugin?id=3279
|
||
* @property {Object|String|Number} date 日期对象/日期字符串/时间戳
|
||
* @property {String} locale 格式化使用的语言
|
||
* @value zh 中文
|
||
* @value en 英文
|
||
* @property {Array} threshold 应用不同类型格式化的阈值
|
||
* @property {String} format 输出日期字符串时的格式
|
||
*/
|
||
export default {
|
||
name: 'uniDateformat',
|
||
props: {
|
||
date: {
|
||
type: [Object, String, Number],
|
||
default () {
|
||
return '-'
|
||
}
|
||
},
|
||
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>
|