跟添加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
效果图:
我突然发现一个问题呀 教程里面没有讲这个搜索框的逻辑实现呀。只说了样式= =
回头再去找找这个怎么加逻辑