如何在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实现顶部搜索栏”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！