vue中弹窗input框聚焦_vue input 输入框聚焦

最近在用element ，需求是 在表格里嵌套输入框：

点击之前.jpg

点击显示：

点击之后显示输入框.jpg

失焦隐藏：

失焦隐藏.jpg

有个问题，就是输入框显示后不会自动focus，这就会导致输入框显示之后在点击别处不会自动隐藏，因为不会触发blur事件，要解决这一问题只能在显示输入框是就触发focus，于是百度，

感谢 https://www.jianshu.com/p/8b9d65096566 这篇文章。

size="mini" :class="'centerInput '+scope.row.goods_id" :id="forId(scope)">

checkWriteDiscount(){

scope.row.focusState = false

}

directives: { //自定义的v-focus指令

focus: {

inserted: function (el, {value}) {

if (value) {

el.focus();

}

}

}

}

然而对我来说并没有用，后来发现问题出在我用的是el-input组件，element会在input外面套上一层，然后。。加上JQ。。就是在el往下找一下input并让它聚焦(或者直接用原生js也行，因为我这个是混用，之前就引用的jq，所以为了方便直接用了jq)

directives: { //自定义的v-focus指令

focus: {

inserted: function (el, {value}) {

if (value) {

$(el).find("input").focus();//聚焦输入框

// el.focus();

}

}

}

}