返回 导航

Vue.js

hangge.com

Vue.js - 自定义指令详解2（自定义指令的参数和修饰符、自定义时间格式化指令）

作者：hangge | 2026-08-27 09:07
    在 Vue.js 3 中，部分内置指令支持接收参数、修饰符和值，例如 v-on:click.once="doThis"。其中，click 为参数、once 为修饰符、doThis 为值。同样的，自定义指令也支持接收参数、修饰符和值，下面我将通过样例进行演示。

二、自定义指令的参数和修饰符

1，基本用法

（1）下面是一个简单的关于自定义指令的参数和修饰符样例：
  • 首先在组件的 directives 选项中自定义一个 v-hangge 局部指令。 
  • 接着，在 template 中的 <button> 元素上使用该指令，并向指令传递参数("info"）、修饰符(".aa"和".bb")和值({name:'hangge'，age:88}）。 
  • 最后，在指令的任意生命周期中，可以通过 bindings 参数获取到对应的参数、修饰符和值。
<template>
    <!-- 2.给指令传递参数，修饰符和值 -->
    <button v-hangge:info.aaa.bbb="{ name: 'hangge', age: 88 }">指令的参数和修饰符</button>
</template>
<script>
export default {
    directives: {
        hangge: { // 1.自定义 v-hangge 局部指令
            inserted(el, binding, vnode) {
                console.log(binding);
            }
        }
    }
}
</script>

（2）使用浏览器访问，通过控制台可以看到闯入的参数、修饰符以及具体值，其中：
  • 在 binding.arg 中，可以获取传入的参数。
  • 在 binding.modifiers 中，可以获取传入的修饰符。
  • 在 binding.value 中，可以获取传入的具体的值。

2，自定义时间格式化指令

（1）在前端开发中，我们经常需要将时间戳格式化为具体的时间格式，以便展示。Vue.js 2 可以通过过滤器来实现，而 Vue.js 3 可以通过计算属性或自定义方法来实现。此外，还可通过自定义指令来实现该功能。

（2）下面演示如何在 Vue.js 3 中通过自定义指令来实现时间格式化。这里我们首先安装 dayjs 库，方便我们自定义指令中将将 timestamp 时间戳转成指定格式。
npm install dayjs

（3）接着在项目的 src 目录下新建 directives 文件夹，然后在该文件夹下分别新建 format-time.js 和 index.js 文件。

（4）其中 format-time.js 文件的代码如下：
  • 首先，在该文件中导出一个匿名函数，该函数需要接收 App 实例。
  • 接着，调用 app.directive 函数定义全局指令 v-format-time，定义指令名时不需要以“v-”为前缀。在指令的 created 生命周期函数中指定时间戳的格式，如果在使用指令时有传递 value 值，那么就使用 value 中指定的格式，否则使用默认格式。 
  • 然后，在指令的 mounted 生命周期函数中获取指定元素的时间戳内容，并统一转换为 13 位毫秒单位。
  • 最后，使用第三方 dayis 库的 format 函数格式化时间戳。
import dayjs from "dayjs"; // 需要 npm install dayjs
// 1.该函数接收app实例，调用app.directive来定义全局指令
export default function (app) {
  app.directive("format-time", {
    created(el, bindings) {
      // 1.初始化默认的格式
      bindings.formatString = "YYYY-MM-DD HH:mm:ss";
      if (bindings.value) {
        bindings.formatString = bindings.value; // 2.使用用户指定的格式
      }
    },
    mounted(el, bindings) {
      const textContent = el.textContent; // 3.拿到某个元素的内容
      let timestamp = parseInt(textContent);
      if (textContent.length === 10) {
        timestamp = timestamp * 1000; // 4.如时间戳是秒单位，转成毫秒单位
      }
      // 5.使用dayjs库，将timestamp时间戳转成formatString指定的格式化
      el.textContent = dayjs(timestamp).format(bindings.formatString);
    },
  });
}

（5）index.js 文件则用来统一管理所有全局注册的指令，具体代码如下。
提示：在实际开发中，在项目中可能需要自定义很多全局指令。为了代码的规范性和易于管理， 我们通常会使用一个 index.js 文件统一管理所有全局注册的指令。
import registerFormatTime from './format-time';
export default function registerDirectives(app) {
  // 1.注册格式化时间戳的指令
  registerFormatTime(app);
}

（6）最后修改 main.js 程序入口文件，导入 registerFormatTime 函数，接着调用该函数并传递 App 实例，注册所有的全局指令。 
import registerDirectives from './directives/index.js'
let app = createApp(App)
registerDirectives(app)
app.use(store)
app.use(router)
app.mount('#app')

（7）创建一个组件测试一下，首先定义一个 timestamp 时间戳变量，并将其绑定到模板中的 <h4> 元素上。为了格式化时间戳，我们使用全局注册的 v-format-time 指令，通过为指令赋值 value 来指定时间的格式。 
<template>
    <div>
        <h4 v-format-time="'YYYY/MM/DD'">{{ timestamp }}</h4>
    </div>
</template>
<script setup>
const timestamp = 1795810167;
</script>
评论

全部评论（0）

回到顶部