Utiliser le composant de recherche pour afficher sur le clavier

Cette fois je vais vous apporter les précautions pour faire fonctionner le composant de recherche à afficher sur le clavier Ce qui suit est un cas pratique, jetons un coup d'œil.

Le code est le suivant :

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

Solution :

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 des actions, afin que le bouton Rechercher apparaissent sur le clavier.

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

Lorsque vous cliquez sur Rechercher sur le clavier mobile, la page s'actualise, ajoutez donc une cible au formulaire. La cible spécifie où ouvrir l'URL de l'action. Ensuite, mettez une iframe masquée et nommez la valeur de la cible du formulaire, de sorte que. sur la page actuelle Afficher le contenu recherché

Ce qui suit est la deuxième méthode :

<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 return false à l'événement onsubmit 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 le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

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!