feat: input组件示例页面focus适配小程序

pages/component/input/input.uvue

@@ -140,7 +140,7 @@
           <text class="uni-title-text">设置输入框聚焦时光标的位置（点这里）</text>
         </view>
         <view class="input-wrapper">
-          <input ref="input" class="uni-input" value="0123456789" :cursor="cursor" @blur="onCursorBlurChange" />
+          <input ref="input" class="uni-input" value="0123456789" :focus="cursorInputFocus" :cursor="cursor" @blur="onCursorBlurChange" />
         </view>
       </view>
 
@@ -150,7 +150,7 @@
         </view>
         <view class="input-wrapper">
           <input ref="input2" class="uni-input" value="0123456789" :selection-start="selectionStart"
-            :selection-end="selectionEnd" @blur="onSelectionBlurChange" />
+            :selection-end="selectionEnd" :focus="selectionInputFocus" @blur="onSelectionBlurChange" />
         </view>
       </view>
 
@@ -160,7 +160,7 @@
           <switch style="margin-left: 10px" @change="changeCursorColor" :checked="cursor_color == 'red'"></switch>
         </view>
         <view class="input-wrapper">
-          <input id="uni-input-cursor-color" class="uni-input" :cursor-color="cursor_color" value="光标颜色" />
+          <input id="uni-input-cursor-color" class="uni-input" :cursor-color="cursor_color" :focus="cursorColorInputFocus" @blur="cursorColorInputBlur" value="光标颜色" />
         </view>
       </view>
 
@@ -297,10 +297,13 @@
         showClearIcon: false,
         inputClearValue: '',
         showPassword: true,
-        cursor: -1,
+        cursor: -1,
+        cursorInputFocus: false,
         cursor_color: "#3393E2",
+        cursorColorInputFocus: false,
         selectionStart: -1,
         selectionEnd: -1,
+        selectionInputFocus: false,
         inputEventDetail: '',
         focusAndBlurEventDetail: '',
         confirmEventDetail: '',
@@ -331,19 +334,23 @@
         this.onMaxLengthInputValue = event.detail.value
       },
       setCursor: function (cursor : number) {
-        (this.$refs['input'] as UniInputElement).focus();
+        // (this.$refs['input'] as UniInputElement).focus();
+        this.cursorInputFocus = true
         this.cursor = cursor;
       },
       onCursorBlurChange() {
-        this.cursor = 0
+        this.cursor = 0
+        this.cursorInputFocus = false
       },
       setSelection: function (selectionStart : number, selectionEnd : number) {
-        (this.$refs['input2'] as UniInputElement).focus();
+        // (this.$refs['input2'] as UniInputElement).focus();
+        this.selectionInputFocus = true
         this.selectionStart = selectionStart;
         this.selectionEnd = selectionEnd;
       },
       onSelectionBlurChange() {
-        this.selectionEnd = 0;
+        this.selectionEnd = 0;
+        this.selectionInputFocus = false
       },
       clearInput: function (event : UniInputEvent) {
         this.inputClearValue = event.detail.value
@@ -391,8 +398,12 @@
         } else {
           this.cursor_color = "#3393E2"
         }
-        const input = uni.getElementById<UniInputElement>("uni-input-cursor-color")
-        input?.focus()
+        // const input = uni.getElementById<UniInputElement>("uni-input-cursor-color")
+        // input?.focus()
+        this.cursorColorInputFocus = true
+      },
+      cursorColorInputBlur(event : UniInputBlurEvent) {
+        this.cursorColorInputFocus = false
       },
       changeHoldKeyboard(event : UniSwitchChangeEvent) {
         const checked = event.detail.value;