代码如下： ``` <template> <div class="course-preview-dialog-container"> <el-dialog v-model="dialogVisible" title="Tips" width="500"> <span>This is a message</span> <template #footer> <div class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="dialogVisible = false"> 确认 </el-button> </div> </template> </el-dialog> </div> </template> <script setup lang="ts" name="tasks"> import { reactive, onMounted, toRefs, ref } from 'vue' const dialogVisible = ref(false) onMounted(() => {}) // 打开对话框 const openDialog = async (id: number) => { dialogVisible.value = true } // 暴露方法，让引用组件的地方可以直接使用 defineExpose({ openDialog }) </script> <style scoped="scoped" lang="scss"> .course-preview-dialog-container { padding: 15px; } </style> ```