Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
49631fe6 1 parent 2e21190c

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

Inline Side-by-side
Showing 2 changed files with 14 additions and 4 deletions
...@@ -45,7 +45,6 @@ declare module '@vue/runtime-core' { ...@@ -45,7 +45,6 @@ declare module '@vue/runtime-core' {
45 RouterView: typeof import('vue-router')['RouterView'] 45 RouterView: typeof import('vue-router')['RouterView']
46 RuleField: typeof import('./src/components/RuleField/index.vue')['default'] 46 RuleField: typeof import('./src/components/RuleField/index.vue')['default']
47 SignField: typeof import('./src/components/SignField/index.vue')['default'] 47 SignField: typeof import('./src/components/SignField/index.vue')['default']
48 - 'SignField copy': typeof import('./src/components/SignField copy/index.vue')['default']
49 TableField: typeof import('./src/components/TableField/index.vue')['default'] 48 TableField: typeof import('./src/components/TableField/index.vue')['default']
50 Test: typeof import('./src/components/VideoField/test.vue')['default'] 49 Test: typeof import('./src/components/VideoField/test.vue')['default']
51 TextareaField: typeof import('./src/components/TextareaField/index.vue')['default'] 50 TextareaField: typeof import('./src/components/TextareaField/index.vue')['default']
......
1 <!-- 1 <!--
2 * @Date: 2022-09-14 14:44:30 2 * @Date: 2022-09-14 14:44:30
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-02-01 15:07:15 4 + * @LastEditTime: 2023-04-06 10:08:41
5 * @FilePath: /data-table/src/components/IdentityField/index.vue 5 * @FilePath: /data-table/src/components/IdentityField/index.vue
6 * @Description: 身份证输入控件 6 * @Description: 身份证输入控件
7 --> 7 -->
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
13 </div> 13 </div>
14 <!-- <div v-if="item.component_props.readonly" style="padding: 0.5rem 1rem;">{{ item.value }}</div> --> 14 <!-- <div v-if="item.component_props.readonly" style="padding: 0.5rem 1rem;">{{ item.value }}</div> -->
15 <van-field 15 <van-field
16 + ref="fieldRef"
16 v-model="item.value" 17 v-model="item.value"
17 :id="item.name" 18 :id="item.name"
18 :name="item.name" 19 :name="item.name"
...@@ -20,7 +21,8 @@ ...@@ -20,7 +21,8 @@
20 :rules="rules" 21 :rules="rules"
21 :required="item.component_props.required" 22 :required="item.component_props.required"
22 :disabled="item.component_props.readonly" 23 :disabled="item.component_props.readonly"
23 - readonly 24 + :readonly="!edit_mode"
25 + right-icon="edit" @click-right-icon="clickRightIcon"
24 @touchstart.stop="openKeyboard($event)" 26 @touchstart.stop="openKeyboard($event)"
25 :border="false" 27 :border="false"
26 > 28 >
...@@ -44,6 +46,7 @@ import $ from "jquery"; ...@@ -44,6 +46,7 @@ import $ from "jquery";
44 import { storeToRefs, mainStore } from "@/utils/generatePackage"; 46 import { storeToRefs, mainStore } from "@/utils/generatePackage";
45 import { showSuccessToast, showFailToast } from "vant"; 47 import { showSuccessToast, showFailToast } from "vant";
46 48
49 +
47 const props = defineProps({ 50 const props = defineProps({
48 item: Object, 51 item: Object,
49 }); 52 });
...@@ -71,8 +74,16 @@ watch( ...@@ -71,8 +74,16 @@ watch(
71 } 74 }
72 ); 75 );
73 const readonly = props.item.component_props.readonly; 76 const readonly = props.item.component_props.readonly;
77 +const fieldRef = ref(null);
78 +const edit_mode = ref(false);
79 +const clickRightIcon = () => { // 编辑模式
80 + edit_mode.value = true;
81 + nextTick(() => {
82 + fieldRef.value?.focus();
83 + })
84 +}
74 const openKeyboard = (e) => { 85 const openKeyboard = (e) => {
75 - if (readonly) return false; // 如果为只读，不能设置 86 + if (readonly || e.target.className.indexOf('edit') > 0 || edit_mode.value) return false; // 如果为只读或者编辑模式，不能设置
76 // // 键盘上移动 87 // // 键盘上移动
77 // const target_to_view_height = window.innerHeight - e.target.getBoundingClientRect().y; // 元素到适口高度 88 // const target_to_view_height = window.innerHeight - e.target.getBoundingClientRect().y; // 元素到适口高度
78 // const target_top = document.body.scrollHeight - $(e.target).offset().top; // 元素到正文高度 89 // const target_top = document.body.scrollHeight - $(e.target).offset().top; // 元素到正文高度
......