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()
})