Commit 37f6660c574f0cf8b432f66b67062c3bb0314d5c
1 parent
2f99892d
perf: code optimization
Showing
18 changed files
with
136 additions
and
219 deletions
build/config/themeConfig.ts
... | ... | @@ -2,6 +2,8 @@ import { generate } from '@ant-design/colors'; |
2 | 2 | |
3 | 3 | export const primaryColor = '#0960bd'; |
4 | 4 | |
5 | +export const borderColorBase = '#d9d9d9'; | |
6 | + | |
5 | 7 | export const themeMode = 'light'; |
6 | 8 | |
7 | 9 | export type ThemeMode = 'dark' | 'light'; |
... | ... | @@ -97,7 +99,7 @@ export function generateModifyVars() { |
97 | 99 | 'text-color-secondary': 'rgba(0, 0, 0, 0.45)', // Subtext color |
98 | 100 | 'font-size-base': '14px', // Main font size |
99 | 101 | 'box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)', // Floating shadow |
100 | - 'border-color-base': '#d9d9d9', // Border color, | |
102 | + 'border-color-base': borderColorBase, // Border color, | |
101 | 103 | 'border-radius-base': '2px', // Component/float fillet |
102 | 104 | 'link-color': primary, // Link color |
103 | 105 | }; | ... | ... |
package.json
... | ... | @@ -34,7 +34,7 @@ |
34 | 34 | "@iconify/iconify": "^2.0.0-rc.6", |
35 | 35 | "@vueuse/core": "^4.6.2", |
36 | 36 | "@zxcvbn-ts/core": "^0.3.0", |
37 | - "ant-design-vue": "2.1.1", | |
37 | + "ant-design-vue": "^2.1.2", | |
38 | 38 | "apexcharts": "^3.26.0", |
39 | 39 | "axios": "^0.21.1", |
40 | 40 | "crypto-js": "^4.0.0", |
... | ... | @@ -47,7 +47,7 @@ |
47 | 47 | "qrcode": "^1.4.4", |
48 | 48 | "sortablejs": "^1.13.0", |
49 | 49 | "vditor": "^3.8.4", |
50 | - "vue": "^3.0.9", | |
50 | + "vue": "3.0.7", | |
51 | 51 | "vue-i18n": "^9.0.0", |
52 | 52 | "vue-router": "^4.0.5", |
53 | 53 | "vue-types": "^3.0.2", |
... | ... | @@ -75,7 +75,7 @@ |
75 | 75 | "@vitejs/plugin-legacy": "^1.3.2", |
76 | 76 | "@vitejs/plugin-vue": "^1.2.0", |
77 | 77 | "@vitejs/plugin-vue-jsx": "^1.1.2", |
78 | - "@vue/compiler-sfc": "^3.0.9", | |
78 | + "@vue/compiler-sfc": "3.0.7", | |
79 | 79 | "autoprefixer": "^10.2.5", |
80 | 80 | "body-parser": "^1.19.0", |
81 | 81 | "commitizen": "^4.2.3", |
... | ... | @@ -112,11 +112,11 @@ |
112 | 112 | "vite-plugin-imagemin": "^0.2.9", |
113 | 113 | "vite-plugin-mock": "^2.4.0", |
114 | 114 | "vite-plugin-purge-icons": "^0.7.0", |
115 | - "vite-plugin-pwa": "^0.6.3", | |
116 | - "vite-plugin-style-import": "^0.9.0", | |
115 | + "vite-plugin-pwa": "^0.6.4", | |
116 | + "vite-plugin-style-import": "^0.9.1", | |
117 | 117 | "vite-plugin-svg-icons": "^0.4.0", |
118 | 118 | "vite-plugin-theme": "^0.5.0", |
119 | - "vite-plugin-windicss": "0.10.2", | |
119 | + "vite-plugin-windicss": "0.10.4", | |
120 | 120 | "vue-eslint-parser": "^7.6.0" |
121 | 121 | }, |
122 | 122 | "resolutions": { | ... | ... |
src/components/Basic/src/BasicTitle.vue
1 | 1 | <template> |
2 | - <span :class="[prefixCls, { 'show-span': span && $slots.default }]"> | |
2 | + <span :class="getClass"> | |
3 | 3 | <slot></slot> |
4 | 4 | <BasicHelp :class="`${prefixCls}__help`" v-if="helpMessage" :text="helpMessage" /> |
5 | 5 | </span> |
... | ... | @@ -7,7 +7,7 @@ |
7 | 7 | <script lang="ts"> |
8 | 8 | import type { PropType } from 'vue'; |
9 | 9 | |
10 | - import { defineComponent } from 'vue'; | |
10 | + import { defineComponent, computed } from 'vue'; | |
11 | 11 | import BasicHelp from './BasicHelp.vue'; |
12 | 12 | |
13 | 13 | import { useDesign } from '/@/hooks/web/useDesign'; |
... | ... | @@ -23,10 +23,17 @@ |
23 | 23 | default: '', |
24 | 24 | }, |
25 | 25 | span: propTypes.bool, |
26 | + normal: propTypes.bool.def(false), | |
26 | 27 | }, |
27 | - setup() { | |
28 | + setup(props, { slots }) { | |
28 | 29 | const { prefixCls } = useDesign('basic-title'); |
29 | - return { prefixCls }; | |
30 | + | |
31 | + const getClass = computed(() => [ | |
32 | + prefixCls, | |
33 | + { [`${prefixCls}-show-span`]: props.span && slots.default }, | |
34 | + { [`${prefixCls}-normal`]: props.normal }, | |
35 | + ]); | |
36 | + return { prefixCls, getClass }; | |
30 | 37 | }, |
31 | 38 | }); |
32 | 39 | </script> |
... | ... | @@ -38,13 +45,18 @@ |
38 | 45 | display: flex; |
39 | 46 | padding-left: 7px; |
40 | 47 | font-size: 16px; |
41 | - font-weight: 700; | |
48 | + font-weight: 500; | |
42 | 49 | line-height: 24px; |
43 | 50 | color: @text-color-base; |
44 | 51 | cursor: pointer; |
45 | 52 | user-select: none; |
46 | 53 | |
47 | - &.show-span::before { | |
54 | + &-normal { | |
55 | + font-size: 14px; | |
56 | + font-weight: normal; | |
57 | + } | |
58 | + | |
59 | + &-show-span::before { | |
48 | 60 | position: absolute; |
49 | 61 | top: 4px; |
50 | 62 | left: 0; | ... | ... |
src/components/ClickOutSide/src/index.vue
src/components/Container/src/LazyContainer.vue
1 | 1 | <template> |
2 | 2 | <transition-group |
3 | - :class="prefixCls" | |
3 | + class="h-full w-full" | |
4 | 4 | v-bind="$attrs" |
5 | 5 | ref="elRef" |
6 | 6 | :name="transitionName" |
... | ... | @@ -25,7 +25,6 @@ |
25 | 25 | import { useTimeoutFn } from '/@/hooks/core/useTimeout'; |
26 | 26 | import { useIntersectionObserver } from '/@/hooks/event/useIntersectionObserver'; |
27 | 27 | import { propTypes } from '/@/utils/propTypes'; |
28 | - import { useDesign } from '/@/hooks/web/useDesign'; | |
29 | 28 | |
30 | 29 | interface State { |
31 | 30 | isInit: boolean; |
... | ... | @@ -72,8 +71,6 @@ |
72 | 71 | intersectionObserverInstance: null, |
73 | 72 | }); |
74 | 73 | |
75 | - const { prefixCls } = useDesign('lazy-container'); | |
76 | - | |
77 | 74 | onMounted(() => { |
78 | 75 | immediateInit(); |
79 | 76 | initIntersectionObserver(); |
... | ... | @@ -133,17 +130,8 @@ |
133 | 130 | } |
134 | 131 | return { |
135 | 132 | elRef, |
136 | - prefixCls, | |
137 | 133 | ...toRefs(state), |
138 | 134 | }; |
139 | 135 | }, |
140 | 136 | }); |
141 | 137 | </script> |
142 | -<style lang="less"> | |
143 | - @prefix-cls: ~'@{namespace}-lazy-container'; | |
144 | - | |
145 | - .@{prefix-cls} { | |
146 | - width: 100%; | |
147 | - height: 100%; | |
148 | - } | |
149 | -</style> | ... | ... |
src/components/Container/src/ScrollContainer.vue
... | ... | @@ -12,18 +12,21 @@ |
12 | 12 | |
13 | 13 | export default defineComponent({ |
14 | 14 | name: 'ScrollContainer', |
15 | - // inheritAttrs: false, | |
16 | 15 | components: { Scrollbar }, |
17 | 16 | setup() { |
18 | 17 | const scrollbarRef = ref<Nullable<ScrollbarType>>(null); |
19 | 18 | |
20 | 19 | function scrollTo(to: number, duration = 500) { |
21 | 20 | const scrollbar = unref(scrollbarRef); |
22 | - if (!scrollbar) return; | |
21 | + if (!scrollbar) { | |
22 | + return; | |
23 | + } | |
23 | 24 | |
24 | 25 | nextTick(() => { |
25 | 26 | const wrap = unref(scrollbar.wrap); |
26 | - if (!wrap) return; | |
27 | + if (!wrap) { | |
28 | + return; | |
29 | + } | |
27 | 30 | const { start } = useScrollTo({ |
28 | 31 | el: wrap, |
29 | 32 | to, |
... | ... | @@ -35,17 +38,23 @@ |
35 | 38 | |
36 | 39 | function getScrollWrap() { |
37 | 40 | const scrollbar = unref(scrollbarRef); |
38 | - if (!scrollbar) return null; | |
41 | + if (!scrollbar) { | |
42 | + return null; | |
43 | + } | |
39 | 44 | return scrollbar.wrap; |
40 | 45 | } |
41 | 46 | |
42 | 47 | function scrollBottom() { |
43 | 48 | const scrollbar = unref(scrollbarRef); |
44 | - if (!scrollbar) return; | |
49 | + if (!scrollbar) { | |
50 | + return; | |
51 | + } | |
45 | 52 | |
46 | 53 | nextTick(() => { |
47 | 54 | const wrap = unref(scrollbar.wrap); |
48 | - if (!wrap) return; | |
55 | + if (!wrap) { | |
56 | + return; | |
57 | + } | |
49 | 58 | const scrollHeight = wrap.scrollHeight as number; |
50 | 59 | const { start } = useScrollTo({ |
51 | 60 | el: wrap, | ... | ... |
src/components/Container/src/collapse/CollapseContainer.vue
1 | 1 | <template> |
2 | - <div :class="['p-2', prefixCls]"> | |
2 | + <div :class="prefixCls"> | |
3 | 3 | <CollapseHeader |
4 | 4 | v-bind="getBindValues" |
5 | 5 | :prefixCls="prefixCls" |
6 | 6 | :show="show" |
7 | 7 | @expand="handleExpand" |
8 | - :class="show ? 'mb-3' : ''" | |
9 | 8 | > |
10 | 9 | <template #title> |
11 | 10 | <slot name="title"></slot> |
12 | 11 | </template> |
13 | 12 | </CollapseHeader> |
14 | 13 | |
15 | - <CollapseTransition :enable="canExpan"> | |
16 | - <Skeleton v-if="loading" /> | |
17 | - <div :class="`${prefixCls}__body`" v-else v-show="show"> | |
18 | - <LazyContainer :timeout="lazyTime" v-if="lazy"> | |
14 | + <div class="p-2"> | |
15 | + <CollapseTransition :enable="canExpan"> | |
16 | + <Skeleton v-if="loading" :active="active" /> | |
17 | + <div :class="`${prefixCls}__body`" v-else v-show="show"> | |
19 | 18 | <slot></slot> |
20 | - <template #skeleton> | |
21 | - <slot name="lazySkeleton"></slot> | |
22 | - </template> | |
23 | - </LazyContainer> | |
24 | - <slot v-else></slot> | |
25 | - </div> | |
26 | - </CollapseTransition> | |
19 | + </div> | |
20 | + </CollapseTransition> | |
21 | + </div> | |
27 | 22 | </div> |
28 | 23 | </template> |
29 | 24 | <script lang="ts"> |
... | ... | @@ -33,9 +28,8 @@ |
33 | 28 | |
34 | 29 | // component |
35 | 30 | import { Skeleton } from 'ant-design-vue'; |
36 | - import { CollapseTransition } from '/@/components/Transition/index'; | |
31 | + import { CollapseTransition } from '/@/components/Transition'; | |
37 | 32 | import CollapseHeader from './CollapseHeader.vue'; |
38 | - import LazyContainer from '../LazyContainer.vue'; | |
39 | 33 | |
40 | 34 | import { triggerWindowResize } from '/@/utils/event'; |
41 | 35 | // hook |
... | ... | @@ -47,7 +41,6 @@ |
47 | 41 | name: 'CollapseContainer', |
48 | 42 | components: { |
49 | 43 | Skeleton, |
50 | - LazyContainer, | |
51 | 44 | CollapseHeader, |
52 | 45 | CollapseTransition, |
53 | 46 | }, |
... | ... | @@ -63,9 +56,8 @@ |
63 | 56 | // Whether to trigger window.resize when expanding and contracting, |
64 | 57 | // Can adapt to tables and forms, when the form shrinks, the form triggers resize to adapt to the height |
65 | 58 | triggerWindowResize: propTypes.bool, |
66 | - loading: propTypes.bool, | |
67 | - // Delayed loading | |
68 | - lazy: propTypes.bool, | |
59 | + loading: propTypes.bool.def(false), | |
60 | + active: propTypes.bool.def(true), | |
69 | 61 | // Delayed loading time |
70 | 62 | lazyTime: propTypes.number.def(0), |
71 | 63 | }, |
... | ... | @@ -109,9 +101,9 @@ |
109 | 101 | &__header { |
110 | 102 | display: flex; |
111 | 103 | height: 32px; |
112 | - // margin-bottom: 10px; | |
113 | 104 | justify-content: space-between; |
114 | 105 | align-items: center; |
106 | + border-bottom: 1px solid @border-color-light; | |
115 | 107 | } |
116 | 108 | |
117 | 109 | &__action { | ... | ... |
src/components/Container/src/collapse/CollapseHeader.vue
1 | 1 | <template> |
2 | - <div :class="[`${prefixCls}__header`, $attrs.class]"> | |
3 | - <BasicTitle :helpMessage="helpMessage"> | |
2 | + <div :class="[`${prefixCls}__header px-2 py-5`, $attrs.class]"> | |
3 | + <BasicTitle :helpMessage="helpMessage" normal> | |
4 | 4 | <template v-if="title"> |
5 | 5 | {{ title }} |
6 | 6 | </template> | ... | ... |
src/components/Scrollbar/src/index.vue
... | ... | @@ -111,9 +111,9 @@ |
111 | 111 | onBeforeUnmount(() => { |
112 | 112 | if (props.native) return; |
113 | 113 | if (!props.noresize) { |
114 | - removeResizeListener(unref(resize), update); | |
115 | - removeResizeListener(unref(wrap), update); | |
116 | - removeEventListener('resize', update); | |
114 | + // removeResizeListener(unref(resize), update); | |
115 | + // removeResizeListener(unref(wrap), update); | |
116 | + // removeEventListener('resize', update); | |
117 | 117 | } |
118 | 118 | }); |
119 | 119 | ... | ... |
src/components/SimpleMenu/src/components/SubMenuItem.vue
... | ... | @@ -9,11 +9,11 @@ |
9 | 9 | :class="`${prefixCls}-submenu-title-icon`" |
10 | 10 | /> |
11 | 11 | </div> |
12 | - <MenuCollapseTransition> | |
12 | + <CollapseTransition> | |
13 | 13 | <ul :class="prefixCls" v-show="opened"> |
14 | 14 | <slot></slot> |
15 | 15 | </ul> |
16 | - </MenuCollapseTransition> | |
16 | + </CollapseTransition> | |
17 | 17 | </template> |
18 | 18 | |
19 | 19 | <Popover |
... | ... | @@ -72,7 +72,7 @@ |
72 | 72 | import { propTypes } from '/@/utils/propTypes'; |
73 | 73 | import { useMenuItem } from './useMenu'; |
74 | 74 | import { useSimpleRootMenuContext } from './useSimpleMenuContext'; |
75 | - import MenuCollapseTransition from './MenuCollapseTransition.vue'; | |
75 | + import { CollapseTransition } from '/@/components/Transition'; | |
76 | 76 | import Icon from '/@/components/Icon'; |
77 | 77 | import { Popover } from 'ant-design-vue'; |
78 | 78 | import { isBoolean, isObject } from '/@/utils/is'; |
... | ... | @@ -83,7 +83,7 @@ |
83 | 83 | name: 'SubMenu', |
84 | 84 | components: { |
85 | 85 | Icon, |
86 | - MenuCollapseTransition, | |
86 | + CollapseTransition, | |
87 | 87 | Popover, |
88 | 88 | }, |
89 | 89 | props: { | ... | ... |
src/components/SimpleMenu/src/components/menu.less
... | ... | @@ -101,10 +101,10 @@ |
101 | 101 | list-style: none; |
102 | 102 | outline: none; |
103 | 103 | |
104 | - .collapse-transition { | |
105 | - transition: @transition-time height ease-in-out, @transition-time padding-top ease-in-out, | |
106 | - @transition-time padding-bottom ease-in-out; | |
107 | - } | |
104 | + // .collapse-transition { | |
105 | + // transition: @transition-time height ease-in-out, @transition-time padding-top ease-in-out, | |
106 | + // @transition-time padding-bottom ease-in-out; | |
107 | + // } | |
108 | 108 | |
109 | 109 | &-light { |
110 | 110 | background: #fff; | ... | ... |
src/components/Table/src/BasicTable.vue
... | ... | @@ -185,8 +185,10 @@ |
185 | 185 | } = useTableForm(getProps, slots, fetch); |
186 | 186 | |
187 | 187 | const getBindValues = computed(() => { |
188 | + const dataSource = toRaw(unref(getDataSourceRef)); | |
188 | 189 | let propsData: Recordable = { |
189 | 190 | size: 'middle', |
191 | + // ...(dataSource.length === 0 ? { getPopupContainer: () => document.body } : {}), | |
190 | 192 | ...attrs, |
191 | 193 | customRow, |
192 | 194 | expandIcon: expandIcon(), |
... | ... | @@ -199,7 +201,7 @@ |
199 | 201 | rowKey: unref(getRowKey), |
200 | 202 | columns: toRaw(unref(getViewColumns)), |
201 | 203 | pagination: toRaw(unref(getPaginationInfo)), |
202 | - dataSource: toRaw(unref(getDataSourceRef)), | |
204 | + dataSource, | |
203 | 205 | footer: unref(getFooterProps), |
204 | 206 | ...unref(getExpandOption), |
205 | 207 | }; |
... | ... | @@ -208,7 +210,6 @@ |
208 | 210 | } |
209 | 211 | |
210 | 212 | propsData = omit(propsData, 'class'); |
211 | - | |
212 | 213 | return propsData; |
213 | 214 | }); |
214 | 215 | ... | ... |
src/components/Transition/index.ts
1 | 1 | import { createSimpleTransition, createJavascriptTransition } from './src/CreateTransition'; |
2 | -import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; | |
3 | 2 | |
4 | 3 | import ExpandTransitionGenerator from './src/ExpandTransition'; |
5 | 4 | |
6 | -export { default as CollapseTransition } from './src/CollapseTransition'; | |
7 | -// export { default as CollapseTransition } from './src/CollapseTransition'; | |
5 | +export { default as CollapseTransition } from './src/CollapseTransition.vue'; | |
8 | 6 | |
9 | 7 | export const FadeTransition = createSimpleTransition('fade-transition'); |
10 | 8 | export const ScaleTransition = createSimpleTransition('scale-transition'); |
... | ... | @@ -18,15 +16,12 @@ export const SlideXReverseTransition = createSimpleTransition('slide-x-reverse-t |
18 | 16 | export const ScrollXReverseTransition = createSimpleTransition('scroll-x-reverse-transition'); |
19 | 17 | export const ScaleRotateTransition = createSimpleTransition('scale-rotate-transition'); |
20 | 18 | |
21 | -// Javascript transitions | |
22 | -// export const ExpandTransition = createJavascriptTransition( | |
23 | -// 'expand-transition', | |
24 | -// ExpandTransitionGenerator() | |
25 | -// ); | |
26 | - | |
27 | 19 | export const ExpandXTransition = createJavascriptTransition( |
28 | 20 | 'expand-x-transition', |
29 | 21 | ExpandTransitionGenerator('', true) |
30 | 22 | ); |
31 | 23 | |
32 | -export const ExpandTransition = createAsyncComponent(() => import('./src/ExpandTransition.vue')); | |
24 | +export const ExpandTransition = createJavascriptTransition( | |
25 | + 'expand-transition', | |
26 | + ExpandTransitionGenerator('') | |
27 | +); | ... | ... |
src/components/Transition/src/CollapseTransition.tsx deleted
100644 โ 0
1 | -// collapse ๅฑๅผๆๅ | |
2 | -import { defineComponent } from 'vue'; | |
3 | -import { getSlot } from '/@/utils/helper/tsxHelper'; | |
4 | -// import { createJavascriptTransition } from './CreateTransition'; | |
5 | -import ExpandTransition from './ExpandTransition.vue'; | |
6 | - | |
7 | -// export const ExpandTransition = createJavascriptTransition( | |
8 | -// 'expand-transition', | |
9 | -// ExpandTransitionGenerator() | |
10 | -// ); | |
11 | -export default defineComponent({ | |
12 | - name: 'CollapseTransition', | |
13 | - setup(_, { slots }) { | |
14 | - return () => <ExpandTransition>{() => getSlot(slots)}</ExpandTransition>; | |
15 | - }, | |
16 | -}); |
src/components/Transition/src/ExpandTransition.vue renamed to src/components/Transition/src/CollapseTransition.vue
1 | 1 | <template> |
2 | - <transition v-on="on"> | |
2 | + <transition mode="out-in" v-on="on"> | |
3 | 3 | <slot></slot> |
4 | 4 | </transition> |
5 | 5 | </template> |
6 | 6 | <script lang="ts"> |
7 | - import { addClass, removeClass } from '/@/utils/domUtils'; | |
8 | 7 | import { defineComponent } from 'vue'; |
8 | + import { addClass, removeClass } from '/@/utils/domUtils'; | |
9 | + | |
9 | 10 | export default defineComponent({ |
10 | 11 | name: 'CollapseTransition', |
11 | 12 | setup() { |
12 | 13 | return { |
13 | 14 | on: { |
14 | - beforeEnter(el: any) { | |
15 | + beforeEnter(el) { | |
15 | 16 | addClass(el, 'collapse-transition'); |
16 | 17 | if (!el.dataset) el.dataset = {}; |
17 | 18 | |
... | ... | @@ -23,7 +24,7 @@ |
23 | 24 | el.style.paddingBottom = 0; |
24 | 25 | }, |
25 | 26 | |
26 | - enter(el: any) { | |
27 | + enter(el) { | |
27 | 28 | el.dataset.oldOverflow = el.style.overflow; |
28 | 29 | if (el.scrollHeight !== 0) { |
29 | 30 | el.style.height = el.scrollHeight + 'px'; |
... | ... | @@ -38,14 +39,13 @@ |
38 | 39 | el.style.overflow = 'hidden'; |
39 | 40 | }, |
40 | 41 | |
41 | - afterEnter(el: any) { | |
42 | - // for safari: remove class then reset height is necessary | |
42 | + afterEnter(el) { | |
43 | 43 | removeClass(el, 'collapse-transition'); |
44 | 44 | el.style.height = ''; |
45 | 45 | el.style.overflow = el.dataset.oldOverflow; |
46 | 46 | }, |
47 | 47 | |
48 | - beforeLeave(el: any) { | |
48 | + beforeLeave(el) { | |
49 | 49 | if (!el.dataset) el.dataset = {}; |
50 | 50 | el.dataset.oldPaddingTop = el.style.paddingTop; |
51 | 51 | el.dataset.oldPaddingBottom = el.style.paddingBottom; |
... | ... | @@ -55,19 +55,16 @@ |
55 | 55 | el.style.overflow = 'hidden'; |
56 | 56 | }, |
57 | 57 | |
58 | - leave(el: any) { | |
58 | + leave(el) { | |
59 | 59 | if (el.scrollHeight !== 0) { |
60 | - // for safari: add class after set height, or it will jump to zero height suddenly, weired | |
61 | 60 | addClass(el, 'collapse-transition'); |
62 | - // in vue3.0.4, transitionProperty is set 'none' to avoid 'v-leave-from' issue | |
63 | - el.style.transitionProperty = 'height'; | |
64 | 61 | el.style.height = 0; |
65 | 62 | el.style.paddingTop = 0; |
66 | 63 | el.style.paddingBottom = 0; |
67 | 64 | } |
68 | 65 | }, |
69 | 66 | |
70 | - afterLeave(el: any) { | |
67 | + afterLeave(el) { | |
71 | 68 | removeClass(el, 'collapse-transition'); |
72 | 69 | el.style.height = ''; |
73 | 70 | el.style.overflow = el.dataset.oldOverflow; |
... | ... | @@ -79,9 +76,3 @@ |
79 | 76 | }, |
80 | 77 | }); |
81 | 78 | </script> |
82 | -<style lang="less" scoped> | |
83 | - .collapse-transition { | |
84 | - transition: 0.2s height ease-in-out, 0.2s padding-top ease-in-out, | |
85 | - 0.2s padding-bottom ease-in-out; | |
86 | - } | |
87 | -</style> | ... | ... |
src/design/transition/index.less
src/views/demo/comp/transition/index.vue
yarn.lock
... | ... | @@ -297,11 +297,6 @@ |
297 | 297 | resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.13.11.tgz#f93ebfc99d21c1772afbbaa153f47e7ce2f50b88" |
298 | 298 | integrity sha512-PhuoqeHoO9fc4ffMEVk4qb/w/s2iOSWohvbHxLtxui0eBg3Lg5gN1U8wp1V1u61hOWkPQJJyJzGH6Y+grwkq8Q== |
299 | 299 | |
300 | -"@babel/parser@^7.13.9": | |
301 | - version "7.13.13" | |
302 | - resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.13.13.tgz#42f03862f4aed50461e543270916b47dd501f0df" | |
303 | - integrity sha512-OhsyMrqygfk5v8HmWwOzlYjJrtLaFhF34MrfG/Z73DgYCI6ojNUTUp2TYbtnjo8PegeJp12eamsNettCQjKjVw== | |
304 | - | |
305 | 300 | "@babel/plugin-proposal-async-generator-functions@^7.13.8": |
306 | 301 | version "7.13.8" |
307 | 302 | resolved "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.13.8.tgz#87aacb574b3bc4b5603f6fe41458d72a5a2ec4b1" |
... | ... | @@ -1995,17 +1990,6 @@ |
1995 | 1990 | estree-walker "^2.0.1" |
1996 | 1991 | source-map "^0.6.1" |
1997 | 1992 | |
1998 | -"@vue/compiler-core@3.0.9": | |
1999 | - version "3.0.9" | |
2000 | - resolved "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.9.tgz#ec7efa676889aee006fc43739ee4a67a952ac623" | |
2001 | - integrity sha512-bHAPwfVoLhGx8d6KV/OfGf/3gwpymVirgfmSyhgv5YuXDybLa6BwjSLvhNMAyDP+4q4pp0p6g248LuoOy5W6OA== | |
2002 | - dependencies: | |
2003 | - "@babel/parser" "^7.12.0" | |
2004 | - "@babel/types" "^7.12.0" | |
2005 | - "@vue/shared" "3.0.9" | |
2006 | - estree-walker "^2.0.1" | |
2007 | - source-map "^0.6.1" | |
2008 | - | |
2009 | 1993 | "@vue/compiler-dom@3.0.7": |
2010 | 1994 | version "3.0.7" |
2011 | 1995 | resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.7.tgz#54d2e12fb9a7aff53abd19dac2c2679533f0c919" |
... | ... | @@ -2014,25 +1998,17 @@ |
2014 | 1998 | "@vue/compiler-core" "3.0.7" |
2015 | 1999 | "@vue/shared" "3.0.7" |
2016 | 2000 | |
2017 | -"@vue/compiler-dom@3.0.9": | |
2018 | - version "3.0.9" | |
2019 | - resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.9.tgz#1fd554097d9ab36eca73bc6d0d9607fecf94e71c" | |
2020 | - integrity sha512-tkq6umPSELaghvOExWfGNwrCRc7FTul3RLykKzBZWhb87sSESq0XxiKELfBOfEbzdhWg6BJ1WXKDeq+al/viEQ== | |
2021 | - dependencies: | |
2022 | - "@vue/compiler-core" "3.0.9" | |
2023 | - "@vue/shared" "3.0.9" | |
2024 | - | |
2025 | -"@vue/compiler-sfc@^3.0.9": | |
2026 | - version "3.0.9" | |
2027 | - resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.0.9.tgz#0f993a6e159ca6ad351d8ee0c4734771d2590115" | |
2028 | - integrity sha512-meneFRb9xIDgv/gYWCr9xKryvPi0tVffQzLjCkyN4RF1EndqLS71xugUX9wQsS4F1SAP+zlZbcgMFmTSC4OpHw== | |
2001 | +"@vue/compiler-sfc@3.0.7": | |
2002 | + version "3.0.7" | |
2003 | + resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.0.7.tgz#900414750cc726553b870490f48073451fd14f07" | |
2004 | + integrity sha512-37/QILpGE+J3V+bP9Slg9e6xGqfk+MmS2Yj8ChR4fS0/qWUU/YoYHE0GPIzjmBdH0JVOOmJqunxowIXmqNiHng== | |
2029 | 2005 | dependencies: |
2030 | - "@babel/parser" "^7.13.9" | |
2031 | - "@babel/types" "^7.13.0" | |
2032 | - "@vue/compiler-core" "3.0.9" | |
2033 | - "@vue/compiler-dom" "3.0.9" | |
2034 | - "@vue/compiler-ssr" "3.0.9" | |
2035 | - "@vue/shared" "3.0.9" | |
2006 | + "@babel/parser" "^7.12.0" | |
2007 | + "@babel/types" "^7.12.0" | |
2008 | + "@vue/compiler-core" "3.0.7" | |
2009 | + "@vue/compiler-dom" "3.0.7" | |
2010 | + "@vue/compiler-ssr" "3.0.7" | |
2011 | + "@vue/shared" "3.0.7" | |
2036 | 2012 | consolidate "^0.16.0" |
2037 | 2013 | estree-walker "^2.0.1" |
2038 | 2014 | hash-sum "^2.0.0" |
... | ... | @@ -2044,13 +2020,13 @@ |
2044 | 2020 | postcss-selector-parser "^6.0.4" |
2045 | 2021 | source-map "^0.6.1" |
2046 | 2022 | |
2047 | -"@vue/compiler-ssr@3.0.9": | |
2048 | - version "3.0.9" | |
2049 | - resolved "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.0.9.tgz#aebce25e573b9db34964b682bb1631a7240ba43d" | |
2050 | - integrity sha512-99h5k6Up+s8AzTNH1ljtXE/QlnG8yaGLePwQ4XQaWfk23ESUnmGZWEC+y+ZXznf8pIfJ0uPeD9EVgQzQAyZ2aA== | |
2023 | +"@vue/compiler-ssr@3.0.7": | |
2024 | + version "3.0.7" | |
2025 | + resolved "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.0.7.tgz#28b85d497381d75fe44234057b140b0065ca9dbf" | |
2026 | + integrity sha512-nHRbHeSpfXwjypettjrA16TjgfDcPEwq3m/zHnGyLC1QqdLtklXmpSM43/CPwwTCRa/qdt0pldJf22MiCEuTSQ== | |
2051 | 2027 | dependencies: |
2052 | - "@vue/compiler-dom" "3.0.9" | |
2053 | - "@vue/shared" "3.0.9" | |
2028 | + "@vue/compiler-dom" "3.0.7" | |
2029 | + "@vue/shared" "3.0.7" | |
2054 | 2030 | |
2055 | 2031 | "@vue/devtools-api@^6.0.0-beta.5": |
2056 | 2032 | version "6.0.0-beta.7" |
... | ... | @@ -2064,13 +2040,6 @@ |
2064 | 2040 | dependencies: |
2065 | 2041 | "@vue/shared" "3.0.7" |
2066 | 2042 | |
2067 | -"@vue/reactivity@3.0.9": | |
2068 | - version "3.0.9" | |
2069 | - resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.9.tgz#875f241b8c10262560b190ccdeff2d0ab7053e11" | |
2070 | - integrity sha512-W1AbGhzphVjY+TL32lQDwLDNvLzZKOcUgaIaLOoALWMtjzN4ExOUJzrR1FC3ynlpMHIEfcUo8GPgfnNmvMGdgQ== | |
2071 | - dependencies: | |
2072 | - "@vue/shared" "3.0.9" | |
2073 | - | |
2074 | 2043 | "@vue/runtime-core@3.0.7": |
2075 | 2044 | version "3.0.7" |
2076 | 2045 | resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.7.tgz#d44c0b0a57d7e392912a87362a4430ccf446ecea" |
... | ... | @@ -2079,14 +2048,6 @@ |
2079 | 2048 | "@vue/reactivity" "3.0.7" |
2080 | 2049 | "@vue/shared" "3.0.7" |
2081 | 2050 | |
2082 | -"@vue/runtime-core@3.0.9": | |
2083 | - version "3.0.9" | |
2084 | - resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.9.tgz#9665f149468355a524a304cb8f260147a4d294e6" | |
2085 | - integrity sha512-j94xZ/wRZTVhqpoUgmxBTlojnPFu6TTXNw1Vw8oQkW1ZTGD0IwiJe3ycsKd1bpleXEMVt55GzGlCopI33/Gdmg== | |
2086 | - dependencies: | |
2087 | - "@vue/reactivity" "3.0.9" | |
2088 | - "@vue/shared" "3.0.9" | |
2089 | - | |
2090 | 2051 | "@vue/runtime-dom@3.0.7": |
2091 | 2052 | version "3.0.7" |
2092 | 2053 | resolved "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.7.tgz#b70668d729020bc4ad608c20367223f259576ba6" |
... | ... | @@ -2096,25 +2057,11 @@ |
2096 | 2057 | "@vue/shared" "3.0.7" |
2097 | 2058 | csstype "^2.6.8" |
2098 | 2059 | |
2099 | -"@vue/runtime-dom@3.0.9": | |
2100 | - version "3.0.9" | |
2101 | - resolved "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.9.tgz#16a1d001dc746a9f346ee7fb9de90d52ad097b61" | |
2102 | - integrity sha512-6NCjpwa5hNBFDdokquAgMl2tNEYyQD6kBy9Mh6M2776bxYLXZCqL4/e0UrpBuBiHTrkAlUGODD7PyYGaqH6fyA== | |
2103 | - dependencies: | |
2104 | - "@vue/runtime-core" "3.0.9" | |
2105 | - "@vue/shared" "3.0.9" | |
2106 | - csstype "^2.6.8" | |
2107 | - | |
2108 | 2060 | "@vue/shared@3.0.7": |
2109 | 2061 | version "3.0.7" |
2110 | 2062 | resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.0.7.tgz#96d52988efc07444c108c7c6803ba7cc93e40045" |
2111 | 2063 | integrity sha512-dn5FyfSc4ky424jH4FntiHno7Ss5yLkqKNmM/NXwANRnlkmqu74pnGetexDFVG5phMk9/FhwovUZCWGxsotVKg== |
2112 | 2064 | |
2113 | -"@vue/shared@3.0.9": | |
2114 | - version "3.0.9" | |
2115 | - resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.0.9.tgz#09882d745ded52b07e4481d036659d733edd2a9a" | |
2116 | - integrity sha512-lv20q1O5dybwro+V+vnxHCmSIxi9mvTORSgAbGrANGYK8zF4K1S9TOankIvdkcvfZ88IR95O2pTI2Pb3c3BaNg== | |
2117 | - | |
2118 | 2065 | "@vueuse/core@^4.6.2": |
2119 | 2066 | version "4.6.2" |
2120 | 2067 | resolved "https://registry.npmjs.org/@vueuse/core/-/core-4.6.2.tgz#73a07ddbb3d01c66ef7d79500190f25a7ca7afac" |
... | ... | @@ -2130,16 +2077,18 @@ |
2130 | 2077 | dependencies: |
2131 | 2078 | vue-demi latest |
2132 | 2079 | |
2133 | -"@windicss/plugin-utils@0.10.2": | |
2134 | - version "0.10.2" | |
2135 | - resolved "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-0.10.2.tgz#d4a79c41f02c1704b54510a2bd2deaa43c905a7d" | |
2136 | - integrity sha512-IeKaZEZ1Ww3KO5C3AxWLotMX3aGxhrj0MsTmiyMS1H5KXm6HOgfk+zsRiB0ysxGKrGZ4pMLe2H3Riku8o7YfuQ== | |
2080 | +"@windicss/plugin-utils@0.10.4": | |
2081 | + version "0.10.4" | |
2082 | + resolved "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-0.10.4.tgz#ed9163b09e030f7358cc4742b1f2b6c92d084d5d" | |
2083 | + integrity sha512-jQu69qzA56Lv18OK8U4mUTDV17st4EdPawQuaRG2VNK+ZEQWYsMNnqGxhzDTl/NhWTGCcTb3D6mlFPNo0QDOFg== | |
2137 | 2084 | dependencies: |
2138 | 2085 | debug "^4.3.2" |
2139 | 2086 | fast-glob "^3.2.5" |
2087 | + magic-string "^0.25.7" | |
2140 | 2088 | micromatch "^4.0.2" |
2089 | + pirates "^4.0.1" | |
2141 | 2090 | sucrase "^3.17.1" |
2142 | - windicss "^2.5.5" | |
2091 | + windicss "^2.5.7" | |
2143 | 2092 | |
2144 | 2093 | "@zxcvbn-ts/core@^0.3.0": |
2145 | 2094 | version "0.3.0" |
... | ... | @@ -2284,10 +2233,10 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0: |
2284 | 2233 | dependencies: |
2285 | 2234 | color-convert "^2.0.1" |
2286 | 2235 | |
2287 | -ant-design-vue@2.1.1: | |
2288 | - version "2.1.1" | |
2289 | - resolved "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-2.1.1.tgz#5c2f3d86177e197f6dbb167f691a9d10104e61c3" | |
2290 | - integrity sha512-ohTEIBFRkODRTFXRHeizL/uKNOZY5+4r2y/GXiKEdvrxiTRgHgDNMWKsncG/+G6MXxOIe2Reg+r8jHS8nGDqtQ== | |
2236 | +ant-design-vue@^2.1.2: | |
2237 | + version "2.1.2" | |
2238 | + resolved "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-2.1.2.tgz#2065d7e63199c0c584919458af57b6a0b597f677" | |
2239 | + integrity sha512-gDG0wauGVt4LE63behrJaIcq4BB+dgs+dpj9jz17IgKr2MPYSEeKetU/x9Kk8d58cGonz4Ulncg7fBZJ7EljsQ== | |
2291 | 2240 | dependencies: |
2292 | 2241 | "@ant-design-vue/use" "^0.0.1-0" |
2293 | 2242 | "@ant-design/icons-vue" "^6.0.0" |
... | ... | @@ -10987,10 +10936,10 @@ vite-plugin-purge-icons@^0.7.0: |
10987 | 10936 | "@purge-icons/generated" "^0.7.0" |
10988 | 10937 | rollup-plugin-purge-icons "^0.7.0" |
10989 | 10938 | |
10990 | -vite-plugin-pwa@^0.6.3: | |
10991 | - version "0.6.3" | |
10992 | - resolved "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.6.3.tgz#91c0481e1c7f89b9c4502c582b2d25ea73aac311" | |
10993 | - integrity sha512-wZxE2ZAKpwaig2JFOm6ama8p2iHBUZuHLEko1co7zDdnb6C/Epmih5aCIyHHvZKcFEaUxFogLQCnRDD41vd5cw== | |
10939 | +vite-plugin-pwa@^0.6.4: | |
10940 | + version "0.6.4" | |
10941 | + resolved "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.6.4.tgz#50294b67c545c689d9e234e266e042a68ddb9c56" | |
10942 | + integrity sha512-YEKloivP8400uax8aqfYN2ygYjfok9xD/VgM9fyi1KVtP2JAgZKNPZnBc66HyaKPPDPr1TCeeXvB+aCSDSznqw== | |
10994 | 10943 | dependencies: |
10995 | 10944 | debug "^4.3.2" |
10996 | 10945 | fast-glob "^3.2.5" |
... | ... | @@ -10998,10 +10947,10 @@ vite-plugin-pwa@^0.6.3: |
10998 | 10947 | workbox-build "^6.1.2" |
10999 | 10948 | workbox-window "^6.1.2" |
11000 | 10949 | |
11001 | -vite-plugin-style-import@^0.9.0: | |
11002 | - version "0.9.0" | |
11003 | - resolved "https://registry.npmjs.org/vite-plugin-style-import/-/vite-plugin-style-import-0.9.0.tgz#4adc4456374ba0e87b7a178b59dce6f9fa7f6cd9" | |
11004 | - integrity sha512-4Y8Px2t4IXnr6SqjPyAju3sELkV5UcwwoxkxsYkZOQRxHv2gtBUAsBuuQ8xTZNxbic4ODS+H/Z99UgtjNiDekw== | |
10950 | +vite-plugin-style-import@^0.9.1: | |
10951 | + version "0.9.1" | |
10952 | + resolved "https://registry.npmjs.org/vite-plugin-style-import/-/vite-plugin-style-import-0.9.1.tgz#259a0358c20628e9814cc6c4cf25f389b5761945" | |
10953 | + integrity sha512-qQmeglG+3kYjHPq+XhyKOsXrKm1k3zLcEicTeFKcU+mbzhQA6lCaIn9EpBgAd7mSBF5HDiMNClCfpoSkShJMyw== | |
11005 | 10954 | dependencies: |
11006 | 10955 | "@rollup/pluginutils" "^4.1.0" |
11007 | 10956 | change-case "^4.1.2" |
... | ... | @@ -11051,15 +11000,15 @@ vite-plugin-theme@^0.5.0: |
11051 | 11000 | tinycolor2 "^1.4.2" |
11052 | 11001 | ts-jest "^26.5.3" |
11053 | 11002 | |
11054 | -vite-plugin-windicss@0.10.2: | |
11055 | - version "0.10.2" | |
11056 | - resolved "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-0.10.2.tgz#126edae552f2bec22273f5f533806e2b5d61c8ff" | |
11057 | - integrity sha512-+kgzjwW6VNFlMlQvN4C5iCIqCAhSmTLteVz9IA7LjnpyM6X4tpZmWiTiNlLzAeiJt1eUpu9lFcA7GfuZR+OQDA== | |
11003 | +vite-plugin-windicss@0.10.4: | |
11004 | + version "0.10.4" | |
11005 | + resolved "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-0.10.4.tgz#e93577111ea0a55befbe4e2aa2e596f55f6b74b2" | |
11006 | + integrity sha512-P7alH2dGGw3OTgjs9yZG2w0i+o1HKD8PChwhm2ftP+lLCe1xDL3LReheuRil9p2xPYzrVouER2YTbIdLUEThrQ== | |
11058 | 11007 | dependencies: |
11059 | - "@windicss/plugin-utils" "0.10.2" | |
11008 | + "@windicss/plugin-utils" "0.10.4" | |
11060 | 11009 | chalk "^4.1.0" |
11061 | 11010 | debug "^4.3.2" |
11062 | - windicss "^2.5.5" | |
11011 | + windicss "^2.5.7" | |
11063 | 11012 | |
11064 | 11013 | vite@2.1.3: |
11065 | 11014 | version "2.1.3" |
... | ... | @@ -11111,7 +11060,7 @@ vue-types@^3.0.0, vue-types@^3.0.2: |
11111 | 11060 | dependencies: |
11112 | 11061 | is-plain-object "3.0.1" |
11113 | 11062 | |
11114 | -vue@^3.0.0: | |
11063 | +vue@3.0.7, vue@^3.0.0: | |
11115 | 11064 | version "3.0.7" |
11116 | 11065 | resolved "https://registry.npmjs.org/vue/-/vue-3.0.7.tgz#8bcff51f8be570f9e4ce8cc5f52e2ab0fe3c74a1" |
11117 | 11066 | integrity sha512-8h4TikD+JabbMK9aRlBO4laG0AtNHRPHynxYgWZ9sq1YUPfzynd9Jeeb27XNyZytC7aCQRX9xe1+TQJuc181Tw== |
... | ... | @@ -11120,15 +11069,6 @@ vue@^3.0.0: |
11120 | 11069 | "@vue/runtime-dom" "3.0.7" |
11121 | 11070 | "@vue/shared" "3.0.7" |
11122 | 11071 | |
11123 | -vue@^3.0.9: | |
11124 | - version "3.0.9" | |
11125 | - resolved "https://registry.npmjs.org/vue/-/vue-3.0.9.tgz#c68ffc0e4aa2b0f1905124a9037b6e352de469ad" | |
11126 | - integrity sha512-MOvqDpvDslMWJo5kyGW1nTsTIPAuSzgVqmlzSQInIEqkHOu16pNbXuTjnG7jc/yIvQYFSQZqv6Pvad0iO5QkyQ== | |
11127 | - dependencies: | |
11128 | - "@vue/compiler-dom" "3.0.9" | |
11129 | - "@vue/runtime-dom" "3.0.9" | |
11130 | - "@vue/shared" "3.0.9" | |
11131 | - | |
11132 | 11072 | vuex-module-decorators@^1.0.1: |
11133 | 11073 | version "1.0.1" |
11134 | 11074 | resolved "https://registry.npmjs.org/vuex-module-decorators/-/vuex-module-decorators-1.0.1.tgz#d34dafb5428a3636f1c26d3d014c15fc9659ccd0" |
... | ... | @@ -11242,10 +11182,10 @@ which@^2.0.1, which@^2.0.2: |
11242 | 11182 | dependencies: |
11243 | 11183 | isexe "^2.0.0" |
11244 | 11184 | |
11245 | -windicss@^2.5.5: | |
11246 | - version "2.5.5" | |
11247 | - resolved "https://registry.npmjs.org/windicss/-/windicss-2.5.5.tgz#691cc08e13dc9ee41293cd20cfdb6fed101e1d6a" | |
11248 | - integrity sha512-tKLYY9qQoFKoxitG2B8toa9QUPAjsBOKjmFrxhDi2i0eaVOFQh+YEPElBCa7N5ma03YVIW9HPVbgVU0Z4JxZ5g== | |
11185 | +windicss@^2.5.7: | |
11186 | + version "2.5.7" | |
11187 | + resolved "https://registry.npmjs.org/windicss/-/windicss-2.5.7.tgz#aea36568cfb412e1c673468496e920f21ef06086" | |
11188 | + integrity sha512-gsWZkotmw9Hr7yZy2nJAp46pmgMO1wXFFa3rfLWm57KDM31U/AucksQnwZi7zxsKM9c6O/z/61/Uvv4J096zKA== | |
11249 | 11189 | |
11250 | 11190 | wmf@~1.0.1: |
11251 | 11191 | version "1.0.2" | ... | ... |