mint-ui의 검색 구성요소가 키보드의 검색 버튼을 어떻게 표시할 수 있나요?

이번에 소개해드릴 내용은 mint-ui의 검색 컴포넌트가 키보드에 search버튼을 표시하는 방법에 대한 것입니다.

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

mint-ui의 검색 구성 요소 입력도 기본적으로 type="search"이지만 외부 레이어의 양식 태그 세트와 작업으로 래핑되어야 검색 버튼이 키보드.

위는 방법 1입니다.

모바일 키보드에서 검색을 클릭하면 페이지가 새로 고쳐지므로 양식에 대상을 추가하고 대상은 작업을 열 위치를 지정합니다. URL을 입력한 다음 양식의 대상 값이라는 이름의 숨겨진 iframe을 넣어 검색 내용이 현재 페이지에 표시되도록 합니다

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

여기에서 onsubmit 이벤트에 return false를 직접 쓰고 제출을 금지한 다음 검색합니다. 목록 페이지는 현재 페이지에도 표시될 수 있습니다.

위의 소개를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

JS를 사용하여 아이콘 숨기기와 표시를 동시에 전환하는 방법

Vue.js가 구성 요소를 나누는 방법

클래스의 정적 메서드, 속성 및 인스턴스 속성을 사용하는 방법 ES6 자바스크립트

위 내용은 mint-ui의 검색 구성요소가 키보드의 검색 버튼을 어떻게 표시할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!