时间戳的自定义指令实现

时间戳的自定义指令实现

format-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, bindings) {
      console.log("format mounted");
      const textContent = el.textContent;
      let timestamp = parseInt(textContent);
      if (textContent.length === 10) {
        timestamp = timestamp * 1000
      }
      el.textContent = dayjs(timestamp).format(formatString);
    }
  })
}

index.js 文件代码实现

import registerFormatTime from './format-time';

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

main.js 文件中代码实现

import { createApp } from 'vue'
import App from './04_teleport内置组件/App.vue'
import registerDirectives from './directives'
import pluginObject from './plugins/plugins_object'
import pluginFunction from './plugins/plugins_function'

const app = createApp(App);

registerDirectives(app);

app.use(pluginObject);
app.use(pluginFunction);

// app.directive("focus", {
//   mounted(el, bindings, vnode, preVnode) {
//     console.log("focus mounted");
//     el.focus();
//   }
// })

app.mount('#app');