时间戳的自定义指令实现_if (textcontent1 in user.keys()) and (textcontent2-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40287084/article/details/118442100

本文档展示了如何在Vue应用中创建一个名为`format-time`的自定义指令，用于将时间戳转换为指定格式的日期时间字符串。在`format-time.js`文件中，导入了`dayjs`库并定义了指令逻辑，包括在创建和挂载阶段的处理。在`index.js`中注册了这个指令，并在`main.js`中应用到Vue实例上，使得时间戳文本节点可以被正确格式化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

时间戳的自定义指令实现

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');