vue3 简单的页面基础模板-element plus的弹窗以及暴露方法出去

代码如下：

<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>