搜索条的排版设计

image.png

  1. <template>
  2.     <view class="search-container">
  3.         <image src="../../static/img/logo-small.jpg" class="logo"></image>
  4.         <view class="search-bar">
  5.             <icon type="search" size="16" class="search-icon"></icon>
  6.             <input type="text" placeholder="请输入关键字" class="search" 
  7.             confirm-type="search" v-model="keyword" @confirm="handleSearch"/>
  8.         </view> 
  9.     </view>
  10. </template>
  12. <script>
  13.     export default {
  14.         data() {
  15.             return {
  16.                 keyword:null
  17.             }
  18.         },
  19.         methods: {
  20.             handleSearch:function(){
  21.                 console.log(this.keyword);
  22.             }
  23.         }
  24.     }
  25. </script>
  27. <style lang="less">
  28.    @import url("index.less");
  29. </style>