v-focus给input设置焦点

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

main.js中

Vue.directive('focus', function (el, option) {
  var defClass = 'el-input', defTag = 'input';
  var value = option.value || true;
  if (typeof value === 'boolean')//页面中只有一个组件用到v-focus指令 v-focus='true'
    value = { cls: defClass, tag: defTag, foc: value };
  else//页面有多个组件用到v-focus指令
    value = { cls: value.cls || defClass, tag: value.tag || defTag, foc: value.foc || false };
  if (el.classList.contains(value.cls) && value.foc)//当页面中包含defclass，且foc属性为true时
    el.getElementsByTagName(value.tag)[0].focus();//设置tag的第一个元素聚焦
});

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

页面中只有一个组件用到focus指令

<el-input v-focus="true"></el-input>

页面中有多个组件用到focus指令,需要传入class和tag来定位具体的元素

<el-input v-focus="{cls: 'el-input',tag: 'input', foc:focususername}"  v-on:blur="focususername=false" placeholder="请输入用户名"></el-input>
<el-input v-focus="{cls: 'el-input',tag: 'input', foc:focususerpwd}"  v-on:blur="focususerpwd=false" placeholder="请输入密码"></el-input>

export default {
  name: "Login",
  data() {
    return {
      focususername: true,
      focususerpwd: true,
      }; 
  },
}