키보드에 표시할 검색 구성 요소를 조작합니다.

이번에는 키보드에 표시할 검색 컴포넌트를 조작할 때 주의 사항을 소개하겠습니다. 다음은 실제 사례입니다.

코드는 다음과 같습니다:

<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"이지만 외부 레이어의 양식 태그 세트와 작업으로 래핑되어야 Search 버튼이 키보드.

위는 방법 1입니다:

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

다음은 방법 2입니다.

<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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

위 내용은 키보드에 표시할 검색 구성 요소를 조작합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!