| 提交 | 用户 | age | ||
| 2f6253 | 1 | <template> |
| 37f666 | 2 | <div :class="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> |
| 8a1406 | 12 | <template #action> |
| V | 13 | <slot name="action"></slot> |
| 14 | </template> | |
| abde5c | 15 | </CollapseHeader> |
| 73c8e0 | 16 | |
| 37f666 | 17 | <div class="p-2"> |
| V | 18 | <CollapseTransition :enable="canExpan"> |
| 19 | <Skeleton v-if="loading" :active="active" /> | |
| 20 | <div :class="`${prefixCls}__body`" v-else v-show="show"> | |
| 9edc28 | 21 | <slot></slot> |
| 37f666 | 22 | </div> |
| V | 23 | </CollapseTransition> |
| 8a1406 | 24 | </div> |
| V | 25 | |
| 26 | <div :class="`${prefixCls}__footer`" v-if="$slots.footer"> | |
| 27 | <slot name="footer"></slot> | |
| 37f666 | 28 | </div> |
| 2f6253 | 29 | </div> |
| 陈 | 30 | </template> |
| 31 | <script lang="ts"> | |
| 32 | import type { PropType } from 'vue'; | |
| 33 | ||
| 3ba828 | 34 | import { defineComponent, ref, computed } from 'vue'; |
| 73c8e0 | 35 | |
| 2f6253 | 36 | // component |
| 73c8e0 | 37 | import { Skeleton } from 'ant-design-vue'; |
| 37f666 | 38 | import { CollapseTransition } from '/@/components/Transition'; |
| 2f6253 | 39 | import CollapseHeader from './CollapseHeader.vue'; |
| 陈 | 40 | |
| fcee7d | 41 | import { triggerWindowResize } from '/@/utils/event'; |
| 2f6253 | 42 | // hook |
| b49950 | 43 | import { useTimeoutFn } from '/@/hooks/core/useTimeout'; |
| 73c8e0 | 44 | import { propTypes } from '/@/utils/propTypes'; |
| ebf7c8 | 45 | import { useDesign } from '/@/hooks/web/useDesign'; |
| d9b196 | 46 | |
| 2f6253 | 47 | export default defineComponent({ |
| 73c8e0 | 48 | name: 'CollapseContainer', |
| a0b09e | 49 | components: { |
| V | 50 | Skeleton, |
| 51 | CollapseHeader, | |
| 52 | CollapseTransition, | |
| 53 | }, | |
| 2f6253 | 54 | props: { |
| 73c8e0 | 55 | title: propTypes.string.def(''), |
| 46e087 | 56 | // Can it be expanded |
| 73c8e0 | 57 | canExpan: propTypes.bool.def(true), |
| 46e087 | 58 | // Warm reminder on the right side of the title |
| 2f6253 | 59 | helpMessage: { |
| 陈 | 60 | type: [Array, String] as PropType<string[] | string>, |
| 61 | default: '', | |
| 62 | }, | |
| 46e087 | 63 | // Whether to trigger window.resize when expanding and contracting, |
| V | 64 | // Can adapt to tables and forms, when the form shrinks, the form triggers resize to adapt to the height |
| 73c8e0 | 65 | triggerWindowResize: propTypes.bool, |
| 37f666 | 66 | loading: propTypes.bool.def(false), |
| V | 67 | active: propTypes.bool.def(true), |
| 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 | justify-content: space-between; | |
| 112 | align-items: center; | |
| 37f666 | 113 | border-bottom: 1px solid @border-color-light; |
| 2f6253 | 114 | } |
| 陈 | 115 | |
| 8a1406 | 116 | &__footer { |
| V | 117 | border-top: 1px solid @border-color-light; |
| 118 | } | |
| 119 | ||
| 2f6253 | 120 | &__action { |
| 陈 | 121 | display: flex; |
| 4ff1c4 | 122 | text-align: right; |
| V | 123 | flex: 1; |
| 2f6253 | 124 | align-items: center; |
| 4ff1c4 | 125 | justify-content: flex-end; |
| 2f6253 | 126 | } |
| 陈 | 127 | } |
| 128 | </style> | |
