| 提交 | 用户 | age | ||
| 2f6253 | 1 | <template> |
| ebf7c8 | 2 | <div :class="['p-2', prefixCls]"> |
| 3ba828 | 3 | <CollapseHeader |
| V | 4 | v-bind="getBindValues" |
| 5 | :prefixCls="prefixCls" | |
| 6 | :show="show" | |
| 7 | @expand="handleExpand" | |
| 8 | > | |
| a1ffb6 | 9 | <template #title> |
| 9edc28 | 10 | <slot name="title"></slot> |
| a1ffb6 | 11 | </template> |
| abde5c | 12 | </CollapseHeader> |
| 73c8e0 | 13 | |
| 2f6253 | 14 | <CollapseTransition :enable="canExpan"> |
| 陈 | 15 | <Skeleton v-if="loading" /> |
| ebf7c8 | 16 | <div :class="`${prefixCls}__body`" v-else v-show="show"> |
| 0f4b84 | 17 | <LazyContainer :timeout="lazyTime" v-if="lazy"> |
| 9edc28 | 18 | <slot></slot> |
| faf3f4 | 19 | <template #skeleton> |
| 9edc28 | 20 | <slot name="lazySkeleton"></slot> |
| 2f6253 | 21 | </template> |
| 0f4b84 | 22 | </LazyContainer> |
| 9edc28 | 23 | <slot v-else></slot> |
| 2f6253 | 24 | </div> |
| 陈 | 25 | </CollapseTransition> |
| 26 | </div> | |
| 27 | </template> | |
| 28 | <script lang="ts"> | |
| 29 | import type { PropType } from 'vue'; | |
| 30 | ||
| 3ba828 | 31 | import { defineComponent, ref, computed } from 'vue'; |
| 73c8e0 | 32 | |
| 2f6253 | 33 | // component |
| 73c8e0 | 34 | import { Skeleton } from 'ant-design-vue'; |
| 2f6253 | 35 | import { CollapseTransition } from '/@/components/Transition/index'; |
| 陈 | 36 | import CollapseHeader from './CollapseHeader.vue'; |
| 0f4b84 | 37 | import LazyContainer from '../LazyContainer.vue'; |
| 2f6253 | 38 | |
| fcee7d | 39 | import { triggerWindowResize } from '/@/utils/event'; |
| 2f6253 | 40 | // hook |
| b49950 | 41 | import { useTimeoutFn } from '/@/hooks/core/useTimeout'; |
| 73c8e0 | 42 | import { propTypes } from '/@/utils/propTypes'; |
| ebf7c8 | 43 | import { useDesign } from '/@/hooks/web/useDesign'; |
| d9b196 | 44 | |
| 2f6253 | 45 | export default defineComponent({ |
| 73c8e0 | 46 | name: 'CollapseContainer', |
| a0b09e | 47 | components: { |
| V | 48 | Skeleton, |
| 0f4b84 | 49 | LazyContainer, |
| a0b09e | 50 | CollapseHeader, |
| V | 51 | CollapseTransition, |
| 52 | }, | |
| 2f6253 | 53 | props: { |
| 73c8e0 | 54 | title: propTypes.string.def(''), |
| 46e087 | 55 | // Can it be expanded |
| 73c8e0 | 56 | canExpan: propTypes.bool.def(true), |
| 46e087 | 57 | // Warm reminder on the right side of the title |
| 2f6253 | 58 | helpMessage: { |
| 陈 | 59 | type: [Array, String] as PropType<string[] | string>, |
| 60 | default: '', | |
| 61 | }, | |
| 46e087 | 62 | // Whether to trigger window.resize when expanding and contracting, |
| V | 63 | // Can adapt to tables and forms, when the form shrinks, the form triggers resize to adapt to the height |
| 73c8e0 | 64 | triggerWindowResize: propTypes.bool, |
| V | 65 | loading: propTypes.bool, |
| 46e087 | 66 | // Delayed loading |
| 73c8e0 | 67 | lazy: propTypes.bool, |
| 46e087 | 68 | // Delayed loading time |
| 73c8e0 | 69 | lazyTime: propTypes.number.def(0), |
| 2f6253 | 70 | }, |
| 陈 | 71 | setup(props) { |
| 73c8e0 | 72 | const show = ref(true); |
| ebf7c8 | 73 | |
| V | 74 | const { prefixCls } = useDesign('collapse-container'); |
| 75 | ||
| 2f6253 | 76 | /** |
| 46e087 | 77 | * @description: Handling development events |
| 2f6253 | 78 | */ |
| 陈 | 79 | function handleExpand() { |
| 73c8e0 | 80 | show.value = !show.value; |
| 2f6253 | 81 | if (props.triggerWindowResize) { |
| 46e087 | 82 | // 200 milliseconds here is because the expansion has animation, |
| d9b196 | 83 | useTimeoutFn(triggerWindowResize, 200); |
| 2f6253 | 84 | } |
| 陈 | 85 | } |
| 3ba828 | 86 | |
| V | 87 | const getBindValues = computed((): any => { |
| 88 | return props; | |
| 89 | }); | |
| 90 | ||
| 2f6253 | 91 | return { |
| 73c8e0 | 92 | show, |
| 2f6253 | 93 | handleExpand, |
| ebf7c8 | 94 | prefixCls, |
| 3ba828 | 95 | getBindValues, |
| 2f6253 | 96 | }; |
| 陈 | 97 | }, |
| 98 | }); | |
| 99 | </script> | |
| 100 | <style lang="less"> | |
| ebf7c8 | 101 | @prefix-cls: ~'@{namespace}-collapse-container'; |
| V | 102 | |
| 103 | .@{prefix-cls} { | |
| 2f6253 | 104 | background: #fff; |
| a1ffb6 | 105 | border-radius: 2px; |
| 2f6253 | 106 | transition: all 0.3s ease-in-out; |
| 陈 | 107 | |
| 108 | &__header { | |
| 109 | display: flex; | |
| 110 | height: 32px; | |
| 111 | margin-bottom: 10px; | |
| 112 | justify-content: space-between; | |
| 113 | align-items: center; | |
| 114 | } | |
| 115 | ||
| 116 | &__action { | |
| 117 | display: flex; | |
| 4ff1c4 | 118 | text-align: right; |
| V | 119 | flex: 1; |
| 2f6253 | 120 | align-items: center; |
| 4ff1c4 | 121 | justify-content: flex-end; |
| 2f6253 | 122 | } |
| 陈 | 123 | } |
| 124 | </style> | |
