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

    <el-input v-model="i.vRoleName" v-if='i.isEdit' v-on:blur="i.isEdit=false"

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

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

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

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

</li>
 

directives:{

    focus: {

        inserted: 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();

        }

    }

}
 

在Vue中要給input設定焦點，需要註冊自定義指令。

由於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>

 

修改指令：相容ie不支援classList的問題

  directives: {
    focus: {
      inserted: 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 (!("classList" in document.documentElement)) {
          Object.defineProperty(HTMLElement.prototype, "classList", {
            get: function() {
              var self = this;
              function update(fn) {
                return function(value) {
                  var classes = self.className.split(/\s+/g),
                    index = classes.indexOf(value);

                  fn(classes, index, value);
                  self.className = classes.join(" ");
                };
              }

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

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

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

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

                item: function(i) {
                  return self.className.split(/\s+/g)[i] || null;
                }
              };
            }
          });
        }
        if (el.classList.contains(value.cls) && value.foc)
          el.getElementsByTagName(value.tag)[0].focus();
      }
    }
  }

補充說明：

在實際用focus指令的過程中，需要給元素新增blur事件： v-on:blur="focus.count=false"。失去焦點後一定要把focus指令對應的變數置為false，否則會導致一些不可控的bug。