From 969725647117eb7ca148b2e8cfa9ec8b5eb432fa Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期二, 22 十月 2024 11:04:10 +0800
Subject: [PATCH] 工艺缓存优化
---
src/views/demo/page/form/step/index.vue | 94 ++++++++++++++++++----------------------------
1 files changed, 37 insertions(+), 57 deletions(-)
diff --git a/src/views/demo/page/form/step/index.vue b/src/views/demo/page/form/step/index.vue
index a3a24ca..06825d5 100644
--- a/src/views/demo/page/form/step/index.vue
+++ b/src/views/demo/page/form/step/index.vue
@@ -6,11 +6,11 @@
contentClass="p-4"
>
<div class="step-form-form">
- <a-steps :current="current">
- <a-step title="濉啓杞处淇℃伅" />
- <a-step title="纭杞处淇℃伅" />
- <a-step title="瀹屾垚" />
- </a-steps>
+ <Steps :current="current">
+ <Steps.Step title="濉啓杞处淇℃伅" />
+ <Steps.Step title="纭杞处淇℃伅" />
+ <Steps.Step title="瀹屾垚" />
+ </Steps>
</div>
<div class="mt-5">
<Step1 @next="handleStep1Next" v-show="current === 0" />
@@ -18,70 +18,50 @@
@prev="handleStepPrev"
@next="handleStep2Next"
v-show="current === 1"
- v-if="initSetp2"
+ v-if="state.initStep2"
/>
- <Step3 v-show="current === 2" @redo="handleRedo" v-if="initSetp3" />
+ <Step3 v-show="current === 2" @redo="handleRedo" v-if="state.initStep3" />
</div>
</PageWrapper>
</template>
-<script lang="ts">
- import { defineComponent, ref, reactive, toRefs } from 'vue';
+<script lang="ts" setup>
+ import { ref, reactive } from 'vue';
import Step1 from './Step1.vue';
import Step2 from './Step2.vue';
import Step3 from './Step3.vue';
- import { PageWrapper } from '/@/components/Page';
+ import { PageWrapper } from '@/components/Page';
import { Steps } from 'ant-design-vue';
- export default defineComponent({
- name: 'FormStepPage',
- components: {
- Step1,
- Step2,
- Step3,
- PageWrapper,
- [Steps.name]: Steps,
- [Steps.Step.name]: Steps.Step,
- },
- setup() {
- const current = ref(0);
+ defineOptions({ name: 'FormStepPage' });
- const state = reactive({
- initSetp2: false,
- initSetp3: false,
- });
+ const current = ref(0);
- function handleStep1Next(step1Values: any) {
- current.value++;
- state.initSetp2 = true;
- console.log(step1Values);
- }
-
- function handleStepPrev() {
- current.value--;
- }
-
- function handleStep2Next(step2Values: any) {
- current.value++;
- state.initSetp3 = true;
- console.log(step2Values);
- }
-
- function handleRedo() {
- current.value = 0;
- state.initSetp2 = false;
- state.initSetp3 = false;
- }
-
- return {
- current,
- handleStep1Next,
- handleStep2Next,
- handleRedo,
- handleStepPrev,
- ...toRefs(state),
- };
- },
+ const state = reactive({
+ initStep2: false,
+ initStep3: false,
});
+
+ function handleStep1Next(step1Values: any) {
+ current.value++;
+ state.initStep2 = true;
+ console.log(step1Values);
+ }
+
+ function handleStepPrev() {
+ current.value--;
+ }
+
+ function handleStep2Next(step2Values: any) {
+ current.value++;
+ state.initStep3 = true;
+ console.log(step2Values);
+ }
+
+ function handleRedo() {
+ current.value = 0;
+ state.initStep2 = false;
+ state.initStep3 = false;
+ }
</script>
<style lang="less" scoped>
.step-form-content {
--
Gitblit v1.9.3