【Vue——自定义指令】Vue3的日期时间格式化

毛毛三由

已于 2022-12-29 10:28:18 修改

阅读量2.7k

点赞数 2

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-11-07 16:34:13 首次发布

本文链接：https://blog.csdn.net/wzyleix97/article/details/127733702

版权

Vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

日期时间格式化

demo目录

在这里插入图片描述

具体实现

使用插件

dayjs
npm install dayjs -d

//formate-time.js
import dayjs from 'dayjs'
export default function(app){
    let formatString = 'YYYY-MM-DD HH:mm:ss'
    app.directive('format-time',{
        created(el,bindings) {
            if(bindings.value){
                formatString = bindings.value
            }
        },
        mounted(el) {
            const textContent = el.textContent
            let timeStamp = parseInt(textContent)
            if(textContent.length===10){
                timeStamp = timeStamp * 1000
            }
            el.textContent = dayjs(timeStamp).format(formatString)
        },  
    })
}

//index.js
// eslint-disable-next-line no-unused-vars
import resgisterFomatTime from './formate-time';

export default function registerDirectives(app){
    resgisterFomatTime(app)
}

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import registerDirectives from './directives'
// 修改后
const app = createApp(App);
registerDirectives(app)
app.mount('#app')
// 修改前
// createApp(App).mount('#app')

//App.vue
<template>
  <h2 v-format-time="'YYYY/MM/DD'">{{timeStamp}}</h2>
  <!-- <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/> -->
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    HelloWorld
  },
  setup() {
    const timeStamp = 1667809876417
    return {
      timeStamp
    }
  }
}
</script>

实现效果

在这里插入图片描述

小问题

如果在同一vue文件中，多次使用的自定义指令，并且给formatString赋值，那么同一文件中，其他使用的地方也会套用格式。

解决呢

//formate-time.js
import dayjs from 'dayjs'
export default function(app){
    //let formatString = 'YYYY-MM-DD HH:mm:ss'换位置
    app.directive('format-time',{
        created(el,bindings) {
        //修改后
        	bindings.formatString = 'YYYY-MM-DD HH:mm:ss'
            if(bindings.value){
                formatString = bindings.value
            }
        },
        mounted(el) {
            const textContent = el.textContent
            let timeStamp = parseInt(textContent)
            if(textContent.length===10){
                timeStamp = timeStamp * 1000
            }
            el.textContent = dayjs(timeStamp).format(bindings.formatString)
            //这里就可以在bindings中拿到formatString
        },  
    })
}