Vue學習筆記之獲取光標

如下展示了兩種獲取光標的形式 focus()：

1、頁面加載完成之后，自動獲取光標到 input輸入框。

       思路：

    directives自定義函數 
    inserted在dom樹繪制后調用

2、通過點擊button 出發事件，使光標定位到input 輸入框。

       思路：

              $refs 操作DOM元素

<template>
  <div class="homediv">
  <van-nav-bar title="標題" />
  點擊獲得光標<input type="text" ref="inpclick">
  <button @click="getgb" ref="getgb">get</button><br/>
   加載完成獲得光標<input type="text"  v-focus="true">
  </div>
</template>

<script>
export default {
    methods:{
      //點擊獲得光標
      getgb(){
        console.log(this.$refs);
        this.$refs.inpclick.focus()
      }},
      //頁面加載完成之后，自動獲得光標   
     directives: {    
        focus: {           
            inserted: function (el, {value}) {             
                console.log(el,{value})            
                if (value) {                   
                    el.focus();            
                }          
            }      
        }  
    }
}
</script>

<style>
     .homediv .van-nav-bar__content{
     background-color:rgb(55, 140, 236);
     color:white ;
}
 
</style>