TNBLOG
首页
博客
视频
资源
问答
猿趣
手机
关于
搜索
收藏
便签
笔记
消息
创作
登录
忆点点
情不知从何起,一往而情深
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
.net
35篇
.net core
15篇
cdn
1篇
云服务
1篇
前端
71篇
后端
6篇
随笔
19篇
架构
1篇
linux
6篇
git
3篇
virtualbox
1篇
app
1篇
英语
4篇
redis
4篇
docker
4篇
更多
mysql
6篇
sqlsugar
4篇
uni_app
4篇
数据库
1篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
转
开发一个简单的 Vue 弹窗组件。Vue实现弹窗
2831
人阅读
2023/3/23 14:30
总访问:
773250
评论:
0
收藏:
1
手机
分类:
前端
一个弹窗组件通常包含两个部分,分别是遮罩层和内容层。 遮罩层是背景层,一般是半透明或不透明的黑色。 内容层是放我们要展示的内容的容器。 ``` <template> <div class="modal-bg" v-show="show"> <div class="modal-container"> <div class="modal-header"> {{ title }} </div> <div class="modal-main"> <slot></slot> </div> <div class="modal-footer"> <button @click="hideModal">取消</button> <button @click="submit">确认</button> </div> </div> </div> </template> ``` 现在弹窗组件的结构已经搭建出来了。 - 类 modal-bg: 遮罩层 - 类 modal-container: 内容层容器 - 类 modal-header: 内容层头部 - 类 modal-main: 内容层主体部分(用来展示内容) - 类 modal-footer: 内容层脚部 - 属性 v-show: 控制弹窗的展示与关闭 - 属性 title: 标题 - 方法 hideModal: 点击取消的回调函数 - 方法 submit: 点击确认的回调函数 - 插槽 slot: 用来展示内容 定义完 HTML 结构,还得定义组件的 props 属性,用来接收父组件的传参,以方便在父组件通过属性来控制弹窗。 ``` export default { name: 'modal', props: { show: { type: Boolean, default: false }, title: { type: String, default: '' }, }, methods: { hideModal() { this.$emit('hideModal') }, submit() { this.$emit('submit') }, } } ``` 从上述代码可知,组件只有两个 prop 属性,分别是 show(控制弹窗展示与关闭)和 title(弹窗标题)。 另外还有两个方法,分别是点击取消和确认的回调函数,它们的作用是触发对应的事件。 到这里,一个简单的弹窗组件已经完成了(样式后面再说)。 ### 如何调用 一个组件写完了,要怎么调用呢? 假设这个组件的文件名为 Modal.vue,我们在父组件里这样调用 (假设父组件和弹窗组件在同一文件夹下)。 ``` <Modal :show="show" :title="title" @hideModal="hideModal" @submit="submit"> <p>这里放弹窗的内容</p> </Modal> ``` ``` import Modal from './Modal.vue' export default { data() { return { title: '弹窗标题', show: true, } }, components: { Modal }, methods: { hideModal() { // 取消弹窗回调 this.show = false }, submit() { // 确认弹窗回调 this.show = false } } } ``` 把子组件要求的两个属性和两个方法都写上,一个简单的弹窗组件就这样完成了。 ### 改进 #### 样式 现在市面上的 UI 库特别多,所以一些通用的组件样式不建议自己写,直接用现成的就好。在这个组件上,我们可以使用 element-ui,改造后变成这样。 ``` <template> <div class="modal-bg" v-show="show"> <div class="modal-container"> <div class="modal-header"> {{ title }} </div> <div class="modal-main"> <slot></slot> </div> <div class="modal-footer"> <el-button round @click="hideModal">取消</el-button> <el-button type="primary" round @click="submit">确认</el-button> </div> </div> </div> </template> ``` 嗯... 看起来只有两个按钮变化了,不过没关系,后面的内容部分肯定还有用得上的时候。 #### 功能 看起来这个简单的弹窗组件真的是非常简单,我们可以在此基础上适当的增加一些功能,例如:拖拽。 一个弹窗组件的拖拽一般通过三个事件来控制,分别是 mousedown、mousemove、mouseup。 - mousedown 用来获取鼠标点击时弹窗的坐标 - mousemove 用来计算鼠标移动时弹窗的坐标 - mouseup 取消弹窗的移动 先来看代码。 ``` <template> <div class="modal-bg" v-show="show" @mousemove="modalMove" @mouseup="cancelMove"> <div class="modal-container" :class="position"> <div class="modal-header" @mousedown="setStartingPoint"> {{ title }} </div> <div class="modal-main"> <slot></slot> </div> <div class="modal-footer"> <el-button round @click="hideModal">取消</el-button> <el-button type="primary" round @click="submit">确认</el-button> </div> </div> </div> </template> ``` 在弹窗上增加了三个事件 mousedown、mousemove、mouseup,用来控制弹窗移动(点击弹窗头部进行拖拽)。 ``` data() { return { x: 0, // 弹窗 X 坐标 y: 0, // 弹窗 Y 坐标 node: null, // 弹窗元素 isCanMove: false // 是否能拖动弹窗 } }, mounted() { // 将弹窗元素赋值给 node this.node = document.querySelector('.modal-container') }, setStartingPoint(e) { this.x = e.clientX - this.node.offsetLeft this.y = e.clientY - this.node.offsetTop this.isCanMove = true }, modalMove(e) { if (this.isCanMove) { this.node.style.left = e.clientX - this.x + 'px' this.node.style.top = e.clientY - this.y + 'px' } }, cancelMove() { this.isCanMove = false } ``` 通过这些新增的代码,这个弹窗就具有了拖拽的功能。 最后附上这个弹窗组件的完整代码 ``` <template> <div class="modal-bg" v-show="show" @mousemove="modalMove" @mouseup="cancelMove"> <div class="modal-container"> <div class="modal-header" @mousedown="setStartingPoint"> {{ title }} </div> <div class="modal-main"> <slot></slot> </div> <div class="modal-footer"> <el-button round @click="hideModal">取消</el-button> <el-button type="primary" round @click="submit">确认</el-button> </div> </div> </div> </template> ``` ``` <script> export default { name: 'modal', props: { show: { type: Boolean, default: false }, title: { type: String, default: '' }, }, data() { return { x: 0, y: 0, node: null, isCanMove: false } }, mounted() { this.node = document.querySelector('.modal-container') }, methods: { hideModal() { this.$emit('hideModal') }, submit() { this.$emit('submit') }, setStartingPoint(e) { this.x = e.clientX - this.node.offsetLeft this.y = e.clientY - this.node.offsetTop this.isCanMove = true }, modalMove(e) { if (this.isCanMove) { this.node.style.left = e.clientX - this.x + 'px' this.node.style.top = e.clientY - this.y + 'px' } }, cancelMove() { this.isCanMove = false } } } </script> ``` ``` <style scoped> .modal-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); z-index: 10; } .modal-container { background: #fff; border-radius: 10px; overflow: hidden; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); } .modal-header { height: 56px; background: #409EFF; color: #fff; display: flex; align-items: center; justify-content: center; cursor: move; } .modal-footer { display: flex; align-items: center; justify-content: center; height: 57px; border-top: 1px solid #ddd; } .modal-footer button { width: 100px; } .modal-main { padding: 15px 40px; } </style> ``` 原文:https://blog.csdn.net/weixin_42176612/article/details/112264679 #### 如果弹窗打开关闭需要有一点淡入谈出的动画 可以在外面包括一层transition组件 ``` <template> <transition name="fade"> <div class="modal-bg" v-show="show" @mousedown="setStartingPoint" @mousemove="modalMove" @mouseup="cancelMove"> <div class="modal-container"> <!-- <div class="modal-header" @mousedown="setStartingPoint"> {{ title }} </div> --> <div class="header_wrap"> 2022级计算机1班 <img :src="require('@/assets/img/close.png')" @click="$emit('closemodal')" style="height: 13px;width: 13px;cursor: pointer;position:absolute;right: 13px;top:13px" alt=""> </div> <div class="modal-main"> <slot></slot> </div> <!-- <div class="modal-footer"> <el-button round @click="hideModal">取消</el-button> <el-button type="primary" round @click="submit">确认</el-button> </div> --> </div> </div> </transition> </template> ``` 然后在写一点样式即可 ``` // 写一点淡入谈出的动画试试 .fade-leave, // 离开前,进入后透明度是1 .fade-enter-to { opacity: 1; } .fade-leave-active, .fade-enter-active { transition: all 1s; //过度时间 } .fade-leave-to, .fade-enter { opacity: 0; } ``` ### 在有滚动条的情况下垂直居中 参考:https://blog.csdn.net/rinima6114/article/details/17596019 当然如果是在大屏那种按比例自适的,其实偏移值按照比例写死就行了,不用动态计算,按比例自适其实就是动态计算了,所以偏移量就设置固定的值就行了,那个比例会自动计算在不同分辨率下的扩大缩小比例。
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}