vue input command Get focus

<li v-for="(i,k) in roleList" :key="k" :class="{'active':isActive==k}">

    <el-input v-model="" v-if='' v-on:blur="=false"

        v-focus="{ cls: 'el-input',tag: 'input', foc:  }" ></el-input>

    <span @click="chooseUser(i,k)" v-else>{{}}</span>

    <i class="el-icon-edit" @click="=true"></i>

    <i class="el-icon-delete"></i>

</li>

directives:{

    focus: {

        inserted: function (el,option) {

            var defClass = 'el-input', defTag = 'input';

            var value =  || true;

            if (typeof value === 'boolean')

                value = { cls: defClass, tag: defTag, foc: value };

            else

                value = { cls:  || defClass, tag:  || defTag, foc:  || false };

            if (() && )

                ()[0].focus();

        }

    }

}

 

To set the focus for input in Vue, you need to register a custom instruction.

 

Since the el-input in ElementUI is a custom component and is not an input element, you need to pass in the component's class and tag names to locate the native input in the component, and call the input's focus method to obtain focus.

When using it, there are two situations:

Only one component in the page uses the focus command

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

There are multiple components on the page that use the focus command

At this time, you need to pass in class and tag to locate specific elements

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

Modify directive: Compatible ie does not support classList

  directives: {
    focus: {
      inserted: function(el, option) {
        var defClass = "el-input",
          defTag = "input";
        var value =  || true;
        if (typeof value === "boolean")
          value = { cls: defClass, tag: defTag, foc: value };
        else
          value = {
            cls:  || defClass,
            tag:  || defTag,
            foc:  || false
          };
        if (!("classList" in )) {
          (, "classList", {
            get: function() {
              var self = this;
              function update(fn) {
                return function(value) {
                  var classes = (/\s+/g),
                    index = (value);

                  fn(classes, index, value);
                   = (" ");
                };
              }

              return {
                add: update(function(classes, index, value) {
                  if (!~index) (value);
                }),

                remove: update(function(classes, index) {
                  if (~index) (index, 1);
                }),

                toggle: update(function(classes, index, value) {
                  if (~index) (index, 1);
                  else (value);
                }),

                contains: function(value) {
                  return !!~(/\s+/g).indexOf(value);
                },

                item: function(i) {
                  return (/\s+/g)[i] || null;
                }
              };
            }
          });
        }
        if (() && )
          ()[0].focus();
      }
    }
  }

 

 

 

Additional Notes:

In the process of actually using the focus directive, you need to add a blur event to the element:v-on:blur="=false". After losing focus, be sure to set the variable corresponding to the focus instruction to false, otherwise some uncontrollable bugs will occur.