Merge pull request '修复input输入框显示默认值无效问题' (#48) from zq-slider-menu into master

Reviewed-on: #48

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">
-  <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-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>
@@ -41,92 +28,92 @@
       <!-- <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>
+    <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 上（可选）
+</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){
+    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(()=>{
-        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:{
+  },
+  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);
@@ -138,18 +125,20 @@
     handleKeydown(e) {
       console.log(e);
       // if (e.key === '1') {
-        e.preventDefault(); // 阻止默认行为
+      e.preventDefault(); // 阻止默认行为
       // }
     },
-   }
- }
- </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>