From 2069d53e9be24adec3c8d6717fd7317555bd9a52 Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期二, 02 七月 2024 23:02:51 +0800
Subject: [PATCH] 高级表单优化
---
src/views/demo/comp/modal/index.vue | 157 ++++++++++++++++++++++++++++------------------------
1 files changed, 84 insertions(+), 73 deletions(-)
diff --git a/src/views/demo/comp/modal/index.vue b/src/views/demo/comp/modal/index.vue
index 7e2af34..f63635c 100644
--- a/src/views/demo/comp/modal/index.vue
+++ b/src/views/demo/comp/modal/index.vue
@@ -11,103 +11,114 @@
<Alert message="鍐呭鍚屾椂鍚屾椂鏄剧ず闅愯棌" show-icon />
<a-button type="primary" class="my-4" @click="openModal2"> 鎵撳紑寮圭獥 </a-button>
+
<Alert message="鑷�傚簲楂樺害" show-icon />
- <a-button type="primary" class="my-4" @click="openModal3"> 鎵撳紑寮圭獥 </a-button>
+ <Space>
+ <a-button type="primary" class="my-4" @click="openModal3"> 鎵撳紑寮圭獥 </a-button>
+ <a-button type="primary" class="my-4" @click="openModal5"> 鎵撳紑寮圭獥锛圔asicTable锛� </a-button>
+ </Space>
<Alert message="鍐呭鏁版嵁浜や簰" show-icon />
<a-button type="primary" class="my-4" @click="send"> 鎵撳紑寮圭獥骞朵紶閫掓暟鎹� </a-button>
<Alert message="浣跨敤鍔ㄦ�佺粍浠剁殑鏂瑰紡鍦ㄩ〉闈㈠唴浣跨敤澶氫釜寮圭獥" show-icon />
- <a-space>
+ <Space>
<a-button type="primary" class="my-4" @click="openTargetModal(1)"> 鎵撳紑寮圭獥1 </a-button>
<a-button type="primary" class="my-4" @click="openTargetModal(2)"> 鎵撳紑寮圭獥2 </a-button>
<a-button type="primary" class="my-4" @click="openTargetModal(3)"> 鎵撳紑寮圭獥3 </a-button>
<a-button type="primary" class="my-4" @click="openTargetModal(4)"> 鎵撳紑寮圭獥4 </a-button>
- </a-space>
+ </Space>
- <component :is="currentModal" v-model:visible="modalVisible" :userData="userData" />
+ <Alert
+ message="浣跨敤鍑芥暟鏂瑰紡鍒涘缓Prompt锛岄�傚悎杈冧负绠�鍗曠殑琛ㄥ崟鍐呭锛屽鏋滈渶瑕佸脊鍑鸿緝涓哄鏉傜殑鍐呭锛岃浣跨敤 Modal."
+ show-icon
+ />
+ <a-button type="primary" class="my-4" @click="handleCreatePrompt"> Prompt </a-button>
+
+ <component
+ v-if="currentModal"
+ :is="currentModal"
+ v-model:open="modalOpen"
+ :userData="userData"
+ />
<Modal1 @register="register1" :minHeight="100" />
<Modal2 @register="register2" />
<Modal3 @register="register3" />
<Modal4 @register="register4" />
+ <Modal5 @register="register5" />
</PageWrapper>
</template>
-<script lang="ts">
- import { defineComponent, shallowRef, ComponentOptions, ref, nextTick } from 'vue';
- import { Alert, Space } from 'ant-design-vue';
- import { useModal } from '/@/components/Modal';
+<script lang="ts" setup>
+ import { shallowRef, ComponentOptions, ref, nextTick } from 'vue';
+ import { Alert, Space, message } from 'ant-design-vue';
+ import { useModal } from '@/components/Modal';
import Modal1 from './Modal1.vue';
import Modal2 from './Modal2.vue';
import Modal3 from './Modal3.vue';
import Modal4 from './Modal4.vue';
- import { PageWrapper } from '/@/components/Page';
+ import Modal5 from './Modal5.vue';
+ import { PageWrapper } from '@/components/Page';
+ import { type Nullable } from '@vben/types';
+ import { createPrompt } from '@/components/Prompt';
- export default defineComponent({
- components: { Alert, Modal1, Modal2, Modal3, Modal4, PageWrapper, ASpace: Space },
- setup() {
- const currentModal = shallowRef<Nullable<ComponentOptions>>(null);
- const [register1, { openModal: openModal1 }] = useModal();
- const [register2, { openModal: openModal2 }] = useModal();
- const [register3, { openModal: openModal3 }] = useModal();
- const [register4, { openModal: openModal4 }] = useModal();
- const modalVisible = ref<Boolean>(false);
- const userData = ref<any>(null);
+ const currentModal = shallowRef<Nullable<ComponentOptions>>(null);
+ const [register1, { openModal: openModal1 }] = useModal();
+ const [register2, { openModal: openModal2 }] = useModal();
+ const [register3, { openModal: openModal3 }] = useModal();
+ const [register4, { openModal: openModal4 }] = useModal();
+ const [register5, { openModal: openModal5 }] = useModal();
+ const modalOpen = ref<Boolean>(false);
+ const userData = ref<any>(null);
- function send() {
- openModal4(true, {
- data: 'content',
- info: 'Info',
- });
- }
- function openModalLoading() {
- openModal1(true);
- // setModalProps({ loading: true });
- // setTimeout(() => {
- // setModalProps({ loading: false });
- // }, 2000);
- }
+ function send() {
+ openModal4(true, {
+ data: 'content',
+ info: 'Info',
+ });
+ }
+ function openModalLoading() {
+ openModal1(true);
+ // setModalProps({ loading: true });
+ // setTimeout(() => {
+ // setModalProps({ loading: false });
+ // }, 2000);
+ }
- function openTargetModal(index) {
- switch (index) {
- case 1:
- currentModal.value = Modal1;
- break;
- case 2:
- currentModal.value = Modal2;
- break;
- case 3:
- currentModal.value = Modal3;
- break;
- default:
- currentModal.value = Modal4;
- break;
- }
- nextTick(() => {
- // `useModal` not working with dynamic component
- // passing data through `userData` prop
- userData.value = { data: Math.random(), info: 'Info222' };
- // open the target modal
- modalVisible.value = true;
- });
- }
+ function openTargetModal(index: number) {
+ switch (index) {
+ case 1:
+ currentModal.value = Modal1 as ComponentOptions;
+ break;
+ case 2:
+ currentModal.value = Modal2 as ComponentOptions;
+ break;
+ case 3:
+ currentModal.value = Modal3 as ComponentOptions;
+ break;
+ default:
+ currentModal.value = Modal4 as ComponentOptions;
+ break;
+ }
+ nextTick(() => {
+ // `useModal` not working with dynamic component
+ // passing data through `userData` prop
+ userData.value = { data: Math.random(), info: 'Info222' };
+ // open the target modal
+ modalOpen.value = true;
+ });
+ }
- return {
- register1,
- openModal1,
- register2,
- openModal2,
- register3,
- openModal3,
- register4,
- openModal4,
- modalVisible,
- userData,
- openTargetModal,
- send,
- currentModal,
- openModalLoading,
- };
- },
- });
+ function handleCreatePrompt() {
+ createPrompt({
+ title: '璇疯緭鍏ラ偖绠�',
+ required: true,
+ label: '閭',
+ defaultValue: '榛樿閭',
+ onOK: async (email: string) => {
+ message.success('濉啓鐨勯偖绠卞湴鍧�涓�' + email);
+ },
+ inputType: 'Input',
+ });
+ }
</script>
--
Gitblit v1.9.3