focus的使用

focus意为点击元素后设置的样式，只用于可以获取焦点的元素，比如表单元素，那么非表单元素是否也可以使用呢？答案是可以的。

关键点在于如何让普通元素获取到焦点，这里有一个属性是tabindex, 在你需要的元素上加上改属性 tabindex="0"或是其他数字都可以，一般是0或是1，此时该元素就可以使用focus进行样式设置了，大大加强了交互效果。

下面是使用案例：

表单元素：

<el-input autofocus ref="inputRef" class="myInput" v-model="myName" />

<style>

.myInput {

        &:focus {

                border-color: red;

        }

}

</style>

普通元素：

<div tabindex="0" class="myDiv">点我</div>

<style>

.myDiv{

        &:focus {

                color: red;

        }

}

</style>