Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie kann die Suchkomponente von mint-ui die Suchschaltfläche auf der Tastatur anzeigen?

php中世界最好的语言
Freigeben: 2017-12-31 11:34:30
Original
1668 Leute haben es durchsucht

Was ich Ihnen dieses Mal zeige, ist, wie die Suchkomponente von mint-ui die Suchtaste auf der Tastatur anzeigen kann. Dieser Artikel gibt Ihnen eine detaillierte Analyse.

<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
Die Suchkomponenteneingabe von mint-ui ist standardmäßig ebenfalls vom Typ = „Suche“, muss aber auch mit einer Reihe von Formular-Tags in der äußeren Ebene und mit umschlossen werden Aktion, die auf der Tastatur angezeigt wird. Eine Suchschaltfläche wird angezeigt.

Das Obige ist Methode eins:

Wenn Sie auf der mobilen Tastatur auf „Suchen“ klicken, wird die Seite aktualisiert. Fügen Sie dem Formular also ein Ziel hinzu, und das Ziel gibt an, wo die Aktion geöffnet werden soll URL, und fügen Sie sie dann in einen versteckten Iframe ein, der den Zielwert des Formulars nennt, sodass der gesuchte Inhalt auf der aktuellen Seite angezeigt wird

<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
Hier direkt in das onsubmit

-Ereignis Geben Sie „return false“ ein, um die Übermittlung zu deaktivieren. Die Suchlistenseite kann auch auf der aktuellen Seite angezeigt werden. Ich glaube, dass Sie die Methode beherrschen, nachdem Sie die obige Einführung gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie JS, um gleichzeitig zwischen dem Ausblenden und Anzeigen von Symbolen zu wechseln

So unterteilen Sie Komponenten Vue.js


So verwenden Sie statische Methoden, Attribute und Instanzattribute von Klassen in ES6-Javascript

Das obige ist der detaillierte Inhalt vonWie kann die Suchkomponente von mint-ui die Suchschaltfläche auf der Tastatur anzeigen?. 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