vue3---dayjs-入门及常用方法

目录

day.js下载安装

vue3的使用

     导入day.js

     使用

     最终效果 

---

dayjs是一个轻量的处理时间和日期的 JavaScript 库

---

dayjs好处

• 🕒 和Moment.js有着相同的API和模式
• 💪 不可变、持久性
• 🔥 提供链式调用
• 🌐 国际化标准
• 📦 超小的压缩体积，仅仅有2kb左右
• 👫 极大多数的浏览器兼容

官方github github.com/iamkun/dayj…

中文使用文档 github.com/iamkun/dayj…

---

day.js下载安装

npm install dayjs --save
import dayjs from 'dayjs'

<script src="https://unpkg.com/dayjs"></script>

---

在vue3中使用

        这里测试我的后台返回的是10位的Unix 时间戳 ==》 create_time

        

         如果不做处理在前端就是这样

        

         所以接下来咱们先做处理

---

      main.js导入day.js

import dayjs from "dayjs"

// @ts-ignore
createApp().config.globalProperties.$dayjs = dayjs; //全局使用dayjs

---

       在vue页面中使用

         切记先导入哦

<script setup>
  //时间格式转化
  const days = require('dayjs')
</script>

        然后再修改前端页面

  <template v-slot="{ row }" v-else-if="item.prop==='create_time'">
          <!--            //date 为非格式化的时间数据-->
          {{days(parseInt(row.create_time)*1000).format('YYYY-MM-DD')}}
  </template>

    对这里自定义列有疑问的小伙伴可以先去看下官方文档

    Table 表格 | Element Plus (element-plus.org)

---

     最终效果 

 

---

还有更多的格式要求等可以参考这篇文章哦 很详细

参考文章： dayjs-入门及常用方法 - 掘金 (juejin.cn)