vue左侧边栏的制作(Vue+Vant实现顶部搜索栏)
类别:编程学习 浏览量:1454
时间:2021-11-08 16:25:03 vue左侧边栏的制作
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> <li> <search></search> 首页 </li> </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>
效果截图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vueelementui组件生成页面(Vue Element前端应用开发之树列表组件)
- vue.js 怎么做插件(Vue.js实现音乐播放器)
- vue使用websocket的详细步骤(vue使用webSocket更新实时天气的方法)
- vue怎么定义router的动态路由(vue.js Router中嵌套路由的实用示例)
- vue怎么使用element(Vue Element前端应用开发之图标的维护和使用)
- vuex-table行列转换效果(vue3+el-table实现行列转换)
- vue浏览pdf文件(如何在vue中使用pdfjs预览pdf文件)
- vue怎么在中间加图片(Vue实现多图添加显示和删除)
- vue路由跳转的方法(Vue路由监听实现同页面动态加载的示例)
- vue3 props用法(vue3组合API中setup、 ref、reactive的使用大全)
- vue重置密码(Vue 两个字段联合校验之修改密码功能的实现)
- vue 选中背景高亮(vue 如何设置背景颜色及透明度)
- vue查询条件生成工具(vue实现四级导航及验证码的方法实例)
- vue动态生成的下拉框如何获取值(Vue 级联下拉框的设计与实现)
- vue数据改变页面不刷新(vue列表数据删除后主动刷新页面及刷新方法详解)
- vue组件详解(Vue的方法和属性案例详解)
- 文莱旅游攻略(文莱旅游攻略介绍)
- 马来西亚旅游攻略(马来西亚旅游攻略自由行攻略)
- 缅甸旅游攻略(缅甸旅游攻略必去景点推荐)
- 《庆余年2》新消息,原班人马,肖战特别出演,这才是最好的安排(庆余年2新消息原班人马)
- 宁夏灵武恐龙化石发现始末(宁夏灵武恐龙化石发现始末)
- 到了岁末 临门一脚 节点,天台综合督评会目标直指 全年红(到了岁末临门一脚)
热门推荐
- dede MD5加密解密(DEDECMS的20位MD5加密密文解密示例介绍)
- unix进程空间的区段(Unix/Linux fork隐藏的开销)
- 数据库该不该用外键
- css3怎么构建阴影(详解css3 mask遮罩实现一些特效)
- html5本地存储功能(利用Node实现HTML5离线存储的方法)
- sqlserver纵表变横表(SQL Server行转列的方法解析)
- mysql密码找回方法(MySQL8忘记密码的快速解决方法)
- php怎么判断是否有session(PHP中Session ID的实现原理实例分析)
- ubuntu20.2安装mysql(Ubuntu 14.04下mysql安装配置教程)
- mysql8.0.16安装步骤图解(mysql 8.0.22 安装配置图文教程)