uni-dateformat.vue 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <template>
  2. <text>{{dateShow}}</text>
  3. </template>
  4. <script>
  5. import {friendlyDate} from './date-format.js'
  6. /**
  7. * Dateformat 日期格式化
  8. * @description 日期格式化组件
  9. * @tutorial https://ext.dcloud.net.cn/plugin?id=3279
  10. * @property {Object|String|Number} date 日期对象/日期字符串/时间戳
  11. * @property {String} locale 格式化使用的语言
  12. * @value zh 中文
  13. * @value en 英文
  14. * @property {Array} threshold 应用不同类型格式化的阈值
  15. * @property {String} format 输出日期字符串时的格式
  16. */
  17. export default {
  18. name: 'uniDateformat',
  19. props: {
  20. date: {
  21. type: [Object, String, Number],
  22. default () {
  23. return '-'
  24. }
  25. },
  26. locale: {
  27. type: String,
  28. default: 'zh',
  29. },
  30. threshold: {
  31. type: Array,
  32. default () {
  33. return [0, 0]
  34. }
  35. },
  36. format: {
  37. type: String,
  38. default: 'yyyy/MM/dd hh:mm:ss'
  39. },
  40. // refreshRate使用不当可能导致性能问题,谨慎使用
  41. refreshRate: {
  42. type: [Number, String],
  43. default: 0
  44. }
  45. },
  46. data() {
  47. return {
  48. refreshMark: 0
  49. }
  50. },
  51. computed: {
  52. dateShow() {
  53. this.refreshMark
  54. return friendlyDate(this.date, {
  55. locale: this.locale,
  56. threshold: this.threshold,
  57. format: this.format
  58. })
  59. }
  60. },
  61. watch: {
  62. refreshRate: {
  63. handler() {
  64. this.setAutoRefresh()
  65. },
  66. immediate: true
  67. }
  68. },
  69. methods: {
  70. refresh() {
  71. this.refreshMark++
  72. },
  73. setAutoRefresh() {
  74. clearInterval(this.refreshInterval)
  75. if (this.refreshRate) {
  76. this.refreshInterval = setInterval(() => {
  77. this.refresh()
  78. }, parseInt(this.refreshRate))
  79. }
  80. }
  81. }
  82. }
  83. </script>
  84. <style>
  85. </style>