效果
参考框架
Dialog 对话框 | Element Plus
具体实现
一、建立view页面
/src/views/TestView.vue
二、将路径写入路由
/src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [//将子项全部存入一个大的路由中layout/index.vue，页面刚进入时调用的时layout/index.vue，在为导航条，默认显示页面/home的内容{path: '/',component: () => import('@/layout/index.vue'),redirect: '/home',//默认重定向children: [{path: '/home',name: 'home',component: HomeView,},{path: '/about',name: 'about',component: () => import('../views/AboutView.vue'),},]},//登录{path: '/login',name: 'login',component: () => import('../views/LoginView.vue'),},//404{path: '/:pathMatch(.*)*',name: 'not-found',component: () => import('@/views/NotFoundView.vue')},//测试页面{path: '/test',name: 'test',component: () => import('../views/TestView.vue')},],
})export default router
三、弹窗（对话框）页面搭建
1、建立页面
/src/components/TestDialog.vue
2、代码实现
<template><!-- 使用Element框架:对话框 --><!-- v-model="dialogVisible" 绑定对话框显示状态 title="Tips":对话框标题width="500":对话框宽度:before-close="handleClose" 关闭对话框前的回调函数--><el-dialogv-model="dialogVisible"title="Tips"width="500":before-close="handleClose"><span>This is a message</span><template #footer><div class="dialog-footer"><!-- 关闭弹窗的点击事件,点击就设置dialogVisible的值为false, --><el-button @click="dialogVisible = false">Cancel</el-button><el-button type="primary" @click="dialogVisible = false">Confirm</el-button></div></template></el-dialog>
</template>
<script setup>
// 引入计算属性
import { computed } from "vue";//声明父组件的属性showDialog,类型为Boolean,默认值为false
const props = defineProps({showDialog: {type: Boolean,default: false,},
});
//定义emit,用于出发自定义事件,defineEmits声明组件可以触发的事件
// ["update:showDialog"]：数组-列出了组件可以触发的事件名称，这里是update:showDialog事件
const emit = defineEmits(["update:showDialog"]);
//设置父组件的属性showDialog的值，通过dialogVisible.value来设置，
// 因为dialogVisible是一个计算属性，所以可以直接通过dialogVisible.value来设置
const dialogVisible = computed({get: () => props.showDialog, //获取父组件showDialog的值set: (val) => emit("update:showDialog", val), //设置父组件showDialog的值(触发自定义事件，将子组件的值传给父组件)
});
</script>
四、TestView.vue实现弹窗功能
1、代码实现
<template><span @click="showDialog1 = true"> 点击出现弹窗 </span><!-- 写入弹窗 --><TestDialog:showDialog="showDialog1"@update:showDialog="(v) => (showDialog1 = v)"></TestDialog>
</template>
<script setup>
// script setup 是一种新的语法糖，用于简化组合式 API 的使用。
// ref是一个创建响应式数据的方法,返回一个可变的响应式对象,该对象具有一个指向内部值的.value属性,当值发生变化,Vue会自动更新相关的视图
import { ref } from "vue";
//引入需要打开的弹窗组件
import TestDialog from "@/components/TestDialog.vue";
//设置弹窗显示状态的默认值为false关闭
const showDialog1 = ref(false);
</script>
