Vue手动获取input焦点

项目里面有这样一个需求，

image.png
点击底部“发送验证码”的时候，弹窗图形验证码，并且图形验证码里的input自动获取焦点，很合理的需求，在iOS里面直接 [textField becomeFirstResponder]就可以了。
在项目里试了 focus(),autoFocus,都达不到效果，对vue也只是简单的了解，还是查阅文档吧
vue.js官方文档里有这样一个操作 自定义指令，柳暗花明又一村啊，嘿嘿，
大家可以跟着官方文档自定义指令或者跟着小编一起解决问题。
代码如下，首先要定义一个自定义的指令:

directives: {
    focus: {
      inserted: function(el, { value }) {
        if (value) {
          el.focus();
        }
      }
    }
  },
//定义指令是跟 mounted同一级的
  mounted() {
    document.title = "绑定房屋";
  },

在input标签中,绑定一个 picFocusStatus 状态

 <input
            class="input pic-input"
            type="text"
            placeholder="输入图形验证码"
            maxlength="4"
            v-model="code"
            v-focus="picFocusStatus"
          >

data中添加 picFocusStatus，给默认值 true或者false，也就是初始的焦点状态，在其它的诸如点击事件中修改 picFocusStatus的值就ok了。

      this.picFocusStatus = true;