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" v-bind="$attrs" :placeholder="placeholder1" :disabled="disabled" :maxlength="maxlength1"
      :style="{ width: width, height: height }" :minLength="minLength1" :show-word-limit="showWordLimit"
      @input="$emit('input', $event)" @keydown="handleKeydown" @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: this.value || this.defaultValue,
      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(els&& this.styleObject){
      //   for(var key in this.styleObject){
      //     els.style[key] = this.styleObject[key]
      //   }
      // }
    })
  },
  methods: {
    // input 事件
    // changeInput(event){
    //   this.$emit('input', event);
    // }
    // handleClear(){
    //   console.log('清除---');
    //   this.$emit('clear', '清楚逻辑')
    // }
    handleKeydown(e) {
      console.log(e);
      // if (e.key === '1') {
      e.preventDefault(); // 阻止默认行为
      // }
    },
  }
}
</script>
<style lang="scss" scoped>
.unit {
  position: absolute;
  right: 12px;
  /* 根据需要调整位置 */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  /* 防止单位文本影响输入框的点击事件 */
}
</style>