當我們要讓頁面加載后自動放焦于輸入框時,就需要用到Vue的Input自動獲取焦點指令——autofocus。
<template> <div> <input type="text" v-autofocus> </div> </template> <script> import Vue from 'vue'; Vue.directive('autofocus', { inserted: function (el) { el.focus(); } }); </script>
在上面的代碼中,我們先在模板中添加了一個<input>元素,并在這個元素上綁定了一個自定義指令v-autofocus。然后我們在腳本塊中引入了Vue,并通過Vue.directive創建了一個名為autofocus的自定義指令,指定了它的inserted鉤子函數,用于在元素插入到DOM樹中時使元素自動獲取焦點。其中,el參數代表了指令作用的元素,也就是我們綁定這個指令的那個輸入框。
這樣,每次頁面加載完畢后,該輸入框就會自動獲取焦點,并且我們可以在其他元素上同樣地使用v-autofocus指令以實現自動獲取焦點的功能。