drawer.vue

<template>
    <a-drawer
        placement="right"
        :visible="visible"
        :drawerStyle="drawerStyle"
        :bodyStyle="bodyStyle"
        destroyOnClose
        v-bind="$attrs"
    >
        <div class="tw-overflow-y-hidden">
            <div class="tw-overflow-y-auto tw-h-full">
                <slot />
            </div>
        </div>
        <template>
            <a-divider />
            <a-space>
                <slot name="footer">
                    <a-button @click="cancel">取消</a-button>
                    <a-button type="primary" @click="ok" :loading="loading">确认</a-button>
                </slot>
            </a-space>
        </template>
    </a-drawer>
</template>

<script>
export default {
    props: {
        oncancel: Function,
        onok: Function,
    },
    data() {
        return {
            visiable: false,
            loading: false,
            drawerStyle: {
                display: 'flex',
                flexDirection: 'column',
                overflowY: 'hidden',
            },
            bodyStyle: {
                flex: 1,
                overflow: 'hidden',
                display: 'flex',
                flexDirection: 'column',
            },
        };
    },
    methods: {
        show() {
            this.visiable = true;
        },
        hidden() {
            this.visiable = false;
        },
        cancel() {
            this.oncancel && this.oncancel();
            this.visiable = false;
        },
        async ok() {
            this.loading = true;
            await (this.onok && this.onok());
            this.loading = false;
            this.visiable = false;
        },
    },
};
</script>