vue3 抽取el-drawer子组件

vue3 抽取el-drawer子组件

• MyDrawer.vue

<template><el-drawerv-model="isOpen":title="title"width="30%":before-close="handleBeforeClose"@close="handleClose"><!-- 抽屉内容 --><!-- 底部 --><template #footer><slot name="footer"><el-button @click="handleCancel">取消</el-button><el-button type="primary" @click="handleConfirm">确定</el-button></slot></template></el-drawer>
</template><script setup>
import { defineProps, defineEmits, watch } from 'vue';// 定义接收的 props
const props = defineProps({// 控制抽屉显示/隐藏（v-model 绑定）modelValue: {type: Boolean,default: false},// 抽屉标题title: {type: String,default: '抽屉'}
});// 定义触发的事件
const emit = defineEmits(['update:modelValue', // 用于 v-model 双向绑定'close', // 抽屉关闭时触发'confirm', // 点击确定按钮时触发'cancel' // 点击取消按钮时触发
]);// 内部维护的显示状态（避免直接修改 props）
const isOpen = ref(props.modelValue);watch(() => props.modelValue,(newVal) => {isOpen.value = newVal;}
);// 关闭抽屉（更新父组件状态）
const closeDrawer = () => {emit('update:modelValue', false);
};const handleBeforeClose = (done) => {if (props.beforeClose) {props.beforeClose(done);} else {done(); }
};const handleClose = () => {emit('close');
};const handleCancel = () => {emit('cancel');closeDrawer();
};const handleConfirm = () => {emit('confirm');closeDrawer();
};
</script>

• 使用

<MyDrawer v-model="openDrawer" title="详情" @confirm="handleDrawerConfirm" @cancel="handleDrawerCancel" @close="handleDrawerClose" />