Vue 2.5 学习笔记 8.2 城市搜索框

水深无声 2022-02-28 08:28 259阅读 0赞

跟添加Header.vue的添加方式一样。没啥好写的 就把组件代码贴出来吧。= =

<template>
      <div class="search">
        <input  class="search-input" type="text" placeholder="输入城市名或拼音">
      </div>
    </template>
    
    <script>
    export default {
      name: 'CitySearch'
    }
    </script>
    
    <style lang="stylus" scoped>
      @import '~styles/varibles.styl'
      .search
        height: .72rem
        padding: 0 .1rem
        background: $bgColor
        .search-input
    // 规定按照W3C标准来计算盒子模型的高宽
          box-sizing: border-box
          width: 100%
          height: .62rem
          line-height: .62rem
          padding: 0 .1rem
          text-align: center
          border-radius: .06rem
          color: #666
    </style>

关于box-sizing可参考[http://www.cnblogs.com/chenxiaoduo/p/3948319.html][http_www.cnblogs.com_chenxiaoduo_p_3948319.html]

效果图：

![20190325141409665.png][]

我突然发现一个问题呀  教程里面没有讲这个搜索框的逻辑实现呀。只说了样式= =

回头再去找找这个怎么加逻辑

[http_www.cnblogs.com_chenxiaoduo_p_3948319.html]: http://www.cnblogs.com/chenxiaoduo/p/3948319.html
[20190325141409665.png]: /images/20220228/29ebdd2220a549e19d0c249bd947f9e6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，259人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue前端：几种搜索框功能实现

Vue前端：几种搜索框功能实现前言一、搜索框输入内容自动检索（1）检索到输入新的内容后，就自动向后端发送查找请求（即时搜索）

红太狼/ 2024年03月30日 14:12/ 0 赞/ 119 阅读

相关学习笔记——input标签作为搜索框时延时查询

> 在前端开发过程，有时会有以下需求：使用input标签作为搜索框，在搜索框中输入内容查询相关结果，类似于百度搜索。 > > 这里主要使用输入框的keyup事件。 ----

亦凉/ 2023年01月12日 11:38/ 0 赞/ 148 阅读

相关【学习笔记】25、关系数据库存储

关系数据库存储一、关系数据库介绍关系型数据库，是指采用了关系模型来组织数据的数据库，其以行和列的形式存储数据，以便于用户理解，关系型数据库这一系列的行和列被称为

谁践踏了优雅/ 2022年09月14日 11:13/ 0 赞/ 129 阅读

相关微信小程序实现城市名称拼音搜索框汉字/拼音（城市区县定位模块）

~ 文末展示项目更新哦 ~ 更新II：代码已重构，比文中初始代码更清晰规范，功能不变，如有帮助请star。 -------------------- 要实现的效果展示

缺乏、安全感/ 2022年06月14日 06:40/ 0 赞/ 514 阅读

相关 vue 输入框回车搜索

@keyup.enter="queryAdminRole" <el-input style="width:300px;"

红太狼/ 2022年03月16日 05:28/ 0 赞/ 360 阅读

相关 Vue2.5 学习笔记8.1 城市页面 router

主页写好了，接下来就是写城市列表页 1. 先去src/router/index.js中添加新的url路径 ![20190322175147887.png][] 此路径表示

旧城等待，/ 2022年03月01日 13:42/ 0 赞/ 247 阅读

相关 Vue2.5 学习笔记 8.3 城市列表

1.上代码 //分3个模块，当前城市，热门城市，字母顺序 <template> <div class="list">

末蓝、/ 2022年02月28日 09:03/ 0 赞/ 230 阅读

相关 Vue 2.5 学习笔记 8.2 城市搜索框

跟添加Header.vue的添加方式一样。没啥好写的就把组件代码贴出来吧。= = <template> <div class="search">

水深无声/ 2022年02月28日 08:28/ 0 赞/ 260 阅读

相关 Vue2.5 学习笔记 8.8 城市列表页的搜索功能实现

嗯。。看来教程还是有说搜索功能的嘛嘿嘿好了直接上内容： 1.首先做一个搜索结果显示的样式： <template> // 外出需要用一个div包

布满荆棘的人生/ 2022年02月25日 15:44/ 0 赞/ 279 阅读

相关 vue - 搜索框组件的封装及使用

在写一个项目的时候，我们在多个页面会使用到搜索功能，这时我们一般都会选择直接写一个组件给多个页面一起使用，下面我给大家分享一下我的组件封装，如果不妥之处，请多多指教！

青旅半醒/ 2021年09月30日 14:22/ 0 赞/ 1110 阅读