cbjsxt-front-master/src/components/searchInput/HeaderSearchInput.vue

<template>
  <div class="header-search">
    <div class="search-input">
      <el-input
        v-model="searchKey"
        clearable
        :placeholder="searchTips"
        :style="{ '--innerWidth': innerWidth }"
        @focus="handleFocus"
        @blur="handleBlur"
        @keyup.enter.native="searchByKey"
      ></el-input>
      <el-button type="primary" class="search-button-div" @click="searchByKey">
        <i class="el-icon-search input-button-icon"></i>
        {{ $t('ht.common.searchFor') }}
      </el-button>
      <!-- <i
        ref="icon"
        class="iconfont icon-flow-center-search"
        @click="searchByKey"
      ></i> -->
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    name: 'HeaderSearch',
    props: {
      searchTips: {
        type: String,
        default: '请输入关键词进行检索',
      },
      innerWidth: {
        type: String,
        default: '330px',
      },
    },
    data() {
      return {
        searchKey: '',
      }
    },
    computed: {
      ...mapGetters({
        themeColor: 'settings/themeColor',
      }),
    },
    methods: {
      handleAdd() {
        this.$emit('handle-add')
      },
      handleDel() {
        this.$emit('handle-del')
      },
      searchByKey() {
        this.$emit('search-by-key', this.searchKey)
      },
      handleFocus() {
        this.$refs.icon.style.color = this.themeColor
      },
      handleBlur() {
        this.$refs.icon.style.color = '#c0c4cc'
      },
    },
  }
</script>

<style lang="scss" scoped>
  .header-search {
    display: inline-block;
    ::v-deep .el-input {
      width: var(--innerWidth);
      .el-input__inner {
        padding-right: 60px;
      }
      .el-input__suffix {
        right: 30px;
      }
    }
    .search-input {
      position: relative;
      display: flex;
      align-items: center;
      .iconfont {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 30px;
        height: 32px;
        font-size: 14px;
        line-height: 32px;
        color: #c0c4cc;
        text-align: center;
        cursor: pointer;
      }

      .search-button-div {
        z-index: 2;
        height: 32px;
        margin-left: -30px;
        font-size: 14px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
      }
    }
  }
</style>