您的当前位置:首页>全部文章>文章详情

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

发表于:2024-06-23 16:00:27浏览:123次TAG: #Vue

为什么还要用自定义指令来实现时间戳转换呢,用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)
}

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

腾讯云采购季云服务器一折促销