<input type="text"  id="username">

聚焦:

document.getElementById('username').focus()

失去焦点:

document.getElementById('username').blur(); 

vue自定义事件:指令名称不需要加 v- 前缀,默认是自动加上前缀的,使用指令的时候一定要加上前缀
情形1:全局自定义指令

<input type="text" v-focus>
</div>
<script>
    Vue.directive("focus",{
        inserted:function(el){
            console.log(el)  //el为事件对象,这里为input框
            el.focus()
        }
    })
    var app = new Vue({
        el: '#app',
        data:{
        }
    })
</script>

情形2:组件内自定义指令

 <div id="app">
     <input type="text" v-focus>
 </div>
 <script>
     var app = new Vue({
         el: '#app',
         data:{
             
         },
         directives:{
             // (指令名称不需要加 v- 前缀,默认是自动加上前缀的,使用指令的时候一定要加上前缀)
             focus:{
                 inserted:function(el){
                     el.focus()
                 }
             }
         }
     })
 </script>
Logo

前往低代码交流专区

更多推荐