From 7d26ed0e19bf952e7c037b21bfd687759b46e851 Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期二, 25 六月 2024 19:21:33 +0800
Subject: [PATCH] 菜单更新
---
src/views/demo/comp/transition/index.vue | 90 ++++++++++++++++++---------------------------
1 files changed, 36 insertions(+), 54 deletions(-)
diff --git a/src/views/demo/comp/transition/index.vue b/src/views/demo/comp/transition/index.vue
index 71c7ca8..2964cbc 100644
--- a/src/views/demo/comp/transition/index.vue
+++ b/src/views/demo/comp/transition/index.vue
@@ -9,15 +9,15 @@
/>
<a-button type="primary" class="ml-4" @click="start"> start </a-button>
</div>
- <component :is="`${value}Transition`">
+ <component :is="TransitionItem[value]">
<div class="box" v-show="show"></div>
</component>
</PageWrapper>
</template>
-<script lang="ts">
- import { defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+ import { ref } from 'vue';
import { Select } from 'ant-design-vue';
- import { PageWrapper } from '/@/components/Page';
+ import { PageWrapper } from '@/components/Page';
import {
FadeTransition,
ScaleTransition,
@@ -32,59 +32,41 @@
ScaleRotateTransition,
ExpandXTransition,
ExpandTransition,
- } from '/@/components/Transition';
+ } from '@/components/Transition';
- const transitionList = [
- 'Fade',
- 'Scale',
- 'SlideY',
- 'ScrollY',
- 'SlideYReverse',
- 'ScrollYReverse',
- 'SlideX',
- 'ScrollX',
- 'SlideXReverse',
- 'ScrollXReverse',
- 'ScaleRotate',
- 'ExpandX',
- 'Expand',
- ];
- const options = transitionList.map((item) => ({
- label: item,
- value: item,
- key: item,
- }));
+ const TransitionItem = {
+ FadeTransition,
+ ScaleTransition,
+ SlideYTransition,
+ ScrollYTransition,
+ SlideYReverseTransition,
+ ScrollYReverseTransition,
+ SlideXTransition,
+ ScrollXTransition,
+ SlideXReverseTransition,
+ ScrollXReverseTransition,
+ ScaleRotateTransition,
+ ExpandXTransition,
+ ExpandTransition,
+ };
- export default defineComponent({
- components: {
- Select,
- PageWrapper,
- FadeTransition,
- ScaleTransition,
- SlideYTransition,
- ScrollYTransition,
- SlideYReverseTransition,
- ScrollYReverseTransition,
- SlideXTransition,
- ScrollXTransition,
- SlideXReverseTransition,
- ScrollXReverseTransition,
- ScaleRotateTransition,
- ExpandXTransition,
- ExpandTransition,
- },
- setup() {
- const value = ref('Fade');
- const show = ref(true);
- function start() {
- show.value = false;
- setTimeout(() => {
- show.value = true;
- }, 300);
- }
- return { options, value, start, show };
- },
+ const options = Object.keys(TransitionItem).map((item) => {
+ const label = item.replace('Transition', '');
+ return {
+ label,
+ value: item,
+ key: item,
+ };
});
+
+ const value = ref('FadeTransition');
+ const show = ref(true);
+ function start() {
+ show.value = false;
+ setTimeout(() => {
+ show.value = true;
+ }, 300);
+ }
</script>
<style lang="less" scoped>
.box {
--
Gitblit v1.9.3