<
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>
补充说明：
在实际用focus指令的过程中，需要给元素添加blur事件：
v-on:blur="focus.count=false"。失去焦点后一定要把focus指令对应的变量置为false，否则会导致一些不可控的bug。