✨ feat(身份证控件): 新增编辑按钮可以进行文字直接输入

@@ -45,7 +45,6 @@ declare module '@vue/runtime-core' {
     RouterView: typeof import('vue-router')['RouterView']
     RuleField: typeof import('./src/components/RuleField/index.vue')['default']
     SignField: typeof import('./src/components/SignField/index.vue')['default']
-    'SignField copy': typeof import('./src/components/SignField copy/index.vue')['default']
     TableField: typeof import('./src/components/TableField/index.vue')['default']
     Test: typeof import('./src/components/VideoField/test.vue')['default']
     TextareaField: typeof import('./src/components/TextareaField/index.vue')['default']

 <!--
  * @Date: 2022-09-14 14:44:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-02-01 15:07:15
+ * @LastEditTime: 2023-04-06 10:08:41
  * @FilePath: /data-table/src/components/IdentityField/index.vue
  * @Description: 身份证输入控件
 -->
@@ -13,6 +13,7 @@
     </div>
     <!-- <div v-if="item.component_props.readonly" style="padding: 0.5rem 1rem;">{{ item.value }}</div> -->
     <van-field
+      ref="fieldRef"
       v-model="item.value"
       :id="item.name"
       :name="item.name"
@@ -20,7 +21,8 @@
       :rules="rules"
       :required="item.component_props.required"
       :disabled="item.component_props.readonly"
-      readonly
+      :readonly="!edit_mode"
+      right-icon="edit" @click-right-icon="clickRightIcon"
       @touchstart.stop="openKeyboard($event)"
       :border="false"
     >
@@ -44,6 +46,7 @@ import $ from "jquery";
 import { storeToRefs, mainStore } from "@/utils/generatePackage";
 import { showSuccessToast, showFailToast } from "vant";
 
+
 const props = defineProps({
   item: Object,
 });
@@ -71,8 +74,16 @@ watch(
   }
 );
 const readonly = props.item.component_props.readonly;
+const fieldRef = ref(null);
+const edit_mode = ref(false);
+const clickRightIcon = () => { // 编辑模式
+  edit_mode.value = true;
+  nextTick(() => {
+    fieldRef.value?.focus();
+  })
+}
 const openKeyboard = (e) => {
-  if (readonly) return false; // 如果为只读，不能设置
+  if (readonly || e.target.className.indexOf('edit') > 0 || edit_mode.value) return false; // 如果为只读或者编辑模式，不能设置
   // // 键盘上移动
   // const target_to_view_height = window.innerHeight - e.target.getBoundingClientRect().y; // 元素到适口高度
   // const target_top = document.body.scrollHeight - $(e.target).offset().top; // 元素到正文高度