Vue+Vant实现顶部搜索栏

2024-12-20 21:19:04

本文实例为大家分享了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 elementui 实现搜索栏公共组件封装的实例代码

1.背景 vue后台管理系统,会有很多表格页面,表格上方会有一些搜索选项,表格直接使用el-table即可,而搜索栏区域每次写起来都很繁琐,而且多人开发情况下每个人写的样式都不相同,布局样式无法统一. 所以要考虑对搜索栏做一个封装,统一配置引用,提升开发维护效率和界面统一. 完成后的效果大概就是长这样: 2.分析项目使用的是elementui框架,搜索栏这种表单提交,首先要使用el-form组件来封装,而复杂点就是表单项可能有很多种,例如input输入框.select选择框.日期时间选择框.日
Vue+Vant实现顶部搜索栏

本文实例为大家分享了Vue+Vant实现顶部搜索栏的具体代码,供大家参考,具体内容如下搜索栏组件源码(SearchBar.vue) <template> <section class="city-search"> <van-icon class="search-icon" name="search" /> <input placeholder="在此输入检索关键字" v-model=
vue滚动固定顶部及修改样式的实例代码

滚动固定位置有多种方法 1 css3 粘性定位 position:sticky: top:20px: 2直接position:fixed:给顶部盒子设置一个margin-top刚好是需要固定的盒子的高度 3事件监听更改style中的position属性 ** 修改样式滚动监听事件中使用this.$refs.xxx.style.color='xxxx' 这种方式会报错 Uncaught TypeError: Cannot read property 'style' of undefined 所
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能

面向百度开发 html <van-uploader :after-read="onRead" accept="image/*"> <img src="./icon_input_add.png" /> </van-uploader> js data() { return { files: { name: "", type: "" }, headerImage: null,
Vue实现回到顶部和底部动画效果

本文实例为大家分享了Vue实现回到顶部和底部动画效果的具体代码,供大家参考,具体内容如下代码: <template> <div> <div class="scroll" :class="{show:isActive}"> <div id="toTop" @click="toTop(step)"><</div> <div id="toBottom
vue+vant实现商品列表批量倒计时功能

最近因为一个项目需要用到商品批量倒计时,当时使用vant封装好的组件CountDown编写起初不知道"timeData"这个对象只需要传time的时间戳就可以自动生成,走了一大波弯路,现在想想也是醉了最开始写这个倒计时的时候没有考虑到使用当前服务器时间问题,只获取了本地时间 new Date().getTime(),然后发现这个不行,只要用户修改下手机本地时间,这个倒计时就不行了,有安全隐患,在网上也搜了一些相关知识,但都不尽人意,故想写这一篇文章避免大家再走我之前的弯路! 废话不
vue+vant使用图片预览功能ImagePreview的问题解决

如果您搜到这篇文章的话,那员外估计您遇到跟我一样的问题了,即在打开图片预览功能后,如果不关闭预览的图片,同时改变路由的话,会发现即使路由改变了,预览的图片还在文档的最顶层显示,如图: 着实让员外百思不其解,在调用vant 的 ImagePreview图片预览组件中,没有html,有的只是引入ImagePreview 和js的调用.在这种情况下,员外是想自己添加任何方法都没法实现的,同时想在离开路由时的beforeRouteLeave 钩子中关闭这个 ImagePreview 也实现不了,因为根
Vue实现返回顶部按钮实例代码

前言本文主要介绍了Vue 实现返回顶部按钮的方法,下面话不多说,来直接看代码吧实例代码: <template> <div class="scrollTop"> <div class="backTop" @click="backTop"> <button v-show="flag_scroll"> 返回顶部 </button> </div> //数据源
vue vant中picker组件的使用

1.引入 import { Picker } from 'vant' 2.使用 components: { vanPicker: Picker, } 3.渲染 <van-picker show-toolbar :columns="columns" value-key="text" /> 4.将值push到columns //注意的点vant默认的是text,如果你需要修改需要value-key="你要定义的名字",否则不会渲染 thi
Vue+Vant 图片上传加显示的案例

前端开发想省时间就是要找框架呀!找框架! vant中上传图片组件:https://youzan.github.io/vant/#/zh-CN/uploader 上传图片的组件uploader: <van-uploader :after-read="onRead" accept="image/*" multiple> <imgclass="head-img" src="/static/images/addpic.png&
vue+vant实现购物车全选和反选功能

本文实例为大家分享了vue+vant实现购物车全选和反选的具体代码,供大家参考,具体内容如下这是效果图: 话不多少,直接上代码: <template> <div class="cart"> <div class="st-spacing-main" v-for="(item) in cartInfoList" :key="item.id"> <div class="st-it

Vue+Vant实现顶部搜索栏

搜索栏组件源码(SearchBar.vue)

其他组件依赖引用检索组件

相关推荐

随机推荐