效果图

模版html

<div class="share-search-box">
  <i class="iconfont iconsousuo"/> 
  <input placeholder="输入商品名称搜索" class="share-search-input" v-model="params.goodsName" @keyup.enter="handleToSearch" />
 </div>

style

1.采用flex布局

.share-search-box {
    width: 100%;
    height: 35px;
    background: #FFFFFF;
    border-radius: 18px;
    line-height: 35px;
    margin-bottom: 15px;
    font-size: 14px;
    padding: 0 10px;
    box-sizing: border-box;
    color: #B0B0B0;
    overflow: hidden;
    display: flex;
    .share-search-input {
      width: 350px;
      padding: 0 5px;
      box-sizing: border-box;
    }
}

2.清除默认样式

input{
      border:0; /*清除边框*/
      outline: 0; /*清除轮廓*/
      height: 35px;
      line-height: 35px;
      box-sizing: border-box;
      color: #212122;
      font-size: 14px;
      padding: 0;
    }
    input:focus {
      border: none;
    }
    input::-webkit-input-placeholder {
      color: #B0B0B0;
      font-size: 14px;
      padding: 0;
      height: 35px;
      line-height: 35px;
    }

因为是搜索框，UI小姐姐提了需求---软键盘上面的【前往】也应该显示为【搜索】

实现方法--- input type=“search”（这个时候会出现自带的清除图标“x”）
清除sesrch默认样式

input[type=search] {
      -webkit-appearance: textfield;
      box-sizing: content-box;
      font-family: inherit;
      font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
      display: none;
}

这种写法在ios上不生效，必须要有一个form标签套起来

<div class="share-search-box">
  <i class="iconfont iconsousuo"/>
  <form action="javascript:return true;">
    <input type="search" placeholder="输入商品名称搜索" class="share-search-input" v-model="params.goodsName" @keyup.enter="handleToSearch" />
  </form>
 </div>

搜索按键之后要把软键盘收起来。

我这里直接写在了搜索方法之中（PS：搜索触发可以监听键盘事件）

  handleToSearch () {
      document.activeElement.blur() // 关闭软键盘
      this.params.pageNo = 1
      this.getSharingList()
    },