chanyiUniapp/components/uni-dateformat/uni-dateformat.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 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 scoped></style>