在Vue中要给input设置焦点,需要注册自定义指令。

Vue.directive('focus', function (el, option) {
        var defClass = 'el-input', defTag = 'input';
        var value = option.value || true;
        if (typeof value === 'boolean')
            value = { cls: defClass, tag: defTag, foc: value };
        else
            value = { cls: value.cls || defClass, tag: value.tag || defTag, foc: value.foc || false };
        if (el.classList.contains(value.cls) && value.foc)
            el.getElementsByTagName(value.tag)[0].focus();
});

由于ElementUI中的el-input是一个自定义组件,并非input元素,所以需要传入组件的class和tag名称来定位组件内的原生input,并调用input的focus方法来获得焦点。

使用的时候,分两种情况

页面中只有一个组件用到focus指令
<el-input v-focus="true"></el-input>
页面中有多个组件用到focus指令

此时,需要传入class和tag来定位具体的元素

<el-input-number v-focus="{ cls: 'el-input-number',tag: 'input', foc: focus.count }"  v-on:blur="focus.count=false"></el-input-number>

补充说明:

在实际用focus指令的过程中,需要给元素添加blur事件: v-on:blur="focus.count=false"。失去焦点后一定要把focus指令对应的变量置为false,否则会导致一些不可控的bug。

参考资料:

[1] : https://cn.vuejs.org/v2/guide/custom-directive.html

Logo

前往低代码交流专区

更多推荐