From 6001d8c1bf34156cabcb60bc9c63f80049138d2a Mon Sep 17 00:00:00 2001
From: yurj26 <1816387074@qq.com>
Date: Sat, 17 Jun 2023 16:00:11 +0800
Subject: [PATCH] feat(input): add auto focus

---
 pages/component/input/input.uvue | 67 +++++++++++++++++---------------
 1 file changed, 35 insertions(+), 32 deletions(-)

diff --git a/pages/component/input/input.uvue b/pages/component/input/input.uvue
index baf8aaf2..56a0859d 100644
--- a/pages/component/input/input.uvue
+++ b/pages/component/input/input.uvue
@@ -2,12 +2,12 @@
     <view class="nvue-page-root">
         <page-head :title="title"></page-head>
         <view class="uni-common-mt">
-            <!-- <view class="uni-form-item uni-column">
+            <view class="uni-form-item uni-column">
                 <view class="title"><text class="uni-form-item__title">可自动聚焦的 input</text></view>
                 <view class="uni-input-wrapper">
                     <input class="uni-input" :focus="true" placeholder="自动获得焦点" ref="input"/>
                 </view>
-            </view> -->
+            </view>
             <!-- #ifdef APP-PLUS -->
             <!-- <view v-if="platform==='ios'&&!isNvue" class="uni-form-item uni-column">
                 <view class="title"><text class="uni-form-item__title">隐藏 iOS 软键盘上的导航条</text></view>
@@ -84,20 +84,20 @@
                 <view class="uni-input-wrapper">
                     <input class="uni-input" placeholder-style="color:#F76260" placeholder="占位符字体是红色的" />
                 </view>
-            </view>
-            <view class="uni-form-item uni-column">
-                <view class="title"><text class="uni-form-item__title">带清除按钮的输入框</text></view>
-                <view class="uni-input-wrapper">
-                    <input class="uni-input" placeholder="带清除按钮的输入框" :value="inputClearValue" @input="clearInput" />
-                    <image class="uni-icon" src="/static/icons/clear.png" v-if="showClearIcon" @click="clearIcon"></image>
-                </view>
-            </view> 
-            <view class="uni-form-item uni-column">
-                <view class="title"><text class="uni-form-item__title">可查看密码的输入框</text></view>
-                <view class="uni-input-wrapper">
-                    <input class="uni-input" placeholder="请输入密码" :password="showPassword" />
-                    <image class="uni-icon" :src="!showPassword ? '/static/icons/eye-active.png': '/static/icons/eye.png'" @click="changePassword"></image>
-                </view>
+            </view>
+            <view class="uni-form-item uni-column">
+                <view class="title"><text class="uni-form-item__title">带清除按钮的输入框</text></view>
+                <view class="uni-input-wrapper">
+                    <input class="uni-input" placeholder="带清除按钮的输入框" :value="inputClearValue" @input="clearInput" />
+                    <image class="uni-icon" src="/static/icons/clear.png" v-if="showClearIcon" @click="clearIcon"></image>
+                </view>
+            </view> 
+            <view class="uni-form-item uni-column">
+                <view class="title"><text class="uni-form-item__title">可查看密码的输入框</text></view>
+                <view class="uni-input-wrapper">
+                    <input class="uni-input" placeholder="请输入密码" :password="showPassword" />
+                    <image class="uni-icon" :src="!showPassword ? '/static/icons/eye-active.png': '/static/icons/eye.png'" @click="changePassword"></image>
+                </view>
             </view>
         </view>
     </view>
@@ -114,7 +114,10 @@
                 changeValue: '',
                 showPassword: true
             }
-        },
+        },
+        onReady() {
+          (this.$refs['input'] as INode).focus();
+        },
         methods: {
             onKeyInput: function (event : InputEvent) {
                 this.inputValue = event.detail.value
@@ -124,21 +127,21 @@
                 if (value == '11') {
                     this.changeValue = '2';
                 }
-            },
-            clearInput: function(event: InputEvent) {
-                this.inputClearValue = event.detail.value;
-                if (event.detail.value.length > 0) {
-                    this.showClearIcon = true;
-                } else {
-                    this.showClearIcon = false;
-                }
-            },
-            clearIcon: function() {
-                this.inputClearValue = '';
-                this.showClearIcon = false;
-            },
-            changePassword: function() {
-                this.showPassword = !this.showPassword;
+            },
+            clearInput: function(event: InputEvent) {
+                this.inputClearValue = event.detail.value;
+                if (event.detail.value.length > 0) {
+                    this.showClearIcon = true;
+                } else {
+                    this.showClearIcon = false;
+                }
+            },
+            clearIcon: function() {
+                this.inputClearValue = '';
+                this.showClearIcon = false;
+            },
+            changePassword: function() {
+                this.showPassword = !this.showPassword;
             },
             // hideKeyboard: function(event: InputEvent) {
             //     if (event.detail.value === '123') {
-- 
GitLab