指令参数与修饰符

指令参数和修饰符使自定义指令更加灵活，通过 binding.arg 和 binding.modifiers 可动态调整指令行为。

指令参数

参数通过冒号 : 传递给指令，存储在 binding.arg 中。

<template>
  <div v-pin:top="true">固定在顶部</div>
  <div v-pin:bottom="true">固定在底部</div>
</template>

Vue.directive('pin', {
  bind(el, binding) {
    const position = binding.arg // 'top' 或 'bottom'
    if (binding.value) {
      el.style.position = 'fixed'
      el.style[position] = '0'
    }
  }
})

参数可以是动态值，使用 v-bind 语法：v-pin:[position]="true"。

动态参数

<template>
  <div v-pin:[direction]="isActive">动态定位</div>
</template>

<script>
export default {
  data() {
    return {
      direction: 'left',
      isActive: true
    }
  }
}
</script>

Vue.directive('pin', {
  update(el, binding) {
    const dir = binding.arg // 动态获取 direction 的值
    el.style.position = binding.value ? 'fixed' : ''
    el.style[dir] = binding.value ? '0' : ''
  }
})

修饰符

修饰符通过点 . 传递给指令，存储在 binding.modifiers 对象中，值为布尔值。

<template>
  <input v-format.number.trim="value" />
  <button v-permission.admin.disabled="true">管理按钮</button>
</template>

Vue.directive('format', {
  update(el, binding) {
    let val = binding.value

    // 检查是否使用了 number 修饰符
    if (binding.modifiers.number) {
      val = parseFloat(val)
    }

    // 检查是否使用了 trim 修饰符
    if (binding.modifiers.trim) {
      val = String(val).trim()
    }

    el.value = val
  }
})

binding.modifiers 的结构：

// v-format.number.trim
{
  number: true,
  trim: true
}

参数与修饰符组合

参数和修饰符可同时使用，构建高度可配置的指令。

<input v-validate:min="6" v-validate:password.number.required="password" />

Vue.directive('validate', {
  bind(el, binding) {
    const rule = binding.arg        // 'min' 或 'password'
    const modifiers = binding.modifiers // { number: true, required: true }
    const limit = binding.value     // 6 或 password 值

    el.dataset.validateRule = rule
    if (modifiers.required) {
      el.setAttribute('required', 'required')
    }
    if (modifiers.number) {
      el.setAttribute('type', 'number')
    }
    if (rule === 'min') {
      el.setAttribute('minlength', limit)
    }
  }
})

实际应用：权限指令

<button v-permission:admin>删除</button>
<button v-permission:user>编辑</button>

Vue.directive('permission', {
  bind(el, binding) {
    const requiredRole = binding.arg     // 'admin' 或 'user'
    const userRoles = store.getters.roles // 从 store 获取用户角色

    if (!userRoles.includes(requiredRole)) {
      // 使用修饰符控制行为：disabled 禁用，remove 移除元素
      if (binding.modifiers.disabled) {
        el.disabled = true
      } else if (binding.modifiers.remove) {
        el.parentNode && el.parentNode.removeChild(el)
      } else {
        el.style.display = 'none' // 默认隐藏
      }
    }
  }
})

要点总结

• 参数通过 : 传递，存储在 binding.arg，支持动态参数 v-directive:[arg]
• 修饰符通过 . 传递，存储在 binding.modifiers，是布尔值组成的对象
• 参数和修饰符可组合使用，使指令高度可配置
• binding.modifiers 的键名为修饰符名，值恒为 true

存放路径：articles/VUE/进阶/自定义指令与渲染函数/指令参数与修饰符.md