| | |
|---|
| | | <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> |
|---|
| | | <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>
|
|---|
