drawer.vue

<template>
    <a-drawer
        placement="right"
        :visible="value"
        :drawerStyle="drawerStyle"
        :bodyStyle="bodyStyle"
        destroyOnClose
        :width="width"
        v-bind="$attrs"
        v-on="$listeners"
        @close="onClose"
    >
        <div class="tw-overflow-y-hidden tw-flex-1">
            <div class="tw-overflow-y-auto tw-h-full">
                <slot />
            </div>
        </div>
        <template>
            <a-divider />
            <a-space class="tw-justify-end">
                <a-button @click="cancel">取消</a-button>
                <slot name="footer">
                    <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,
        colesAfter: Function,
        value: Boolean,
        width: { type: Number, default: 600 },
    },
    model: {
        prop: 'value',
        event: 'change',
    },
    data() {
        return {
            loading: false,
            drawerStyle: {
                display: 'flex',
                flexDirection: 'column',
                overflowY: 'hidden',
            },
            bodyStyle: {
                flex: 1,
                overflow: 'hidden',
                display: 'flex',
                flexDirection: 'column',
            },
        };
    },
    methods: {
        cancel() {
            this.oncancel && this.oncancel();
            this.$emit('change', false);
        },
        onClose() {
            this.cancel();
        },
        async ok() {
            this.loading = true;
            try {
                await (this.onOk && this.onOk());
                this.$emit('change', false);
            } catch {
                // TODO
            }
            this.loading = false;
            this.colesAfter && this.colesAfter();
        },
    },
};
</script>