Vue+Vant 상단 검색 표시 줄 구현

본 논문 의 사례 는 Vue+Vant 가 상단 검색 표시 줄 을 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
검색 표시 줄 구성 요소 원본(SearchBar.vue)

<template>
  <section class="city-search">
    <van-icon class="search-icon" name="search" />
    <input  placeholder="         " v-model="KeyWord">
    <van-icon class="clear-icon" name="clear" v-show="KeyWord" @click="clearSearchInput" />
  </section>
</template>
 
<script>
export default {
   data() {
        return {
            KeyWord: '',
        }
    },
    methods: {
        clearSearchInput() {
            this.KeyWord = '';
        }
    }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .city-search {
        background-color: #F7F8FA;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 2.3rem;
        width: 94vw;
        margin: 2vw 4vw;
        border-radius: 8px;
    }
    .search-icon {
      margin-left: 5px;
    }
    input {
      margin: 0 1.5vw;
      background-color: #F7F8FA;
      border: 0px;
      font-size: 14px;
      flex: 1
    }
    .clear-icon { color: #999;}
  
</style>

다른 구성 요 소 는 참조 검색 구성 요소 에 의존 합 니 다.
첫 페이지 참조 검색 구성 요소:

<template>
  <div>
      <search></search>
          
  </div>
</template>
 
<script>
import Search from '@/components/SearchBar'
export default {
   name: "home",
   components: {
      'search': Search,
    },
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
 
</style>

효과 캡 처:

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.