纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

Vue顶部搜索栏 Vue+Vant实现顶部搜索栏

在奋斗的大道   2021-06-07 我要评论
想了解Vue+Vant实现顶部搜索栏的相关内容吗,在奋斗的大道在本文为您仔细讲解Vue顶部搜索栏的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点: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>

效果截图:


相关文章

猜您喜欢

  • Java求解二叉树 Java求解二叉树的最近公共祖先实例代码

    想了解Java求解二叉树的最近公共祖先实例代码的相关内容吗,南淮北安在本文为您仔细讲解Java求解二叉树的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:java实现二叉树,java二叉树算法,java求二叉树的高度,下面大家一起来学习吧。..
  • Python matplotlib绘制散点图 Python matplotlib绘制散点图的实例代码

    想了解Python matplotlib绘制散点图的实例代码的相关内容吗,机器视觉之眼在本文为您仔细讲解Python matplotlib绘制散点图的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:python做散点图,matplotlib散点图绘制,matplotlib散点密度图,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.axommsoft.com 【Pdf软件站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式