前端开发Vue3.0 标签setup语法『UI组件库』之『模态框』【业务提升必备】

 封装模态框需要定义的参数

  title //弹窗标题
  show   // 是否显示弹窗
  width  // 弹窗宽度
  height  // 弹窗高度
  borderRadius   // 弹窗圆角
  headerColor // 弹窗顶部颜色
  contentText // 内容文本
  contentTextCorder //内容文本颜色
  position // 标题的位置
  btnGroupShow // 按钮的显示隐藏
  confirmText // 确认按钮的文本
  cancelText // 取消按钮的文本

封装模态框需要定义的方法

const cancelHandler = () => {
    // 关闭弹窗的方法
}

const confirmHandler = () => {
   // 弹窗点击确认的方法
}

在components文件新建一个modal-dialog.vue文件

1、defineProps 在Vue 3中,defineProps 是一个用于定义传入组件的 Props 的函数。它通常用在组合式 API 或 Composition API 中。

2、defineEmits 的用法 defineEmits的用法是在子组件中定义接收父组件传过来的方法

<template><div class="modal-box" v-if="show"><div class="dialog-box" :style="{'background-color':props.contentTextCorder,'border-radius':props.borderRadius + 'px','text-align': props.position,'width':props.width + 'px','height':props.height + 'px'}"><header:style="{'background-color':headerColor,'border-top-left-radius':props.borderRadius + 'px','border-top-right-radius':props.borderRadius + 'px',}"><text>{{props.title}}</text></header><div class="icon" @click="cancelHandler">X</div><div class="content"><p v-if="props.contentText" :style="{'color':props.contentTextCorder}">{{props.contentText}}</p><slot name="content"></slot></div><footer><div class="btn-box"><button v-if="props.btnGroupShow" class="boom" @click="cancelHandler">{{props.cancelText }}</button><button v-if="props.btnGroupShow" class="boom" @click="confirmHandler">{{props.confirmText }}</button></div></footer></div></div>
</template><script setup>
import {defineProps,defineEmits} from "vue";
const emit = defineEmits(['confirm','close'])
const props = defineProps({//弹窗标题title:{type:String,default:'弹窗标题'},// 是否显示弹窗show:{type:Boolean,default:false},// 弹窗宽度width:{type:Number,default:500},// 弹窗高度height:{type:Number,default:200},// 弹窗圆角borderRadius:{type:Number,default:20},// 弹窗顶部颜色headerColor:{type:String,default:'blue'},// 内容文本contentText:{type:String,default:null},contentTextCorder:{type:String,default:'#fff'},position:{type:String,default:'center'},btnGroupShow:{type:Boolean,default:true},confirmText:{type:String,default:'是'},cancelText:{type:String,default:'否'}
})const cancelHandler = () => {emit('close')
}const confirmHandler = () => {emit('confirm')
}</script><style scoped>.modal-box{width: 100%;height: 100%;position: fixed;left: 0;top: 0;background-color: rgb(0,0,0,0.4);
}
.modal-box .dialog-box{background-color: #fff !important ;position: relative;left: 50%;top: 20%;transform: translate(-50%,-20%);
}
.icon{position: absolute;top: 10px;right: 15px;background-color: #ec6a5d;border-radius: 50%;width: 20px;height: 20px;text-align: center;color: #464444;font-size: 10px;line-height: 20px;
}
.icon:hover{cursor: pointer;
}
header{width: 100%;height: 40px;line-height: 40px;padding:0 10px 0 10px;box-sizing: border-box;
}
footer{width: 100%;height: 40px;position: absolute;left: 0;bottom: 0;display: flex;justify-content: flex-end;border-top: 1px solid #ccc;
}
footer .btn-box {width: 25%;height: 40px;display: flex;align-items: center;justify-content: space-around;
}
footer .btn-box button {height: 26px;
}
.content{width: 100%;padding:0 10px 0 10px;box-sizing: border-box;
}
button{border: 0;border-radius: 5%;cursor: pointer;
}.boom {background-color: #16a085;color: #fff;position: relative;z-index: 1;
}.boom::before {content: "";position: absolute;z-index: -1;top: 0;left: 0;bottom: 0;right: 0;border: 2px solid #16a085;border-radius: 20px;transform-origin: center;
}.boom:hover::before {transform: scale(1.25);transition: all ease-out .5s;border: 1px solid #96f3e0;opacity: 0;
}</style>

index.vue主组件

<template><div><ul><li>3243243242343243243242</li><li>3243243242343243243242</li><li>3243243242343243243242</li></ul><button @click="openDialog">打开弹窗</button><modal-dialog:title="title":show="isShow":width="500":height="200":borderRadius="10"headerColor="skyblue"contentText="This is a super modal this is a super madel"contentTextCorder="red"position="left":btnGroupShow="true"confirmText="确定"cancelText="取消"@confirm="modalConfirm"@close="modalClose"><template v-slot:content><h3>我是具名插槽</h3></template></modal-dialog></div>
</template><script setup>
// 引入组件不用注册
import modalDialog from './components/modal-dialog.vue'import {ref} from 'vue'
const title = ref('我是弹窗')
const isShow = ref(false)// 弹窗的确认事件const modalConfirm = () => {isShow.value = false
}// 弹窗的关闭事件const modalClose = () => {isShow.value = false
}const openDialog = () => {isShow.value = true
}</script><style>
a{color: skyblue;
}
</style>

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

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

相关文章

OpenCV 算法解析

opencv大坑之BGR opencv对于读进来的图片的通道排列是BGR&#xff0c;而不是主流的RGB&#xff01;谨记&#xff01; #opencv读入的矩阵是BGR&#xff0c;如果想转为RGB&#xff0c;可以这么转 img4 cv2.imread(1.jpg) img4 cv2.cvtColor(img4,cv2.COLOR_BGR2RGB) OpenCV 常见…

自定义 View(六) 自定义评分星星

先看看效果图 1.自定义 View 的基本流程 创建 View Class创建 attr 属性文件&#xff0c;确定属性View Class 绑定 attr 属性onMeasure 测量onDraw 绘制onTouchEvent ( 用户交互需要处理 ) 1.1 创建 View Class package com.example.view_day05_ratingbar;import android.…

javaweb会话技术

cookie的入门使用 package com.hspedu.cookie;import javax.servlet.ServletException; import javax.servlet.http.Cookie; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import …

GAMES104里渲染等一些剩下的问题

渲染的一些剩下的问题 1. 如何理解渲染中的AO(环境光遮蔽) 环境光遮蔽 我们先从一个简单的效果开始—环境光遮蔽(Ambient Occlusion,以下简称AO)。大家可以看到&#xff0c;下图中的场景没有任何渲染效果&#xff0c;也没有任何着色效果&#xff0c;但场景呈现出了非常清晰的…

面试-杨辉三角python递归实现,二进制转换

杨辉三角 def yang_hui(x,y):xint(x)yint(y)assert x>y,列数不应该大于行数# x 表示行&#xff0c;y表示列if y1 or yx:return 1else:return yang_hui(x-1,y-1)yang_hui(x-1,y)xinput(输入第几行) yinput(输入第几列) resultyang_hui(int(x),int(y)) print(result) #inclu…

前端开发中的常见优化

目录 外观 组件库&#xff08;无法满足->接口&#xff1f;->自定义/封装&#xff09; 兼容 不同尺寸&#xff08;包裹&#xff0c;height:100%&#xff09; 不同 浏览器 隐藏滚动条 的 不同属性名 重排->重绘 不显示 display:none->禁用disable 性能 导航…

libuv库学习笔记-basics_of_libuv

Basics of libuv libuv强制使用异步和事件驱动的编程风格。它的核心工作是提供一个event-loop&#xff0c;还有基于I/O和其它事件通知的回调函数。libuv还提供了一些核心工具&#xff0c;例如定时器&#xff0c;非阻塞的网络支持&#xff0c;异步文件系统访问&#xff0c;子进…

【学习笔记】关于图像YUV格式分类和排布方式的全学习

这里是尼德兰的喵学习笔记相关文章&#xff0c;欢迎您的访问&#xff01; 如果文章对您有所帮助&#xff0c;期待您的点赞收藏 让我们一起为芯片前端全栈工程师而努力 目录 前言 YUV格式导图 YUV444 packed planar I444 YV24 semi-planar NV24 NV42 YUV422 packed …

华为数通HCIA-网络模型

TCP 网络通信模式 作用&#xff1a;指导网络设备的通信&#xff1b; OSI七层模型&#xff1a; 7.应用层&#xff1a;由应用层协议&#xff08;http、FTP、Telnet.&#xff09;为应用程序产生对应的数据&#xff1b; 6.表示层&#xff1a;将应用层产生的数据转换成网络设备看…

《现代C++教程》笔记(5-7)

文章目录 5 智能指针与内存管理5.1 RAII与引用计数5.2 std::shared_ptr5.3 std::unique_ptr5.4 std::weak_ptr 6 正则表达式7 并行与并发7.1 并行基础7.2 互斥量与临界区7.3 期物7.4 条件变量7.5 原子操作与内存模型 5 智能指针与内存管理 5.1 RAII与引用计数 在传统 C 中&am…

一个月学通Python(二十八):Python网络数据采集(爬虫)概述(爬虫)

专栏介绍 结合自身经验和内部资料总结的Python教程,每天3-5章,最短1个月就能全方位的完成Python的学习并进行实战开发,学完了定能成为大佬!加油吧!卷起来! 全部文章请访问专栏:《Python全栈教程(0基础)》 文章目录 专栏介绍什么是爬虫爬虫的应用领域爬虫合法性探讨R…

Go语言中的结构体详解

关于 Golang 结构体 Golang 中没有“类”的概念&#xff0c;Golang 中的结构体和其他语言中的类有点相似。和其他面向对 象语言中的类相比&#xff0c;Golang 中的结构体具有更高的扩展性和灵活性。 Golang 中的基础数据类型可以表示一些事物的基本属性&#xff0c;但是当我们…

HuggingGPT Solving AI Tasks with ChatGPT and its Friends in Hugging Face

总述 HuggingGPT 让LLM发挥向路由器一样的作用&#xff0c;让LLM来选择调用那个专业的模型来执行任务。HuggingGPT搭建LLM和专业AI模型的桥梁。Language is a generic interface for LLMs to connect AI models 四个阶段 Task Planning&#xff1a; 将复杂的任务分解。但是这里…

Android.mk中的LOCAL_OVERRIDES_PACKAGES用法

Android.mk中的LOCAL_OVERRIDES_PACKAGES用法_mk local_over_觅风者的博客-CSDN博客 Android.mk中的LOCAL_OVERRIDES_PACKAGES的用法说明可以参考以下文章&#xff1a; Android.mk覆盖替换LOCAL_OVERRIDES_PACKAGES 此变量可以使其他的模块不加入编译 项目中遇到的问题&…

C语言复合赋值符和运算符的优先级问题

结论&#xff1a; 复合赋值符的优先级小于运算符 【练习1】 a * a / b的运算顺序是什么&#xff1f; a / b * a 【练习2】 x / 3 2 * 3 2 / 3 6 2 x 0

【力扣周赛】第 355 场周赛(构造二分答案异或前缀 状态压缩⭐)

文章目录 Q1&#xff1a;6921. 按分隔符拆分字符串&#xff08;双指针&#xff09;Q2&#xff1a;6915. 合并后数组中的最大元素&#xff08;倒序遍历贪心&#xff09;代码优化 Q3&#xff1a;6955. 长度递增组的最大数目&#x1f6b9;&#x1f6b9;&#x1f6b9;&#x1f6b9;…

【python】 清空socket缓冲区

在Python中使用Socket进行网络通信时&#xff0c;可以通过调用socket.recv()函数来接收数据&#xff0c;数据会被存储在缓冲区中。有时候&#xff0c;可能想要先清空缓冲区&#xff0c;以便后续的数据不会被之前的数据影响。以下是一种清空Python Socket缓冲区的方法&#xff1…

【JavaEE初阶】——第七节.Servlet入门学习笔记

作者简介&#xff1a;大家好&#xff0c;我是未央&#xff1b; 博客首页&#xff1a;未央.303 系列专栏&#xff1a;JavaEE进阶 每日一句&#xff1a;人的一生&#xff0c;可以有所作为的时机只有一次&#xff0c;那就是现在&#xff01;&#xff01;&#xff01; 文章目录 前…

【ARM 常见汇编指令学习 5 -- arm64汇编指令 wzr 和 xzr】

文章目录 ARM64 zero registerARMv8 zero 寄存器的背景xzr 在寄存器读写操作中的使用 上篇文章&#xff1a;ARM 常见汇编指令学习 4 – ARM64 比较指令 cbnz 与 b.ne 区别 下篇文章&#xff1a;ARM 常见汇编指令学习 6 - bic(位清除), orr(位或), eor(异或) ARM64 zero registe…

安全攻击 --- XSS攻击

XSS跨站脚本攻击 &#xff08;1&#xff09;简介 OWASP TOP 10 之一&#xff0c;XSS被称为跨站脚本攻击&#xff08;Cross-Site-Scripting&#xff09;主要基于JavaScript&#xff08;JS&#xff09;完成攻击行为XSS通过精心构造JS代码注入到网页中&#xff0c;并由浏览器解释…