1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
| <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>
|
|
