怎么在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>

以上就是怎么在Vue中利用Vant实现顶部搜索栏，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。