Vue+Vant implementiert die obere Suchleiste

<Vorlage>
  <Abschnitt Klasse="Stadtsuche">
    <van-icon class="search-icon" name="suche" />
    <input placeholder="Geben Sie hier das Suchwort ein" v-model="KeyWord">
    <van-icon class="clear-icon" name="clear" v-show="Schlüsselwort" @click="clearSearchInput" />
  </Abschnitt>
</Vorlage>
 
<Skript>
Standard exportieren {
   Daten() {
        zurückkehren {
            Stichwort: '',
        }
    },
    Methoden: {
        SucheInput löschen() {
            dieses.Schlüsselwort = '';
        }
    }
}
</Skript>
 
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stil>
    .Stadtsuche {
        Hintergrundfarbe: #F7F8FA;
        Anzeige: Flex;
        Inhalt ausrichten: Flex-Start;
        Elemente ausrichten: zentrieren;
        Höhe: 2,3rem;
        Breite: 94vw;
        Rand: 2vw 4vw;
        Rahmenradius: 8px;
    }
    .Suchsymbol {
      Rand links: 5px;
    }
    Eingabe {
      Rand: 0 1,5 vw;
      Hintergrundfarbe: #F7F8FA;
      Rand: 0px;
      Schriftgröße: 14px;
      Flexion: 1
    }
    .clear-icon { Farbe: #999;}
  
</Stil>

<Vorlage>
  <div>
      <Suche></Suche>
        Startseite</div>
</Vorlage>
 
<Skript>
Suche aus '@/components/SearchBar' importieren
Standard exportieren {
   Name: "Heim",
   Komponenten:
      'Suche': Suche,
    },
}
</Skript>
 
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stil>
 
</Stil>