vue3-tp8-Element:对话框实现

效果

参考框架

Dialog 对话框 | Element Plus

具体实现

一、建立view页面

/src/views/TestView.vue

二、将路径写入路由

/src/router/index.js

javascript 复制代码

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、代码实现

html 复制代码

<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、代码实现

html 复制代码

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