vue2-vant component library-van-search get focus method

vue2-vant component library-van-search get focus method

Scenes:

1. When entering the search page, the search input box automatically gets the focus;
2. Click the history record, the search input box automatically gets the focus

Ideas:

1. Obtain the dom element of the input box by ref in the van-search component tag
2. When entering the page or clicking on the history record, the input box input triggers the focus event – ​​focus

Solution process:

1. bind ref
   <van-search v-model.trim="keyword" ref="name" @search="searchFn" />

2. Get the focus when entering the page
created() {this.$refs.name.querySelector('input).focus()}

Get the focus when clicking on the history record
<van-tag v-for="(item, index) in history" :key="index" @click="searchHistory(item)"> { { item }} </van-tag>
searchHistory(){ this.$refs.name.querySelector('input).focus()}

Note: The input dom element cannot be obtained directly through this.$refs.name.focus, and the input element needs to be found through the querySelector() method.