效果
参考框架
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-dialog
v-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>
