Hooke / custom_form

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
40d55746 1 parent 17d9c1de

✨ feat: 添加错误滚动功能

Inline Side-by-side
Showing 6 changed files with 25 additions and 12 deletions
1 <!-- 1 <!--
2 * @Date: 2022-08-30 11:34:19 2 * @Date: 2022-08-30 11:34:19
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-04-04 11:03:21 4 + * @LastEditTime: 2023-04-04 15:11:55
5 * @FilePath: /custom_form/src/components/CheckboxField/index.vue 5 * @FilePath: /custom_form/src/components/CheckboxField/index.vue
6 * @Description: 多项选择控件 6 * @Description: 多项选择控件
7 --> 7 -->
...@@ -142,7 +142,7 @@ const validCheckbox = () => { ...@@ -142,7 +142,7 @@ const validCheckbox = () => {
142 return !show_error.value; 142 return !show_error.value;
143 }; 143 };
144 144
145 -defineExpose({ validCheckbox }); 145 +defineExpose({ validCheckbox, id: props.item.key });
146 </script> 146 </script>
147 147
148 <style lang="less"> 148 <style lang="less">
......
1 <!-- 1 <!--
2 * @Date: 2022-08-30 11:34:19 2 * @Date: 2022-08-30 11:34:19
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-04-04 15:00:16 4 + * @LastEditTime: 2023-04-04 15:07:00
5 * @FilePath: /custom_form/src/components/MultiRuleField/index.vue 5 * @FilePath: /custom_form/src/components/MultiRuleField/index.vue
6 * @Description: 多选规则确认控件 6 * @Description: 多选规则确认控件
7 --> 7 -->
...@@ -136,7 +136,7 @@ const validMultiRule= () => { ...@@ -136,7 +136,7 @@ const validMultiRule= () => {
136 return !show_error.value; 136 return !show_error.value;
137 }; 137 };
138 138
139 -defineExpose({ validMultiRule }); 139 +defineExpose({ validMultiRule, id: props.item.key });
140 </script> 140 </script>
141 141
142 <style lang="less"> 142 <style lang="less">
......
1 <!-- 1 <!--
2 * @Date: 2022-08-30 11:34:19 2 * @Date: 2022-08-30 11:34:19
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-04-04 14:58:27 4 + * @LastEditTime: 2023-04-04 15:11:44
5 * @FilePath: /custom_form/src/components/RadioField/index.vue 5 * @FilePath: /custom_form/src/components/RadioField/index.vue
6 * @Description: 单项选择控件 6 * @Description: 单项选择控件
7 --> 7 -->
...@@ -156,7 +156,7 @@ const validRadio = () => { ...@@ -156,7 +156,7 @@ const validRadio = () => {
156 return !show_error.value; 156 return !show_error.value;
157 }; 157 };
158 158
159 -defineExpose({ validRadio }); 159 +defineExpose({ validRadio, id: props.item.key });
160 </script> 160 </script>
161 161
162 <style lang="less"> 162 <style lang="less">
......
1 <!-- 1 <!--
2 * @Date: 2022-08-29 14:31:20 2 * @Date: 2022-08-29 14:31:20
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-04-03 13:31:03 4 + * @LastEditTime: 2023-04-04 15:11:19
5 * @FilePath: /custom_form/src/components/TextField/index.vue 5 * @FilePath: /custom_form/src/components/TextField/index.vue
6 * @Description: 单行文本输入框(微信扫描功能) 6 * @Description: 单行文本输入框(微信扫描功能)
7 --> 7 -->
...@@ -168,7 +168,7 @@ const validInput = () => { ...@@ -168,7 +168,7 @@ const validInput = () => {
168 return !show_error.value; 168 return !show_error.value;
169 }; 169 };
170 170
171 -defineExpose({ validInput }); 171 +defineExpose({ validInput, id: props.item.key });
172 </script> 172 </script>
173 173
174 <style lang="less"> 174 <style lang="less">
......
1 <!-- 1 <!--
2 * @Date: 2022-08-29 14:31:20 2 * @Date: 2022-08-29 14:31:20
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-04-03 14:07:03 4 + * @LastEditTime: 2023-04-04 15:11:32
5 * @FilePath: /custom_form/src/components/TextareaField/index.vue 5 * @FilePath: /custom_form/src/components/TextareaField/index.vue
6 * @Description: 多行文本输入框 6 * @Description: 多行文本输入框
7 --> 7 -->
...@@ -86,7 +86,7 @@ const validTextarea = () => { ...@@ -86,7 +86,7 @@ const validTextarea = () => {
86 return !show_error.value; 86 return !show_error.value;
87 }; 87 };
88 88
89 -defineExpose({ validTextarea }); 89 +defineExpose({ validTextarea, id: props.item.key });
90 </script> 90 </script>
91 91
92 <style lang="less"> 92 <style lang="less">
......
1 <!-- 1 <!--
2 * @Date: 2023-03-24 09:19:27 2 * @Date: 2023-03-24 09:19:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-04-04 14:38:13 4 + * @LastEditTime: 2023-04-04 15:38:07
5 * @FilePath: /custom_form/src/pages/table/index.vue 5 * @FilePath: /custom_form/src/pages/table/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -428,6 +428,7 @@ const validOther = () => { ...@@ -428,6 +428,7 @@ const validOther = () => {
428 let valid = { 428 let valid = {
429 status: true, 429 status: true,
430 key: "", 430 key: "",
431 + id: ''
431 }; 432 };
432 if (input.value) { 433 if (input.value) {
433 // 单行文本 434 // 单行文本
...@@ -436,6 +437,7 @@ const validOther = () => { ...@@ -436,6 +437,7 @@ const validOther = () => {
436 valid = { 437 valid = {
437 status: input.value[index].validInput(), 438 status: input.value[index].validInput(),
438 key: "input", 439 key: "input",
440 + id: multi_rule.value[index].id
439 }; 441 };
440 return false; 442 return false;
441 } 443 }
...@@ -448,6 +450,7 @@ const validOther = () => { ...@@ -448,6 +450,7 @@ const validOther = () => {
448 valid = { 450 valid = {
449 status: textarea.value[index].validTextarea(), 451 status: textarea.value[index].validTextarea(),
450 key: "textarea", 452 key: "textarea",
453 + id: multi_rule.value[index].id
451 }; 454 };
452 return false; 455 return false;
453 } 456 }
...@@ -460,6 +463,7 @@ const validOther = () => { ...@@ -460,6 +463,7 @@ const validOther = () => {
460 valid = { 463 valid = {
461 status: radio.value[index].validRadio(), 464 status: radio.value[index].validRadio(),
462 key: "radio", 465 key: "radio",
466 + id: multi_rule.value[index].id
463 }; 467 };
464 return false; 468 return false;
465 } 469 }
...@@ -472,6 +476,7 @@ const validOther = () => { ...@@ -472,6 +476,7 @@ const validOther = () => {
472 valid = { 476 valid = {
473 status: checkbox.value[index].validCheckbox(), 477 status: checkbox.value[index].validCheckbox(),
474 key: "checkbox", 478 key: "checkbox",
479 + id: multi_rule.value[index].id
475 }; 480 };
476 return false; 481 return false;
477 } 482 }
...@@ -484,6 +489,7 @@ const validOther = () => { ...@@ -484,6 +489,7 @@ const validOther = () => {
484 valid = { 489 valid = {
485 status: multi_rule.value[index].validMultiRule(), 490 status: multi_rule.value[index].validMultiRule(),
486 key: "multi_rule", 491 key: "multi_rule",
492 + id: multi_rule.value[index].id
487 }; 493 };
488 return false; 494 return false;
489 } 495 }
...@@ -592,7 +598,13 @@ const onSubmit = async (values) => { ...@@ -592,7 +598,13 @@ const onSubmit = async (values) => {
592 } 598 }
593 } 599 }
594 } else { 600 } else {
595 - console.warn(validOther().key + "不通过验证"); 601 + console.warn(validOther().id + ' ' + validOther().key + "不通过验证");
602 + if (validOther().id) {
603 + Taro.pageScrollTo({
604 + selector: `#${validOther().id}`,
605 + duration: 300
606 + })
607 + }
596 // // 图片上传控件报错提示 608 // // 图片上传控件报错提示
597 // if (validOther().key === "image_uploader") { 609 // if (validOther().key === "image_uploader") {
598 // showFailToast("图片上传为空"); 610 // showFailToast("图片上传为空");
...@@ -610,6 +622,7 @@ const onSubmit = async (values) => { ...@@ -610,6 +622,7 @@ const onSubmit = async (values) => {
610 background-color: #FAF9DC; 622 background-color: #FAF9DC;
611 min-height: calc(100vh); 623 min-height: calc(100vh);
612 position: relative; 624 position: relative;
625 + overflow: auto;
613 } 626 }
614 .table-title { 627 .table-title {
615 padding: 30px; 628 padding: 30px;
......