Heim > Web-Frontend > js-Tutorial > Hauptteil

Bedienen Sie die Suchkomponente, um sie auf der Tastatur anzuzeigen

php中世界最好的语言
Freigeben: 2018-04-16 11:14:11
Original
1699 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage