您的位置:首页 > 编程学习 > > 正文

vue左侧边栏的制作(Vue+Vant实现顶部搜索栏)

更多 时间:2021-11-08 16:25:03 类别:编程学习 浏览量:1454

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>
    
  • 效果截图:

    vue左侧边栏的制作(Vue+Vant实现顶部搜索栏)

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:Vue Vant 搜索栏
    您可能感兴趣