vue项目实战系列十：自定义指令

1. input自定义指令:

①. type="number"属性限制数字不理想,不大喜欢右侧三角.

②. 方案:
    a. 监听input事件再加上正则过滤:
       (1). <el-input onkeyup="this.value=this.value.replace(/[^0-9]+/,'');" />
       (2). 但是会有回退现象.

    b. 用vue的自定义指令时可以直接获取dom,消除了回退.

(1). 自定义事件:

const inputNumber = Vue.directive('number', {
  // 注册一个自定义指令 v-number
  inserted: function(el, binding, vnode) {
    // 聚焦元素
    const node = el.tagName === 'INPUT' ? el : el.querySelector('input')
    node.oninput = function() {
      node.value = node.value.replace(/[^0-9]+/, '')
    }
  }
})

---

2. input focus自定义指令:

this.$nextTick(() => {
this.$refs.inputRef.focus()
})


<el-input :autofocus="true" />

都只有在第一次点击按钮的时候可以让Input获得焦点，在不刷新页面的情况下，第二次以后的按钮点击都不会让Input获得焦点。


是存才一个全局变量，当我们第一次使Input获得焦点以后改变了这个预设变量的值，在Input失去焦点的时候并没有将这个值重置，所以导致了后面的问题。

Vue本身提供了自定义指令的方法

// 注册一个全局自定义指令 v-focus
Vue.directive(‘focus’, function (el) {
el.focus()
})
这样使我们在组件中可以自用的调用v-focus方法，给他绑定定义布尔变量来控制元素是否获得焦点
但是这里要注意的是组件本身在页面中渲染成了一个div元素
所以我们要在被绑定为v-focus的同时
在自定义指令中获取组件下通过querySelector()方法获取input元素

<el-input
v-model.trim=“searchFor”
@blur=“blurSearchFor”
v-focus=“blurFocus”>

Vue.directive(‘focus’, function (el) {
el.querySelector(‘input’).focus()
})