kuailelunwen_new_houtai/src/components/GuipInput.vue

<template>
  
    <el-input
      :type="type"
      :style="{...style,width:width,height:height,...styleObject}"
      :placeholder="placeholder1"
      :disabled="disabled"
      :maxlength="maxlength1"
      :minLength="minLength1"
      :show-word-limit="showWordLimit"
      @input="$emit('input', $event)"
      @change="$emit('change', $event)"
      @blur="$emit('blur', value)"
      @focus="$emit('focus', value)"
      v-model="value">
      <!-- 自定义前面小图标 -->
      <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>
      <!-- <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>
 </template>
  
 <script>
 export default {
   name: 'GuipInput',
   props:['styleObject','disabled','defaultValue','placeholder','maxlength','minLength','clear','width','height','showWordLimit','type'],
   data() {
       return {
           value: '',
           maxlength1: '',
           minLength1: 0,
           style:{
              width:'200px',
              height:'38px'
           },
           placeholder1:'请输入内容'
       }
   },
   watch: { // 监听外部传来的 value prop 的变化，以便同步到内部状态 inputValue 上（可选）
    defaultValue(newVal) {
      console.log(newVal,'newVal');
      this.value = newVal;
    }
  },
   created(){
    // 默认值赋值
    if(this.defaultValue != null){
      this.value = 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>