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 @change="changeValue"></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('changeInput',this.input)
    },
    changeValue(){
      this.$emit('changeValue',this.input)
    }
  },
}
</script>
<style lang="scss" scoped>
.my-inputs {
  display: flex;
  ::v-deep .el-input {
    width: 515px;
    height: 40px;
    .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: 40px;
    border-radius: 0 4px 4px 0;
    background-color: #F8414D;
    cursor: pointer;
    color: #fff;
  }
}
</style>