Vue3+Ts封装类似el-drawer的抽屉组件

提供9个字段对drawer组件进行控制：

• modelValue: 对抽屉显示隐藏进行控制,

• width: 控制抽屉的宽度,

• title: 控制抽屉的标题,

• appendToBody: 是否将抽屉添加至body,

• closeOnClickModal: 是否点击遮罩层关闭抽屉,

• showConfirm: 是否显示确认按钮,

• showCancel: 是否显示取消按钮,

• cancelText: 取消按钮的文本,

• confirmText: 确认按钮的文本

drawer.vue代码如下

<template><teleport v-if="appendToBody" to="body"><transition name="drawer-fade"><div v-show="visible" class="drawer-overlay" @click.self="handleCloseModal"><div class="drawer-content" :style="drawerStyle" @click.stop><div class="drawer-header"><div class="title-content"><div class="drawer-close-button" @click="handleClose">X</div><span>{{ title }}</span></div><div class="drawer-btn"><div v-if="showCancel" class="drawer-button" @click="handleCancel">{{ cancelText }}</div><div v-if="showConfirm" class="drawer-button" @click="handleSure">{{ confirmText }}</div></div></div><div class="mes-drawer-layout-main"><slot></slot></div></div></div></transition></teleport><transition name="drawer-fade" v-else><div v-show="visible" class="drawer-overlay" @click.self="handleCloseModal"><div class="drawer-content" :style="drawerStyle" @click.stop><div class="drawer-header"><div class="title-content"><div class="drawer-close-button" @click="handleClose">X</div><span>{{ title }}</span></div><div class="drawer-btn"><div v-if="showCancel" class="drawer-button" @click="handleCancel">{{ cancelText }}</div><div v-if="showConfirm" class="drawer-button" @click="handleSure">{{ confirmText }}</div></div></div><div class="mes-drawer-layout-main"><slot></slot></div></div></div></transition>
</template><script lang="ts" setup>
import { ref, watch, computed } from "vue";
const props = withDefaults(defineProps<{modelValue?: boolean;width?: string;title?: string;appendToBody?: boolean;closeOnClickModal?: boolean;showConfirm?: boolean;showCancel?: boolean;cancelText?: string;confirmText?: string;}>(),{modelValue: false,width: "30%",title: "",appendToBody: true,closeOnClickModal: false,showConfirm: true,showCancel: true,cancelText: "取消",confirmText: "确认"}
);const emit = defineEmits<{(event: "update:modelValue", value: boolean): void;(event: "beforeClose"): void;(event: "on-cancel"): void;(event: "on-sure"): void;
}>();const visible = ref(props.modelValue);watch(() => props.modelValue,newVal => {visible.value = newVal;}
);const drawerStyle = computed(() => ({width: props.width,height: "100%"
}));function handleCloseModal() {if (props.closeOnClickModal) {handleClose();}
}function handleClose() {emit("beforeClose");emit("update:modelValue", false);
}function handleCancel() {emit("on-cancel");
}function handleSure() {emit("on-sure");
}
</script><style lang="scss" scoped>
.drawer-overlay {z-index: 999;position: fixed;top: 0;right: 0;bottom: 0;left: 0;background-color: rgba(0, 0, 0, 0.5);display: flex;justify-content: flex-end;align-items: center;.drawer-content {background: #333333;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);transition: transform 0.3s ease;position: relative;z-index: 1000;display: flex;flex-direction: column;.drawer-header {display: flex;align-items: center;justify-content: space-between;height: 56px;padding: 0 16px;border-bottom: 1px solid #efefef;color: #ffffff;.title-content {display: flex;align-items: center;span {margin-left: 12px;}.drawer-close-button {font-size: 16px;cursor: pointer;}}.drawer-btn {display: flex;justify-content: flex-end;padding: 10px;.drawer-button {margin-left: 10px;display: inline-flex;justify-content: center;align-items: center;line-height: 1;height: 32px;white-space: nowrap;cursor: pointer;color: #fff;text-align: center;box-sizing: border-box;outline: 0;transition: 0.1s;font-weight: 500;-webkit-user-select: none;user-select: none;vertical-align: middle;-webkit-appearance: none;background-color: #2478f2;border: 1px solid #dcdfe6;border-color: #2478f2;padding: 8px 15px;font-size: 14px;border-radius: 4px;}}}.mes-drawer-layout-main {padding: 16px;box-sizing: border-box;flex: 1;color: #ffffff;}}
}
</style><style>
.drawer-fade-enter-active,
.drawer-fade-leave-active {transition: opacity 0.3s ease;
}.drawer-fade-enter,
.drawer-fade-leave-to {opacity: 0;
}
</style>

 使用方式：

<template><Drawerv-model="showDrawer"width="500px"title="抽屉"@before-close="drawerBeforeClose"@on-sure="handleDrawerSure"@on-cancel="handleDrawerCancel"><p>This is the drawer content</p></Drawer>
</template><script setup lang="ts">
import { ref } from "vue";
import Drawer from "@/components/Drawer/index.vue";
const showDrawer = ref(false);
const handleShowDetails = () => {console.log("跳转到详情页");showDrawer.value = true;
};
const drawerBeforeClose = () => {console.log("抽屉关闭前");showDrawer.value = false;
};
const handleDrawerSure = () => {console.log("抽屉确认");showDrawer.value = false;
};
const handleDrawerCancel = () => {console.log("抽屉取消");showDrawer.value = false;
};</script>