Comment le composant de recherche de mint-ui peut-il afficher le bouton de recherche sur le clavier ?

Ce que je vous apporte cette fois, c'est comment le composant de recherche de mint-ui peut afficher le bouton recherche sur le clavier. Cet article vous donnera une analyse détaillée.

<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>

L'entrée du composant de recherche de mint-ui est également de type="search" par défaut, mais elle doit également être enveloppée avec un ensemble de balises de formulaire dans la couche externe et avec action, qui apparaîtra sur le clavier. Un bouton de recherche apparaît.

Ce qui précède est la première méthode :

Lorsque vous cliquez sur Rechercher sur le clavier du mobile, la page s'actualise, ajoutez donc une cible au formulaire, et la cible spécifie où ouvrir l'action URL, puis placez-la dans une iframe cachée, nommée la valeur cible du formulaire, afin que le contenu recherché soit affiché sur la page actuelle

<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>

Ici, écrivez directement à l'événement onsubmit Entrez return false pour désactiver la soumission, et la page de liste de recherche peut également être affichée sur la page actuelle.

Je pense que vous maîtrisez la méthode après avoir lu l'introduction ci-dessus. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment utiliser JS pour basculer entre le masquage et l'affichage des icônes en même temps

Comment diviser les composants en Vue.js

Comment utiliser les méthodes statiques, les attributs et les attributs d'instance des classes en javascript ES6

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!