搜索中心 (一) -基础布局-search搜索框组件-自定义按钮 & 历史记录与联想搜索切换-v-if-v-else

搜索中心-基础布局-search搜索框组件-自定义按钮 & 历史记录与联想搜索切换-v-if-v-else

search搜索框组件-自定义按钮：https://youzan.github.io/vant/#/zh-CN/search#zi-ding-yi-an-niu

搜索框：

src/views/search/index.vue

<van-search v-model.trim="q" placeholder="请输入搜索关键词" shape="round" @search="onSearch"/>

• q 搜索关键字
• onSearch 搜索函数（虚拟键盘 enter 触发）

历史记录：

    <div class="history-box">
      <div class="head">
        <span>历史记录</span>
        <van-icon name="delete"></van-icon>
      </div>
      <van-cell-group>
        <van-cell>
          <a class="word_btn">电脑</a>
          <van-icon class="close_btn" slot="right-icon" name="cross"/>
        </van-cell>
      </van-cell-group>
    </div>

.history-box {
  padding: 0 20px;
  .head{
    line-height: 36px;
    color: #999;
    .van-icon{
      font-size: 16px;
      float: right;
      margin-top: 10px;;
    }
  }
  .van-cell{
    padding: 10px 0;
  }
  .word_btn{
    color:#3296fa;
  }
  .close_btn{
    margin-top:5px;
    color: #999;
  }
}

联想搜索：

	<van-cell-group class="suggest-box">
      <van-cell icon="search"><p><span>j</span>ava</p></van-cell>
    </van-cell-group>

.suggest-box{
  /deep/ .van-cell{
    padding: 10px 20px;
    color: #999;
    p{
      span{
        color: red;
      }
    }
  }
}

历史记录与联想搜索切换

	<van-cell-group class="suggest-box" v-if="q">
      <van-cell icon="search"><span>j</span>ava</van-cell>
    </van-cell-group>
    <div class="history-box" v-else>
      <div class="head">
        <span>历史记录</span>
        <van-icon name="delete"></van-icon>
      </div>
      <van-cell-group>
        <van-cell>
          <a class="word_btn">电脑</a>
          <van-icon class="close_btn" slot="right-icon" name="cross"/>
        </van-cell>
      </van-cell-group>
    </div>