当前位置: 首页 > news >正文

vue3-tp8-Element:对话框实现

效果

参考框架

 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>

http://www.lryc.cn/news/503921.html

相关文章:

  • 高中数学:随机变量-正态分布
  • 游戏引擎学习第47天
  • Git 仓库托管教程
  • 基于51单片机的简易时钟/定时器闹钟proteus仿真
  • Jackson @JsonProperty 注解
  • 【Excel学习记录】02-单元格格式设置
  • 支持自定义离线地图地理区域,查询组件及数据源功能增强,DataEase开源BI工具v2.10.3 LTS发布
  • LF CRLF
  • 【从零开始入门unity游戏开发之——C#篇01】理论开篇,理解什么是编程
  • 怎样提升企业网络的性能?
  • 1. 机器学习基本知识(2)——机器学习分类
  • 四叉树算法在游戏碰撞检测中的应用
  • IDEA 打包普通JAVA项目为jar包
  • Docker Compose 多应用部署 一键部署
  • 软件架构设计——通用表单UI—未来之窗行业应用跨平台架构
  • 人工智能大语言模型起源篇(二),从通用语言微调到驾驭LLM
  • VBA 连续打印多个内容成PDF
  • 9. 高效利用Excel设置归档Tag
  • ubuntu系统生成SSL证书配置https
  • 顺序表(数据结构初阶)
  • AOF和RDB【Redis持久化篇】
  • 数据可视化大屏UI组件库:B端科技感素材PSD
  • 【力扣算法】234.回文链表
  • MVC流程分析
  • 编程中常见的技术难题有哪些?
  • 「Mac玩转仓颉内测版50」小学奥数篇13 - 动态规划入门
  • 前端退出对话框也就是点击右上角的叉,显示灰色界面,已经解决
  • 使div每次隐藏显示后都从顶部开始
  • 资源付费软件开发 资源付费系统源码 资源付费类型小程序APP
  • 文件的读写