MyInput.vue

src/components/MyInput.vue

@@ -1,29 +1,33 @@
 <template>
-  <van-field
-    ref="input"
-    v-model="value"
+  <van-field v-if="'number' === props.type"
+    ref="input" type="number"
     readonly
+    v-model="value"
     :formatter="props.formatter"
     :class="props.class"
-    :type="props.type"
     @click.stop="actionInputClick"
   ></van-field>
 
-  <template v-if="keyboardVisible">
-    <van-number-keyboard v-if="'number' === props.type" 
-      v-model="value" 
-      :show="true" 
-      :title="value"
-      :theme="props.theme"
-      :close-button-text="props.closeText"
-      @input="actionKeyBoardInput" 
-      @blur="actionKeyBoardBlur"
-      @close="actionKeyBoardClose"
-    ></van-number-keyboard>
-  </template>
+  <van-field v-if="'text' === props.type"
+    ref="input" type="text"
+    v-model="value"
+    :formatter="props.formatter"
+    :placeholder="props.placeholder"
+  ></van-field>
+
+  <van-number-keyboard v-if="'number' === props.type && keyboardVisible" 
+    v-model="value" 
+    :show="true" 
+    :title="value"
+    :theme="props.theme"
+    :close-button-text="props.closeText"
+    @input="actionKeyBoardInput" 
+    @blur="actionKeyBoardBlur"
+    @close="actionKeyBoardClose"
+  ></van-number-keyboard>
 </template>
 <script setup>
-import { nextTick, ref, watch } from 'vue';
+import { nextTick, onMounted, ref, watch } from 'vue';
 /** @var {Function} */
 const emits = defineEmits(['update:value','done']);
 /** @var {Object} */
@@ -40,6 +44,7 @@ const props = defineProps({
     theme : { type: String, default: ''},
     // 关闭按钮文本
     closeText : { type: String, default: ''},
+    placeholder : {type:String, default:''} // 占位文本
 });
 /** @var {String} */
 const value = ref(props.value);
@@ -51,8 +56,33 @@ const isFirstClick = ref(true);
 const input = ref(null);
 /** @var {String} */
 let originValue = null;
+/** @var {HtmlElem} */
+let textInputElem = null;
 // 监听外部值变化
-watch(() => props.value, (val) => value.value = val);
+watch(() => props.value, handlePropValueChange);
+// on mounted
+onMounted(mounted);
+
+// mounted
+function mounted() {
+    if( 'text' === props.type ) {
+        let textInputElem = input.value.$el.querySelector('input');
+        $(textInputElem).virtualkeyboard();
+        textInputElem.classList.add(props.class);
+        textInputElem.addEventListener('input', () => {
+            emits('update:value', textInputElem.value);
+        });
+        textInputElem.value = props.value;
+    }
+}
+
+// handle prop value change
+function handlePropValueChange( val ) {
+    value.value = val;
+    if ( 'text' === props.type && null !== textInputElem ) {
+        textInputElem.value = val;
+    }
+}
 
 // 输入框点击
 async function actionInputClick() {
@@ -60,8 +90,9 @@ async function actionInputClick() {
     isFirstClick.value = true;
     keyboardVisible.value = true;
     await nextTick();
-    input.value.$el.querySelector('input').select();
-    input.value.$el.querySelector('input').focus();
+    let inputElem = input.value.$el.querySelector('input');
+    inputElem.select();
+    inputElem.focus();
 }
 
 // 键盘输入