手写弹框组件

文章目录

手写弹框组件
前言
一、Element-UI的弹框
二、如何自己手写？

前言

首先，分析一下Element-UI的对话框，点击，会弹出一个对话框。对话框由具体的弹框内容、关闭或确认按钮、外围的遮罩层组成。首先，先看下elmentui的用法：

一、Element-UI的弹框

el-dialog组件里面可进行配置

<el-dialogv-model="dialogVisible"title="Tips"width="30%":before-close="handleClose"><span>This is a message</span><template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">Cancel</el-button><el-button type="primary" @click="dialogVisible = false">Confirm</el-button></span></template></el-dialog>

效果：

二、如何自己手写？

1、dom实现：
外面的div实现遮罩层，里面的div是具体的内容

<div class="el_dialog"><div class="el_dialog__content"><slot/></div>
</div>

css：

.el_dialog {position: fixed;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);display: flex;flex-direction: column;justify-content: center;align-items: center;margin: 0;padding: 0;}.el_dialog__content {width: v-bind(width1);height: 400px;background-color: white;display: flex;flex-direction: column;justify-content: center;align-items: center;}

2、弹框类的组件都需要直接渲染在body标签下面。因为弹框类组件都是绝对定位，如果在组件内部渲染，组件的css属性会影响弹框组件的渲染样式（可以尝试下，比如会出现浮动等），为了避免这种问题的出现，弹窗组件Dialog、Notification都需要渲染在body内部。
怎么渲染呢？可以使用vue3自带的Teleport，可以很方便地渲染到body上：

<template><teleportto="body"><div class="el_dialog"><div class="el_dialog__content" :style="DialogStyle"><slot/></div></div></teleport>
</template>

3、为了使样式可以可配置，可以在使用组件时传入一个对象，这个对象里面包含了样式，然后在组件中绑定这个样式：

<template><teleportto="body"><div class="el_dialog"><div class="el_dialog__content" :style="DialogStyle"><slot/></div></div></teleport>
</template>
<script>
export default {name:'Dialog',props: {DialogStyle: {type: Object,default: function () {return {width: '800px',height: '400px','background-color': 'white',display: 'flex','flex-direction': 'column','justify-content': 'center','align-items': 'center'};},},}
}
</script>

实现效果：

弹框组件到此结束，全部代码可以从这下载https://github.com/LisaNcu/myElementUI.git

Element-UI源码学习——弹框组件相关推荐

从 Element UI 源码的构建流程看前端 UI 库设计
引言由于业务需要,近期团队要搞一套自己的UI组件库,框架方面还是Vue.而业界已经有比较成熟的一些UI库了,比如ElementUI.AntDesign.Vant等. 结合框架Vue,我们选择在Ele ...
element 源码学习一 Button 组件
父组件 test.vue <template><div class="war"><el-button type="primary" ...
修改element UI的select下拉框组件右边的小箭头（使用自定义图片）
i.el-select__caret {/*很关键:将默认的select选择框样式清除*/ appearance:none;-moz-appearance:none;-webkit-appearanc ...
element UI实现el-dialog（弹框）可拖拽功能（网上借鉴）
话不多说,直入主题 1.第一步,先封装可拖拽代码,我在这把文件命名为el-dragDialog,可放在utils文件下,如下 el-dragDialog文件下有两个js文件,分别是drag.js和in ...
Vue源码学习 - 组件化一 createComponent
Vue源码学习 - 组件化一 createComponent 组件化 createComponent 构造子类构造函数安装组件钩子函数实例化 VNode 总结学习内容和文章内容来自黄轶老师黄 ...
深入学习jquery源码之高德地图组件的使用
深入学习jquery源码之高德地图组件的使用高德地图组件是一类高度模块化的LBS服务组件,开发者通过调用相应标签便可轻松实现诸如在地图上标注点.查找附近poi.公交/驾车线路规划等功能.该类组件仅针 ...
开源中国源码学习UI篇（一）之FragmentTabHost的使用分析
最近在有意读开源中国的源码来提升Android开发能力,开通博客来提升一下自己的积极性- -我参考的是开源中国2.2版,完整源码地址为http://git.oschina.net/oschina/an ...
Vue源码学习 - 组件化(三) 合并配置
Vue源码学习 - 组件化(三) 合并配置合并配置外部调用场景组件场景总结学习内容和文章内容来自黄轶老师黄轶老师的慕课网视频教程地址:<Vue.js2.0 源码揭秘>. 黄轶 ...
开源中国源码学习UI篇（二）之NavigationDrawer+Fragment的使用分析
前文链接:开源中国源码学习UI篇(一)之FragmentTabHost的使用分析开源中国2.2版,完整源码地址为:http://git.oschina.net/oschina/android-app ...

Element-UI源码学习——弹框组件

手写弹框组件

文章目录

前言

一、Element-UI的弹框

二、如何自己手写？

Element-UI源码学习——弹框组件相关推荐

最新文章

热门文章