类似百度搜索(搜索提示/输入后框置顶) element 组件 el-autocomplete

1.png

2.PNG

element ui el-autocomplete组件自定义样式
vue框架交互

@keyup.native="isTrans = true"
添加一个class

<el-autocomplete ref="search" v-model="state" :fetch-suggestions="querySearch" placeholder="" :trigger-on-focus="false" class="input-button" :class="{ trans: isTrans }" :popper-append-to-body="false" @select="handleSelect" @keyup.native="isTrans = true">
        <template slot="append">
          <el-button type="primary"><span style="margin-right: 10px">搜</span>索</el-button>
        </template>
      </el-autocomplete>

css样式 主要属性
transition: all 30ms linear;
transform: translate(-525px, -128px)

   /deep/.el-input__inner {
      width: 495px;
      height: 44px;
      line-height: 44px;
      border-radius: 8px 0 0 8px;
    }
    .el-input-group__append,
    .el-input-group__prepend {
      border: 1px solid #2c5be8;
      padding: 10px 30px;
      border-radius: 0 8px 8px 0;
      font-size: 16px;
    }

    .el-autocomplete {
      position: absolute;     //移动后不会占用原有位置
      top: 210px;
      left: 295px;
      transition: all 30ms linear;
    }
    .el-autocomplete.trans {
      transform: translate(-145px, -190px);
    }
    .bszs {
      position: absolute;
      top: 150px;
      left: 540px;
      transition: all 30ms linear;
      &.trans {
        transform: translate(-525px, -128px);
      }
    }