脚本宝典收集整理的这篇文章主要介绍了Vue+Vant实现顶部搜索栏,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
本文实例为大家分享了Vue+Vant实现顶部搜索栏的具体代码,供大家参考,具体内容如下
<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实现顶部搜索栏全部内容,希望文章能够帮你解决Vue+Vant实现顶部搜索栏所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。