【vue】使用自定义指令实现时间戳格式化

时间戳的显示需求

在开发中，大多数情况下从服务器请求 获取到的都是时间戳。

我们需要 将时间戳转换成具体格式化的时间 来展示。

在Vue2中可以 通过过滤器（filter） 来完成；

在Vue3中可以通过 计算属性（computed） 或者 自定义方法（methods） 来完成；

其实我们还可以通过一个 自定义的指令 来完成。

下面直接贴出部分代码参考：

这里实现一个可以自动对时间戳 格式化的指令v-format-time。

import registerFormatTime from './format-time';

export default function registerDirectives(app) {
  registerFormatTime(app);
}

上面是一个类似工具函数，可以引入其它自定义指令的封装，在main.js中我们只需要 调用这个函数 并且 传入app实例 即可。

import dayjs from 'dayjs';

export default function(app) {
  app.directive("format-time", {
    created(el, bindings) {
      bindings.formatString = "YYYY-MM-DD HH:mm:ss";
      if (bindings.value) {
        bindings.formatString = bindings.value;
      }
    },
    mounted(el, bindings) {
      const textContent = el.textContent;
      let timestamp = parseInt(textContent);
      if (textContent.length === 10) {
        timestamp = timestamp * 1000
      }
      el.textContent = dayjs(timestamp).format(bindings.formatString);
    }
  })
}

在App.vue文件中测试：

<template>
  <h2 v-format-time="'YYYY/MM/DD'">{{timestamp}}</h2>
</template>

<script>
  export default {
    setup() {
      const timestamp = 1624452193;

      return {
        timestamp
      }
    }
  }
</script>

补充：指令的参数和修饰符

 <button v-self:info.aaaa.bbbb="'ABC'" ></button>

• info是参数的名称
• aaa-bbb是修饰符的名称
• ABC是传入参数的具体的值

以上都可以在生命周期函数中获取相应的数据。

注意：在Vue中， 代码的复用和抽象主要还是通过组件； 在某些情况下 ，对DOM元素进行底层操作就需要使用到自定义指令。