volunteer-pc/src/views/components/myInput/index.vue

<!--
 * @Descripttion: 
 * @version: 
 * @Author: JC9527
 * @Date: 2023-09-20 11:28:27
 * @LastEditors: JC9527
 * @LastEditTime: 2023-09-22 14:12:58
-->
<template>
  <div class="my-inputs">
    <el-input v-model="input" :placeholder="placeholder" clearable></el-input>
    <div class="btn" @click="inputValue"><i class="el-icon-search"></i></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      input: "",
    };
  },
  props: {
    placeholder: {
      type: String,
      default: "请输入关键字",
    },
  },
  methods: {
    inputValue() {
      this.$emit("clickSearch", this.input);
    },
  },
};
</script>
<style lang="scss" scoped>
.my-inputs {
  display: flex;
  height: 35px;
  margin-bottom: 15px;
  ::v-deep .el-input {
    width: 515px;
    height: 100%;
    .el-input__inner {
      width: 100%;
      height: 100%;
      border-right: none;
      border-radius: 4px 0 0 4px;
      // border: 1px solid #dbd7d7;
    }
  }
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 100%;
    border-radius: 0 4px 4px 0;
    background-color: #f8414d;
    cursor: pointer;
    color: #fff;
  }
}
</style>