Vue+Vant实现顶部搜索栏
Vue+Vant实现顶部搜索栏
这篇文章主要为大家详细介绍了Vue+Vant实现顶部搜索栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue+Vant实现顶部搜索栏的具体代码,供大家参考,具体内容如下
搜索栏组件源码(SearchBar.vue)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | < 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 > |
其他组件依赖引用检索组件
首页引用搜索组件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | < 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 elementui 实现搜索栏公共组件封装的实例代码
原文链接:https://blog.csdn.net/zhouzhiwengang/article/details/113994434