修复input输入框显示默认值无效问题

src/components/GuipInput.vue

@@ -1,25 +1,12 @@
 <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">
+  <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">
+    <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>
@@ -44,24 +31,24 @@
     <span class="unit" v-if="unit">{{ unit }}</span>
   </el-form-item>
 
- </template>
+</template>
 
- <script>
- export default {
+<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'],
+  props: ['value', 'styleObject', 'disabled', 'defaultValue', 'placeholder',
+    'maxlength', 'minLength', 'clear', 'width', 'height', 'showWordLimit',
+    'label', 'type', 'prop', 'rules', 'column', 'addClass', 'desc', 'unit'],
   data() {
     return {
-        inputValue: '',
+      inputValue: this.value || this.defaultValue,
       maxlength1: '',
       minLength1: 0,
-           style:{
-              width:'510px',
-              height:'38px'
+      style: {
+        width: '510px',
+        height: '38px'
       },
-           placeholder1:''
+      placeholder1: ''
     }
   },
   watch: { // 监听外部传来的 value prop 的变化，以便同步到内部状态 inputValue 上（可选）
@@ -69,36 +56,36 @@
     //   console.log(newVal,'newVal');
     //   this.inputValue = newVal;
     // },
-    value(newVal){
+    value(newVal) {
       this.inputValue = newVal;
     }
   },
-   created(){
+  created() {
     // 默认值赋值
-    if(this.defaultValue != null){
-      this.inputValue = this.defaultValue;
-    }
+    // if (this.defaultValue != null) {
+    //   this.inputValue = this.defaultValue;
+    // }
     // 默认提示语
-    if(this.placeholder){
+    if (this.placeholder) {
       this.placeholder1 = this.placeholder;
     }
     // 默认提示语
-    if(this.maxlength){
+    if (this.maxlength) {
       this.maxlength1 = this.maxlength;
     }
     // 默认提示语
-    if(this.minLength){
+    if (this.minLength) {
       this.minLength1 = this.minLength;
     }
   },
-   mounted(){
-       this.$nextTick(()=>{
+  mounted() {
+    this.$nextTick(() => {
       let els = document.querySelectorAll('.el-input');
-        els.forEach(item=>{
-          item.onmouseover= function(){
+      els.forEach(item => {
+        item.onmouseover = function () {
           item.classList.add("hoverclass")
         }
-          item.onmouseout= function(){
+        item.onmouseout = function () {
           item.classList.remove("hoverclass")
         }
         // item.addEventListener('mouseover',function(){
@@ -126,7 +113,7 @@
       // }
     })
   },
-   methods:{
+  methods: {
     // input 事件
     // changeInput(event){
     //   this.$emit('input', event);
@@ -142,14 +129,16 @@
       // }
     },
   }
- }
- </script>
- <style lang="scss" scoped>
- .unit {
+}
+</script>
+<style lang="scss" scoped>
+.unit {
   position: absolute;
-  right: 12px; /* 根据需要调整位置 */
+  right: 12px;
+  /* 根据需要调整位置 */
   top: 50%;
   transform: translateY(-50%);
-  pointer-events: none; /* 防止单位文本影响输入框的点击事件 */
+  pointer-events: none;
+  /* 防止单位文本影响输入框的点击事件 */
 }
 </style>