Element-UI實現橢圓搜索框

1、Element-UI複合型輸入框實現的搜索框

<div>
  <el-input placeholder="請輸入內容" v-model="input" class="input-with-select">
    <el-select v-model="select" slot="prepend" placeholder="請選擇">
      <el-option label="餐廳" value="1"></el-option>
      <el-option label="訂單" value="2"></el-option>
      <el-option label="用戶" value="3"></el-option>
    </el-select>
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>
</div>

<style>
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>

<script>
export default {
  data() {
    return {
      input: '',
      select: ''
    }
  }
}
</script>

2、代碼改造爲橢圓搜索框

<template>
  <div>
    <el-input placeholder="請輸入內容" v-model="input" class="searchClass">
      <div slot="prepend">
        <div class="centerClass">
          <el-select v-model="select" placeholder="請選擇" style="width: 90px">
            <el-option label="餐廳" value="1"></el-option>
            <el-option label="訂單" value="2"></el-option>
            <el-option label="用戶" value="3"></el-option>
          </el-select>
        </div>
        <div class="centerClass">
          <div class="line"></div>
        </div>
      </div>
      <el-button slot="append" icon="el-icon-search"></el-button>
    </el-input>
  </div>
</template>

<script>
export default {
  data () {
    return {
      input: '',
      select: ''
    };
  }
};
</script>

樣式

.searchClass{
  border: 1px solid #c5c5c5;
  border-radius: 20px;
  background: #f4f4f4;
}
.searchClass .el-input-group__prepend {
  border: none;
  background-color: transparent;
  padding: 0 10px 0 30px;
}
.searchClass .el-input-group__append {
  border: none;
  background-color: transparent;
}
.searchClass .el-input__inner {
  height: 36px;
  line-height: 36px;
  border: none;
  background-color: transparent;
}
.searchClass .el-icon-search{
  font-size: 16px;
}
.searchClass .centerClass {
  height: 100%;
  line-height: 100%;
  display: inline-block;
  vertical-align: middle;
  text-align: right;
}
.searchClass .line {
  width: 1px;
  height: 26px;
  background-color: #c5c5c5;
  margin-left: 14px;
}
.searchClass:hover{
  border: 1px solid #D5E3E8;
  background: #fff;
}
.searchClass:hover .line {
  background-color: #D5E3E8;
}
.searchClass:hover .el-icon-search{
  color: #409eff;
  font-size: 16px;
}

效果：

hover樣式效果