搜索功能鼠标悬浮icon往左，往右伸展开

<template>
    <div>
         <input
            :class="['change-input',{focus: isFocusOn}]"
            v-model.trim="keyword"
            id="searchInput"
            placeholder="请输入关键字"
            type="text"
            @focus="isFocusOn= true"
            @blur="mouseLeave"
            @mouseenter="isFocusOn= true"
            @input="searchByKeyDebunce()"
            @mouseleave="mouseLeave"/>
          <i class="search-icon" @mouseenter="isFocusOn= true" @mouseleave="mouseLeave"/>
    </div>
</template>
<script>
    export default {
        name: 'in',
        data () {
            return {
                keyword: '',
                timeOut: null,
                 isFocusOn: false // 获取焦点
            }
        },
         mounted() {
            // 搜索框
            this.mouseLeave()
        },
        methods: {
             mouseLeave() {
              const id = document.activeElement.id
              if (id === 'searchInput') {
                this.isFocusOn = true
              } else if (this.condition.keyword) {
                this.isFocusOn = true
              } else {
                this.isFocusOn = false
              }
            },
            searchByKeyDebunce () {
              clearTimeout(this.timeOut)
              this.timeOut = setTimeout(() => {
                  this.searchByKey(true) // 查询接口
              }, 1000)
            }
        }
    }
</script>
<style>
  .change-input{
      position: absolute;
      top: 15px;
      right: 550px;
      width: 52px;
      font-size: 14px;
      height: 42px;
      box-sizing: border-box;
      border-radius: 24px;
      outline: none;
      transition: all linear .5s;
      background-color: #74bcfc;
      border: 1px solid #aedbfd;
      color: #fff;
      &::-webkit-input-placeholder {
        color: #74bcfc;
      }
      &:-ms-input-placeholder {
        color: #74bcfc;
      }
    }
    .search-icon{
      display: inline-block;
      position: absolute;
      top: 25px;
      right: 557px;
      background: url("../../assets/newhome/search_icon.png") no-repeat;
      width: 30px;
      height: 30px;
    }
    .focus{
      width: 200px;
      padding: 0 40px 0 15px;
    }
</style>