当前位置: 首页 > 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>

相关文章:

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.vueconst router create…...

35、Firefly_rk3399 同步互斥

文章目录 1、简述问题2、原子操作&#xff08;atomic_ops &#xff09;指令解析&#xff1a; 3、锁函数说明3.1、自旋锁API例子 3.2、信号量&#xff08;semaphore&#xff09;API例子 3.3、互斥量/锁API例子 3.4、信号量和互斥锁的区别 4、锁的内核实现4.1、自旋锁&#xff08…...

Docker-Dockerfile、registry

Dockerfile 一、概述 1、commit的局限 很容易制作简单的镜像&#xff0c;但碰到复杂的情况就十分不方便&#xff0c;例如碰到下面的情况&#xff1a; 需要设置默认的启动命令需要设置环境变量需要指定镜像开放某些特定的端口 2、Dockerfile是什么 Dockerfile是一种更强大的镜…...

chattts生成的音频与字幕修改完善,每段字幕对应不同颜色的视频,准备下一步插入视频。

上一节中&#xff0c;实现了先生成一个固定背景的与音频长度一致的视频&#xff0c;然后插入字幕。再合并成一个视频的方法。 但是&#xff1a;这样有点单了&#xff0c;所以&#xff1a; 1.根据字幕的长度先生成视频片断 2.在片段上加上字幕。 3.合并所有片断&#xff0c;…...

8、笔记本品牌分类介绍:LG - 计算机硬件品牌系列文章

LG笔记本品牌以其高性能和先进技术而闻名&#xff0c;‌提供多种型号以满足不同用户的需求。‌ LG笔记本产品线包括多种类型&#xff0c;‌以满足不同用户的需求。‌其中&#xff0c;‌LG Gram Pro系列以其超薄设计和高性能配置受到关注。‌该系列笔记本采用16:10的OLED显示屏&…...

在 Vue 2 中隐藏页面元素的方法

目录 在 Vue 2 中隐藏页面元素的方法 引言 1. 使用 v-if 指令 2. 使用 v-show 指令 3. 使用自定义类名与 v-bind:class 4. 使用内联样式与 v-bind:style 5. 使用组件的 keep-alive 和条件渲染 在 Vue 2 中隐藏页面元素的方法 引言 在开发 Web 应用时&#xff0c;我们经…...

基于springboot+vue的高校校园交友交流平台设计和实现

文章目录 系统功能部分实现截图 前台模块实现管理员模块实现 项目相关文件架构设计 MVC的设计模式基于B/S的架构技术栈 具体功能模块设计系统需求分析 可行性分析 系统测试为什么我&#xff1f; 关于我项目开发案例我自己的网站 源码获取&#xff1a; 系统功能 校园交友平台…...

Redis是什么?Redis和MongoDB的区别在那里?

Redis介绍 Redis&#xff08;Remote Dictionary Server&#xff09;是一个开源的、基于内存的数据结构存储系统&#xff0c;它可以用作数据库、缓存和消息中间件。以下是关于Redis的详细介绍&#xff1a; 一、数据结构支持 字符串&#xff08;String&#xff09; 这是Redis最…...

《开源时间序列数据:探索与应用》

《开源时间序列数据&#xff1a;探索与应用》 一、开源时间序列数据概述二、热门的开源时间序列数据库1. InfluxDB2. TimescaleDB3. Prometheus4. OpenTSDB5. Graphite6. Druid 三、开源时间序列数据的应用场景1. 物联网领域2. 金融领域3. 运维监控领域4. 能源领域 四、开源时间…...

Java后端面试场景题汇总

1.50 亿数据如何去重&排序? 如此大的数据集进行去重(例如50亿数据条目),我们需要考虑内存和存储空间的限制,同时还需要有一个高效的算法。一般来说,这样的数据量无法直接载入内存进行处理,因此需要采用磁盘存储和分布式处理的技术。主要有以下几种思路: 外部排序…...

方法引用和lambda表达式的奥妙

方法引用替代Lambda表达式 什么情况可以使用方法引用替代lambda表达式&#xff1f; 下面代码中两处使用了lambda表达式&#xff0c;一个是filter内&#xff0c;一个是forEach内。其中&#xff0c;forEach内的lambda表达式可以被方法引用替代&#xff0c;但是filter内的lambda…...

AI 智能名片 S2B2C 商城小程序在社群团购运营中的作用与价值

摘要&#xff1a;本文深入探讨了 AI 智能名片 S2B2C 商城小程序在社群团购运营中的重要作用。随着社群团购的兴起&#xff0c;如何有效运营成为关键问题。AI 智能名片 S2B2C 商城小程序凭借其独特功能&#xff0c;能够在促进消费者互动、提升产品传播效果、影响购买决策以及实现…...

设计模式の建造者适配器桥接模式

文章目录 前言一、建造者模式二、适配器模式2.1、对象适配器2.2、接口适配器 三、桥接模式 前言 本篇是关于设计模式中建造者模式、适配器模式&#xff08;3种&#xff09;、以及桥接模式的笔记。 一、建造者模式 建造者模式是属于创建型设计模式&#xff0c;通过一步步构建一个…...

.net framework手动升级到.net core注意点

因为项目原因&#xff0c;还使用着比较原始的 .NETFramework框架&#xff0c;但因为某种原因&#xff0c;暂时不让升级到.NET 6。为了能够解锁更多 VisualStudio2022的功能&#xff0c;尝试手动修改 csproj文件。 这个过程中&#xff0c;也会遇到不少坑&#xff0c;再次做个记…...

排队论、负载均衡和任务调度关系

目录 排队论、负载均衡和任务调度关系 一、排队论 二、负载均衡 三、任务调度 四、总结 排队论、负载均衡和任务调度关系 排队论为负载均衡和任务调度提供了数学理论和方法支持 排队论、负载均衡和任务调度是三个相关但不同的概念。以下是对这三个概念的详细解释和它们之…...

【C++图论】1042. 不邻接植花|1712

本文涉及知识点 C图论 LeetCode1042. 不邻接植花 有 n 个花园&#xff0c;按从 1 到 n 标记。另有数组 paths &#xff0c;其中 paths[i] [xi, yi] 描述了花园 xi 到花园 yi 的双向路径。在每个花园中&#xff0c;你打算种下四种花之一。 另外&#xff0c;所有花园 最多 有…...

AI开源南京分享会回顾录

AI 开源南京分享会&#xff0c;已于2024年11月30日下午在国浩律师&#xff08;南京&#xff09;事务所5楼会议厅成功举办。此次活动由 KCC南京、PowerData、RISC-Verse 联合主办&#xff0c;国浩律师&#xff08;南京&#xff09;事务所协办。 活动以“开源视角的 AI 对话”为主…...

Java版-图论-最短路-Floyd算法

实现描述 网络延迟时间示例 根据上面提示&#xff0c;可以计算出&#xff0c;最大有100个点&#xff0c;最大耗时为100*wi,即最大的耗时为10000&#xff0c;任何耗时计算出来超过这个值可以理解为不可达了&#xff1b;从而得出实现代码里面的&#xff1a; int maxTime 10005…...

ChatGPT大模型 创作高质量文案的使用教程和案例

引言 随着人工智能技术的飞速发展,大语言模型如 ChatGPT 在创作文案、生成内容方面展现出了强大的能力。无论是个人用户还是企业用户,都可以利用 ChatGPT 提高工作效率、激发创意、甚至解决实际问题。本文将详细介绍 ChatGPT 如何帮助创作各类高质量文案,并通过具体案例展示…...

SQL注入及解决

SQL注入是一种常见的网络攻击方式&#xff0c;攻击者通过在输入字段中插入恶意的SQL代码&#xff0c;诱使应用程序执行攻击者构造的SQL语句&#xff0c;从而达到非法获取数据、篡改数据或执行恶意操作的目的。 以下是SQL注入的主要原理总结&#xff1a; 1. 核心原理 SQL注入…...

uni-app多环境配置动态修改

前言 这篇文章主要介绍uniapp在Hbuilderx 中&#xff0c;通过工程化&#xff0c;区分不同环境、动态修改小程序appid以及自定义条件编译&#xff0c;解决代码发布和运行时手动切换问题。 背景 当我们使用uniapp开发同一个项目发布不同的环境二级路径不同时&#xff0c;这时候…...

EasyPlayer.js播放器如何在iOS上实现低延时直播?

随着流媒体技术的迅速发展&#xff0c;H5流媒体播放器已成为现代网络视频播放的重要工具。其中&#xff0c;EasyPlayer.js播放器作为一款功能强大的H5播放器&#xff0c;凭借其全面的协议支持、多种解码方式以及跨平台兼容性&#xff0c;赢得了广泛的关注和应用。 那么要在iOS上…...

mHand Pro动捕数据手套在人形机器人领域的具体运用

mHandPro是一款高精度的动作捕捉数据手套&#xff0c;可应用于动作捕捉与VR交互等领域&#xff0c;配套”mHand Studio“引擎&#xff0c;可实时捕捉真人手部位姿及运动轨迹数据&#xff0c;将数据导出还可以用于人形机器人的训练加速高精度机器人操作技能的培训进程。 高精度动…...

【css常用动画总结01】

一、效果如下&#xff1a; 屏幕录制2024-11-27 17.28.30 二、css常用动画代码&#xff1a; .flex-box{position: relative; } .animation-all {display: flex;p{margin:0;font-size: 12px;}.animate-test1 {width: 102.4px;height: 102.4px;background: url(../assets/images/…...

从入门到精通:系统化棋牌游戏开发全流程教程

棋牌游戏开发需要丰富的技术知识和全面的规划&#xff0c;从开发环境搭建到实际功能实现&#xff0c;步骤清晰且逻辑严谨。以下是完整教程&#xff0c;涵盖了每个关键环节&#xff0c;并提供相关软件的具体下载地址&#xff0c;助力开发者高效完成棋牌游戏项目。 一、开发环境准…...

MyBatis 框架学习与实践

引言 MyBatis 是一个流行的 Java 持久层框架&#xff0c;它提供了简单的方法来处理数据库中的数据。本文将结合笔记和图片内容&#xff0c;详细讲解 MyBatis 的使用&#xff0c;包括配置、注解、优化技巧以及如何处理特殊字符和参数。 1. MyBatis 基础 1.1 引入依赖 首先&a…...

数据可视化的Python实现

一、GDELT介绍 GDELT ( www.gdeltproject.org ) 每时每刻监控着每个国家的几乎每个角落的 100 多种语言的新闻媒体 -- 印刷的、广播的和web 形式的&#xff0c;识别人员、位置、组织、数量、主题、数据源、情绪、报价、图片和每秒都在推动全球社会的事件&#xff0c;GDELT 为全…...

微信小程序实现联动删除输入验证码框

以下是json代码 {"component": true,"usingComponents": {} }以下是wxml代码 <van-popup show"{{ show }}" bind:close"onClose" custom-class"extract"><image src"../../images/extract/icon1.png"…...

C语言程序设计P6-1【应用指针进行程序设计 | 第一节】——知识要点:指针的概念、定义和运算、指针变量作函数的参数

知识要点&#xff1a;指针的概念、定义和运算、指针变量作函数的参数 视频&#xff1a; 目录 一、任务分析 二、必备知识与理论 三、任务实施 一、任务分析 输入两个整数&#xff0c;按大小顺序输出&#xff0c;要求用函数处理&#xff0c;而且用指针类型的数据作函数参数…...

C++编程: 基于cpp-httplib和nlohmann/json实现简单的HTTP Server

文章目录 0. 引言1. 完整实例代码2. 关键实现3. 运行与测试 0. 引言 本文基于 cpp-httplib 和 nlohmann/json 实现简单的 HTTPS Server 实例代码&#xff0c;这两个库均是head-only的。 1. 完整实例代码 如下实例程序修改自example/server.cc #include <httplib.h>#i…...

多模态大模型(二)——用Transformer Encoder和Decoder的方法(BLIP、CoCa、BEiTv3)

文章目录 BLIP: Bootstrapping Language-Image Pre-training for Unified Vision-Language Understanding and Generation 理解、生成我都要&#xff0c;一个很有效的、根据图片生成caption的工具1. BLIP的研究动机2. BLIP的模型结构3. CapFilt Model4. BLIP的训练过程 CoCa: C…...

SpringBoot快速入门

SpringBoot 文章目录 SpringBoot1. Spring Boot 概念2. Spring 使用痛点3. Spring Boot功能4. 快速搭建5. 起步依赖原理6. SpringBoot 配置6.1 配置文件6.2 YAML介绍6.3 YAML语法6.4 YAML数据6.5 YAML参数引用 7.配置数据读取7.1 Value("${}")7.2 Environment7.3 Con…...

Qt编写区位码gb2312、机内码、国标码————附带详细介绍和编码实现

文章目录 0 背景1 了解编码1.1 ASCII码1.2 机内码、国标码、区位码1.2.1 区位码1.2.2 国标码&#xff08;GB 2312-80&#xff09;1.2.3 汉字机内码&#xff08;GB 2312&#xff09; 1.3 GBK和GB2312的区别2 编码实现2.1 QString数据转QByteArray类型2.1.1 使用QTextCodec2.1.2 …...

IDEA 未启用lombok插件的Bug

项目中maven已引用了lombok依赖&#xff0c;之前运行没有问题的&#xff0c;但有时启动会提示&#xff1a; java: You arent using a compiler supported by lombok, so lombok will not work and has been disabled. Your processor is: com.sun.proxy.$Proxy8 Lombok support…...

R语言学习笔记-1

1. 基础操作和函数 清空环境&#xff1a;rm(list ls()) 用于清空当前的R环境。 打印输出&#xff1a;print("Hello, world") 用于输出文本到控制台。 查看已安装包和加载包&#xff1a; search()&#xff1a;查看当前加载的包。install.packages("package_na…...

NFT的公链及开放联盟链信息整理

BSN链 名称内容类型开放联盟链网址https://www.bsnbase.com/节点信息登陆后可免费获取区块链浏览器可查看交易详情使用案例光明艺品、数藏中国、千寻数藏、集集文创、乾坤数藏 至信链 名称内容类型开放联盟链网址https://zxchain.qq.com/节点信息需要登录并充值后获取区块链…...

android notification

前言 在做应用时&#xff0c;时常需要在通知栏显示一条通知&#xff0c;那么具体流程是怎样的呢&#xff0c;怀着这样的探究目的&#xff0c;来进行一步步源码分析。 源码梳理 package com.android.server; ... public final class SystemServer implements Dumpable {...pr…...

C# 多态性

文章目录 前言一、多态性的定义二、C# 中的多态性实现方式1. 方法重写&#xff08;Overriding&#xff09;2. 方法重载&#xff08;Overloading&#xff09;3. 接口实现&#xff08;Interface implementation&#xff09; 三、多态性的优点1. 提高代码的可维护性2. 增强代码的可…...

类与对象以及ES6的继承

认识class定义类 类的声明用的比较多 类与构造函数的异同 类的构造函数 类的实例方法 类的访问器方法 在类里面写拦截方法 类的静态方法 通过类名直接访问 es6类的继承-extends super关键字 子类可以重写父类方法包括父类的静态方法也可以继承父类的静态方法 babel可以将新的代…...

每日一站技術架構解析之-cc手機桌布網

# 網站技術架構解析&#xff1a; ## 一、整體架構概述https://tw.ccwallpaper.com是一個提供手機壁紙、桌布免費下載的網站&#xff0c;其技術架構設計旨在實現高效的圖片資源管理與用戶訪問體驗優化。 ### &#xff08;一&#xff09;前端展示 1. **HTML/CSS/JavaScript基礎構…...

【橘子容器】如何构建一个docker镜像

你肯定打过docker镜像是吧&#xff0c;作为一个开发这很正常&#xff0c;那么你用的什么打包方式呢&#xff0c;这里我们来梳理几种常用的docker镜像构建方式。 ps&#xff1a;这里不是太讲原理&#xff0c;更多的是一种科普和操作。因为讲原理的东西网上已经够多了。 一、Dock…...

【漏洞复现】CVE-2024-34102 Magento Open Source XXE漏洞

目录 漏洞介绍 影响版本 环境搭建 查看版本 漏洞复现 手动复现 漏洞 poc Magento Open Source 是一个免费开源的电子商务平台&#xff0c;适合中小企业或开发团队通过自定义代码和插件创建在线商店。它由社区开发和支持&#xff0c;功能强大但需要更多的技术投入。Adobe…...

数据结构 ——二叉树转广义表

数据结构 ——二叉树转广义表 1、树转广义表 如下一棵树&#xff0c;转换为广义表 root(c(a()(b()()))(e(d()())(f()(j(h()())())))) (根&#xff08;左子树&#xff09;&#xff08;右子树&#xff09;) 代码实现 #include<stdio.h> #include<stdlib.h>//保存…...

Redis篇-6--原理篇5--单线程模型

1、概述 Redis 采用单线程模型来处理客户端请求&#xff0c;这意味着在任意时刻只有一个命令被执行。这种设计简化了 Redis 的实现&#xff0c;并确保了高并发环境下的数据一致性。尽管 Redis 是单线程的&#xff0c;但它通过高效的内存管理和网络 I/O 操作&#xff0c;仍然能…...

LSTM详解

1. LSTM设计 LSTM(长短期记忆网络)详解 长短期记忆网络(LSTM, Long Short-Term Memory) 是一种特殊的循环神经网络(RNN),特别适合处理和预测序列数据中的长时间依赖关系。LSTM 通过引入“门机制”(如输入门、遗忘门、输出门)来解决标准 RNN 在长时间序列任务中梯度消…...

Docker 安装 Seata2.0.0 (快速配置)

说明&#xff1a;已安装Docker、MySql等&#xff0c;案例使用Mysql数据库模式、Nacos配置信息 1、准备工作 1.1 拉取镜像 [rootTseng ~]# docker pull seataio/seata-server:2.0.0 2.0.0: Pulling from seataio/seata-server 001c52e26ad5: Already exists d9d4b9b6e964: P…...

文件断点续传(视频播放,大文件下载)

客户端每次请求取大文件部分数据。 浏览器播放mp4视频时&#xff0c;会首先传Range消息头&#xff0c;检测到206状态码&#xff0c;和Content-Range&#xff0c;Accept-Ranges 会自动请求余下数据。后端需要在文件任意偏移量取数据。 参考&#xff1a; springboot项目实现断…...

神经网络基础-初识神经网络

人工神经网络&#xff08; Artificial Neural Network&#xff0c; 简写为ANN&#xff09;也简称为神经网络&#xff08;NN&#xff09;&#xff0c;是一种模仿生物神经网络结构和功能的计算模型。人脑可以看做是一个生物神经网络&#xff0c;由众多的神经元连接而成。各个神经…...

爬虫获取的数据能否用于商业分析?

根据搜索结果&#xff0c;爬虫获取的数据能否用于商业分析&#xff0c;主要取决于以下几个因素&#xff1a; 数据的合法性与合规性&#xff1a; 爬虫技术本身并不违法&#xff0c;关键在于使用的方式和目的。爬虫技术的使用必须遵守相关法律法规&#xff0c;如《反不正当竞争法…...

【Java】3、并发编程 JUC(模块三:设计模式)

目录 Immutability模式Copy-on-Write模式线程本地存储模式Guarded Suspension模式&#xff08;保护性暂停&#xff09;Balking模式Thread-Per-Message模式Worker Thread模式两阶段终止模式生产者-消费者模式 Immutability模式 Copy-on-Write模式 线程本地存储模式 Guarded S…...