Browse Source

可输入选项选中自动聚焦

zhouna 5 năm trước cách đây
mục cha
commit
0ae5ae5b41
1 tập tin đã thay đổi với 12 bổ sung5 xóa
  1. 12 5
      src/common/OptionInp.vue

+ 12 - 5
src/common/OptionInp.vue

@@ -1,10 +1,11 @@
 <!-- 带输入框选项 -->
 <template>
   <div :class="['inpbox',{'check':item.select},{'exclu':exclu}]">
-    <span class="prefix" v-if="msg.prefix">{{msg.prefix}}</span>
+    <span class="prefix" v-if="msg.prefix" @click="focusInp">{{msg.prefix}}</span>
     <!-- <div class="inp" @click="preClick"> -->
-      <input :type="msg.type=='number'?'number':'text'" 
+      <input :type="msg.type=='number'?'number':'text'"
               :placeholder="msg.placeholder"
+              ref="inp"
               :style="{'width':!msg.prefix&&!msg.suffix?'90%':'33%'}"
               :disabled="exclu"
               :maxlength="msg.type=='number'?10:''"
@@ -15,7 +16,7 @@
               @focus="focus"
               @input="changeVal">
     <!-- </div> -->
-    <span class="suffix" v-if="msg.suffix">{{msg.suffix}}</span>
+    <span class="suffix" v-if="msg.suffix" @click="focusInp">{{msg.suffix}}</span>
   </div>
 </template>
 <script type="text/javascript">
@@ -37,11 +38,17 @@ import $ from 'jquery';
       this.select = this.item.select;
     },
     methods:{
+      focusInp(){
+        setTimeout(()=>{
+          this.$refs.inp.focus();
+        })
+
+      },
       changeVal(e){
         if(this.msg.type=='number'){//数字键盘
           this.txt = e.target.value=e.target.value.replace(/^\.$/,'')
         }
-        
+
         const newData = Object.assign({},this.part,{value:this.txt});
         this.$emit("updata",newData);
         this.$emit('handleInp',this.txt);
@@ -74,7 +81,7 @@ import $ from 'jquery';
         // const select = this.item.select;
         if(!this.select){//聚焦时自动选中该项
           this.$emit('handleSelec');
-        } 
+        }
       }
     },
     watch:{