怎么在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实现顶部搜索栏，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网精选频道。