vue中封装一个弹窗

news/2024/10/30 15:24:48/文章来源:https://www.cnblogs.com/dingshaohua/p/18515884

vue3

父元素

<template>
<div class="app"><some-modal v-model:visible="modalVisible" />
</div>
</template>
<script setup>import { ref } from "vue";import SomeModal from "@/components/some-modal.vue";const modalVisible = ref(false);setTimeout(()=>{ // 1秒之后打开弹窗modalVisible.value = true;},1000)
</script>

自组件(封装的弹窗组件)

<template><el-dialog title="xx弹窗" v-model:visible="dialogShow"><button @click="close()">关闭弹窗</button></el-dialog>
</template>
<script setup>
import { defineProps, defineEmits, computed } from "vue";const props = defineProps(["visible"]);
const emit = defineEmits(["update:visible"]);
const dialogShow = computed({get: () => props.visible,set: (val) => emit("update:visible", val),
});const close = ()=>{dialogShow.value = false;
}
</script>

vue2

vue2基本一致,出了将模版中的 v-model:xxx 改为:xxx.sync

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/824165.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Nuxt.js 应用中的 imports:dirs 事件钩子详解

title: Nuxt.js 应用中的 imports:dirs 事件钩子详解 date: 2024/10/30 updated: 2024/10/30 author: cmdragon excerpt: imports:dirs 是 Nuxt.js 中的一个生命周期钩子,用于扩展导入目录。通过这个钩子,开发者可以灵活地添加、修改或删除项目中的导入目录,从而提高模块…

OSI模型

Java 复习笔记 OSI模型 开放式系统互联通信参考模型(英语:Open System Interconnection Reference Model,缩写为 OSI) 1-7 物联网叔会使用 (资源子网) 应用层为应用程序提供交互服务 。域名系统DNS文件传输FTP支持万维网(www)应用的HTTP协议,支持电子邮件的SMTP协议 表…

12 编程基础:语句与函数

编程有自己的语法, if,then,end if while循环 for循环 将语言打包成函数, 有专门的函数库公开使用,还有声音、图像库

ubuntu安装smaba

1、更新软件包列表sudo apt update2、安装Sambasudo apt install samba3、一旦安装完成,您可以编辑Samba配置文件sudo nano /etc/samba/smb.conf4、在此文件中,您可以设置共享目录和权限。例如,添加一个简单的共享[share]comment = Samba on Ubuntupath = /media/usb/sharer…

刚刚买的域名被DNS劫持了怎么处理

在当今数字化的时代,域名作为网络世界的重要标识,对于个人和企业的在线业务都至关重要。然而,有时会遭遇令人头疼的问题,比如新买的域名被DNS劫持。这不仅会影响网站的正常访问,还可能导致用户信息泄露、业务受损等严重后果。那么,当我们面临这种情况时,应该如何妥善处理…

【笔记】【Android】Manifest中的intent-filter使用

【笔记】【Android】Manifest中的intent-filter使用笔记系列,内容是从网络搜索的结果,不一定是正确的理解。 如果存在谬误,欢迎大家指正。intent-filter是为了标明Activity,Service或者Braodcast Receiver可以相应的intent类型。 基本结构 <activity android:name="…

IIS禁用自动回收

主要设置了线程池里面的 1、启动模式: 由默认值改为AlwaysRunning2、 固定时间间隔:由默认1740 改为 03、将闲置空闲时间改为 0

grafana如何使用定义的变量

1.先看效果 2.定义变量 3.sql语句中使用变量

日志管理系统的系统目标是什么?

在网络安全、数据管理、故障排查等领域,日志都被广泛使用并需要进行有效的管理与分析。因此,日志管理系统的系统目标显得尤为重要,如以下几方面。 1、确保数据的安全性及完整性 在企业和组织的日常运营中,各类信息数据都会通过系统生成和传递,而这种数据往往是宝贵且敏感…

239. 滑动窗口最大值(难)

目录题目法一、暴力枚举法二、双端队列 题目给你一个整数数组 nums,有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。返回 滑动窗口中的最大值 。法一、暴力枚举遍历数组,获取每个窗口的子数…

Jenkins执行Shell脚本超时错误处理指南

Jenkins执行Shell脚本超时错误处理指南 在使用Jenkins进行自动化测试时,经常会遇到需要执行Shell脚本的情况。然而,当Shell脚本执行时间过长,超过了Jenkins配置的超时限制时,就会导致构建任务失败。本文将为你详细介绍如何处理Jenkins执行Shell脚本时的超时错误。 问题现象…