vue directive(自定义指令)的使用

除了v-model等,有时需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令, 使用场景如：输入框聚焦，添加数字角标等

1. 全局自定义指令

// 首先在main.js中注册:
Vue.directive('focus', {     //第一个参数是自定义指令的名称,使用时就是v-名称
  // inserted:当被绑定的元素插入到 DOM 中时调用
  inserted: function (val) {
    console.log(val)  //这里打印的就是使用指令的元素标签  <input type="text">
    // 聚焦元素
    val.focus()    //使用input原生的聚焦方法
  }
})

// 然后在组件中使用:
<input type="text" v-focus>

2. 局部注册指令

directives: {      //在需要使用的组件内注册,与data平级
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

3. 自定义指令的其他参数配置

directives: {      //在需要使用的组件内注册,与data平级
  focus: {
 // 指令的定义
 // binding是一个对象,包含:name(指令名),value(指令绑定值)等属性
 // el指的是指令所绑定的元素，同上面的案例,是个变量,可以用来直接操作 DOM。
    inserted: function (el,binding) {        
     el.innerHTML = binding.name     
    }
  }
}

4. 动态指令参数

// 假如要创建一个自定义指令，用来通过固定布局将元素固定在页面上。也就是定位到某个位置,可以通过指令传参:
<div>
  <p v-pin="200">固定上方位置</p>
</div>
Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    el.style.position = 'fixed'
    el.style.top = binding.value + 'px'
  }
})

// 如果现在需要其他方向也固定一个位置,那可以通过动态指令参数完成:

<div >
  <p v-pin:[direction]="200">左边固定</p>
</div>
Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    el.style.position = 'fixed'
// binding.arg就是传给指令的参数,例如本例中的direction,因为是变量,所以用了[],类似于插槽中的动态插槽名
    var s = (binding.arg == 'left' ? 'left' : 'top')   
    el.style[s] = binding.value + 'px'
  }
})
data: function () {
    return {
      direction: 'left'     //通过这里动态修改指令
    }
  }

5. 对象字面量

// 如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法的 JavaScript 表达式。

<div v-demo="{ color: 'white', text: 'hello!' }"></div>
Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})

更多详细配置属性查看官网: vue指令