Bedienen Sie die Suchkomponente, um sie auf der Tastatur anzuzeigen

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die Bedienung der Suchkomponente vorstellen, die auf der Tastatur angezeigt werden sollen. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Der Code lautet wie folgt:

<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ösung:

Die Suchkomponenteneingabe von mint-ui hat standardmäßig ebenfalls den Typ „search“, muss aber auch mit einer Reihe von Formular-Tags in der äußeren Ebene und mit Aktionen umschlossen werden, damit die Suche Die Schaltfläche erscheint auf der Tastatur.

Das Obige ist Methode eins:

Wenn Sie auf der mobilen Tastatur auf „Suchen“ klicken, wird die Seite aktualisiert. Fügen Sie also ein Ziel zum Formular hinzu. Das Ziel gibt an, wo die Aktions-URL geöffnet werden soll. Fügen Sie dann einen versteckten Iframe ein und benennen Sie den Wert des Ziels des Formulars auf der aktuellen Seite Den gesuchten Inhalt anzeigen

Das Folgende ist Methode zwei:

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

Schreiben Sie hier direkt return false in das onsubmit-Ereignis, um die Übermittlung zu deaktivieren, und die Suchlistenseite kann auch auf der aktuellen Seite angezeigt werden.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonBedienen Sie die Suchkomponente, um sie auf der Tastatur anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!