Vue3自定义指令时间格式化案例(4)

为什么还要用自定义指令来实现时间戳转换呢，用js插件写就可以了，通过自定义指令可以快速的优点是什么？
因为每次使用不用再单独引入了，方便快速实现功能，下面是示例

// App.vue
<template>
  <div class="app">
    <h2 v-ftime="'YYYY/MM/DD'">{{ timestamp }}</h2>
    <h2 v-ftime>{{ 1551111166666 }}</h2>
  </div>
</template>  
<script setup>
  const timestamp = 1231355453
</script>
<style scoped>
</style>

这里我们用到了dayjs，所以要先安装dayjs

npm install dayjs

实现的js文件

//directives/ftime.js
import dayjs from 'dayjs'

export default function directiveFtime(app){
  app.directive("ftime",{
    mounted(el,bindings){
      // 1.获取时间，并且转化成毫秒
      let timestamp = el.textContent
      if(timestamp.length === 10){
        timestamp = timestamp * 1000
      }

      timestamp = Number(timestamp)

      // 2.获取传入的参数
      let value = bindings.value;
      if(!value){
        value = "YYYY-MM-DD HH:mm:ss"
      }

      // 3.对世界进行格式化
      const formatTime = dayjs(timestamp).format(value)
      el.textContent = formatTime
    }
  })
}

需要在index.js中引入

// directives/index.js
import directiveFtime from "./ftime"

export default function directives(app) {
  directiveFtime(app)
}

感谢大家观看，我们下次见