focus

提示

不要点击该页面查看，点击【点击查看示例】查看示例效果

基础语法 - v-focus:选择器.修饰符

选择器

• 对于类选择器的 . 使用 -v- 代替

修饰符

• autoFind 自动查找元素聚焦
• global 开启全局匹配（配合选择器可用）

简单使用

demo1

<input class="demo-input" type="text" v-focus placeholder="光标将定位在这里" />

内部自动聚焦

提示

将指令放在非 input 或者 textarea 上，配合 autoFind 修饰符，将自动寻找内部的首个 input 或者 textarea 元素

demo2

<div class="demo-box" v-focus.autoFind>
  <div class="demo-desc">盒子内部 -- 上</div>
  <input class="demo-input" type="text" placeholder="光标将定位在这里" />
  <div class="demo-desc">盒子内部 -- 下</div>
</div>

精准聚焦

提示

配合选择器以及 global 修饰符，将精准查找该元素并使其聚焦，没有 global 将会仅在绑定元素内搜索

demo3

<input class="demo-input" id="focus-demo1" type="text" placeholder="光标将定位在这里" />
<div class="demo-fill-box" v-focus:#focus-demo1.global>
  <div class="demo-desc">盒子内部</div>
</div>