kuailelunwen_new_houtai/src/components/GuipInput.vue

<template>
  <el-form-item 
  :style="{height:height,...styleObject}"
  :class="[{'column':column},{'w510':addClass=='w510'},{'w388':addClass=='w388'},'form-item']"
  :label="label" :prop="prop" :rules="rules">
  <p v-if="desc" class="desc_right">{{ desc }}</p>
    <el-input
      :type="type"
      :placeholder="placeholder1"
      :disabled="disabled"
      :maxlength="maxlength1"
      :style="{width:width,height:height}"
      :minLength="minLength1"
      :show-word-limit="showWordLimit"
      @input="$emit('input', $event)"
      @change="$emit('change', $event)"
      @blur="$emit('blur', inputValue)"
      @focus="$emit('focus', inputValue)"
      v-model="inputValue">
      <!-- 自定义前面小图标 -->
      <template v-slot:prepend>
        <slot name="prependshow"></slot>
      </template>
      <template v-slot:prefix>
        <slot name="prefix"></slot>
      </template>
      <!-- 清除小图标 -->
      <template v-slot:suffix>
        <slot name="suffix"></slot>
      </template>
      <template v-slot:append>
        <slot name="appendshow"></slot>
      </template>

      <!-- :error="errorMessage" show-message -->

      <!-- <i slot="suffix" v-if="empty" class="el-icon-close" @click="handleClear">h</i> -->
      <!-- <el-button slot="append" v-if="hasBtn"  type="primary" @click="$emit('enter',value)">搜索</el-button> -->
    </el-input>
    <!-- 单位 -->
  <span class="unit" v-if="unit">{{ unit }}</span>
  </el-form-item>

 </template>
  
 <script>
 export default {
   name: 'GuipInput',
   props:['value','styleObject','disabled','defaultValue','placeholder',
   'maxlength','minLength','clear','width','height','showWordLimit',
   'label','type','prop','rules','column','addClass','desc','unit'],
   data() {
       return {
        inputValue: '',
           maxlength1: '',
           minLength1: 0,
           style:{
              width:'510px',
              height:'38px'
           },
           placeholder1:''
       }
   },
   watch: { // 监听外部传来的 value prop 的变化，以便同步到内部状态 inputValue 上（可选）
    // defaultValue(newVal) {
    //   console.log(newVal,'newVal');
    //   this.inputValue = newVal;
    // },
    value(newVal){
      this.inputValue = newVal;
    }
  },
   created(){
    // 默认值赋值
    if(this.defaultValue != null){
      this.inputValue = this.defaultValue;
    }
    // 默认提示语
    if(this.placeholder){
      this.placeholder1 = this.placeholder;
    }
    // 默认提示语
    if(this.maxlength){
      this.maxlength1 = this.maxlength;
    }
    // 默认提示语
    if(this.minLength){
      this.minLength1 = this.minLength;
    }
   },
   mounted(){
       this.$nextTick(()=>{
        let els = document.querySelectorAll('.el-input');
        els.forEach(item=>{
          item.onmouseover= function(){
            item.classList.add("hoverclass")
          }
          item.onmouseout= function(){
            item.classList.remove("hoverclass")
          }
          // item.addEventListener('mouseover',function(){
          //   console.log('滑过');
          //   item.classList.add("hoverclass")
          // })
          // item.addEventListener('mouseoout',function(){
          //   console.log('滑出');
          //   item.classList.remove("hoverclass")
          // })
          // item.addEventListener('mouseoenter',function(){
          //   console.log('滑---');
          //   item.classList.add("hoverclass")
          // })
          // item.addEventListener('mouseoleave',function(){
          //   console.log('滑出');
          //   item.classList.remove("hoverclass")
          // })
        })
        // console.log(el,'====9999');
        // if(el&& this.styleObject){
        //   for(var key in this.styleObject){
        //     el.style[key] = this.styleObject[key]
        //   }
        // }
       })
   },
   methods:{
    // input 事件
    // changeInput(event){
    //   this.$emit('input', event);
    // }
    // handleClear(){
    //   console.log('清除---');
    //   this.$emit('clear', '清楚逻辑')
    // }
   }
 }
 </script>
 <style lang="scss" scoped>
 .unit {
  position: absolute;
  right: 12px; /* 根据需要调整位置 */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* 防止单位文本影响输入框的点击事件 */
}
</style>