首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue dayjs时间实时刷新

Vue利用dayjs封装实现时间实时刷新

2024-07-19 08:54:50 作者：我是亮哥啊

Day.js库本身专注于简化JavaScript日期和时间的操作,它的API设计直观,且功能强大,可以方便地格式化日期、添加或减去时间间隔、比较日期等,本文主要介绍了Vue利用dayjs封装实现时间实时刷新,需要的朋友可以参考下

1、vue2中使用mixins封装

1.1 封装

// mixins/formatdate.js
import dayjs from 'dayjs'
export default {
  data() {
    return {
      currentTime: {
        timer: null,
        currentDay: this.formatTime().day, // 星期几
        date: this.formatTime().date, // 年月日
        time: this.formatTime().time, // 时分秒
      },
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      this.updateTime()
    }, 1000)
  },
  methods: {
    formatTime(d = 'YYYY.MM.DD', t = 'HH:mm:ss') {
      let days = ['日', '一', '二', '三', '四', '五', '六']
      let date = dayjs(new Date()).format(d)
      let time = dayjs(new Date()).format(t)
      let day = `星期${days[dayjs().day()]}`
      return { date, time, day }
    },
    updateTime() {
      this.currentTime.currentDay = this.formatTime().day
      this.currentTime.date = this.formatTime().date
      this.currentTime.time = this.formatTime().time
    },
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
}

1.2 在组件中使用

<span>{{ currentTime.date }}</span>
<span>{{ currentTime.currentDay }}</span>
<span>{{ currentTime.time }}</span>
<script>
import formatdate from '@/mixins/formatdate'
export default {
  mixins: [formatdate],
}
</script>

2、vue3中利用组合式函数

2.1 封装

// formatTime.js
import dayjs from 'dayjs'
import { onBeforeUnmount, onMounted, ref } from 'vue'
export function useTime() {
  // 星期几
  const currentDay = ref('')
  // 年月日
  const date = ref('')
  // 时分秒
  const time = ref('')
  // 获取时间
  const updateTime = (d = 'YYYY.MM.DD', t = 'HH:mm:ss') => {
    let days = ['日', '一', '二', '三', '四', '五', '六']
    date.value = dayjs(new Date()).format(d)
    time.value = dayjs(new Date()).format(t)
    currentDay.value = `星期${days[dayjs().day()]}`
  }
  // 定义定时器
  let timer = null
  onMounted(() => {
    timer = setInterval(() => {
      updateTime()
    }, 1000)
  })
  onBeforeUnmount(() => clearInterval(timer))
  return { currentDay, date, time }
}

2.2 在组件中使用

<span>{{ currentDay }}</span>
<span>{{ date }}</span>
<span>{{ time }}</span>
<script setup>
import { useTime } from '@/utils/formatTime'
const { currentDay, date, time } = useTime()
</script>

到此这篇关于Vue利用dayjs封装实现时间实时刷新的文章就介绍到这了,更多相关Vue dayjs时间实时刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！