How can the search component of mint-ui display the search button on the keyboard?

What I bring to you this time is how the search component of mint-ui can display the search button on the keyboard. This article will give you a good analysis.

<form action="" target="frameFile">
 <mt-search v-model="value" placeholder="请输入关键字" @keyup.native.enter="search(value)">
 <p v-infinite-scroll="loadMore()" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
  <ListItem :lists="lists"></ListItem>
  <p class="loading-text" v-if="(loadingTextBtn==true)"><span v-text="loadingText"></span><mt-spinner v-if="(loadingComplete==false)" type="snake" :size="10"></mt-spinner></p>
 </p>
 </mt-search>
 <iframe name=&#39;frameFile&#39; style="display: none;"></iframe>
</form>

The search component input of mint-ui is also type="search" by default, but it also needs to be wrapped with a set of form tags in the outer layer and with actions, so that search will appear on the keyboard. button.

The above is method one:

When you click search on the mobile keyboard, the page will refresh, so add a target to the form, and the target specifies where to open the action URL, and then put a hidden iframe, named form's target value, so that the search content is displayed on the current page

<form action="" onsubmit="return false;">
  <mt-search v-model="value" placeholder="请输入关键字" @keyup.native.enter="search(value)">
   <p v-infinite-scroll="loadMore()" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
   <ListItem :lists="lists"></ListItem>
   <p class="loading-text" v-if="(loadingTextBtn==true)"><span v-text="loadingText"></span><mt-spinner v-if="(loadingComplete==false)" type="snake" :size="10"></mt-spinner></p>
   </p>
  </mt-search>
</form>

Here directly write return to the onsubmit event If false, submission is prohibited, and the search list page can also be displayed on the current page.

I believe you have mastered the method after reading the above introduction. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to use JS to switch between hiding and showing icons at the same time

How to divide components in Vue.js

How to use static methods, properties and instance properties of classes in ES6 javascript

The above is the detailed content of How can the search component of mint-ui display the search button on the keyboard?. For more information, please follow other related articles on the PHP Chinese website!