自定义Modal组件

弹窗效果

1.需求来源

因最近做移动端页面，页面是从pc端移动到手机端的，一些弹窗的功能也伴随移动，遂参考cub-ui编写了这个弹窗组件

2.代码编写

2.1css编写

.gf-modal {position: fixed;left: 0;right: 0;top: 0;bottom: 0;z-index: 100;pointer-events: none;&.gf-show-mask {pointer-events: auto;.gf-modal-mask {display: block;}}.gf-modal-mask,.gf-modal-container {position: absolute;width: 100%;height: 100%;}.gf-modal-mask {display: none;overflow: hidden;background-color: #25262d;opacity: 0.4;pointer-events: auto;}.gf-modal-container {transform: translate(100%, 100%);}.gf-modal-center {.gf-modal-content {transform: translate(-50%, -50%);top: -50%;left: -50%;width: auto;max-width: 100%;position: absolute;.gf-modal-main {border-radius: 5px;width: 95vw;padding: 0;text-align: center;overflow: hidden;background-color: #fff;.gf-modal-top {text-align: left;padding-left: 0.5rem;border-bottom: 1px solid #E5E5E5;height: 40px;line-height: 40px;.gf-modal-title {color: #333;font-size: 0.426667rem;line-height: 1;p {margin: 0.8rem 0.426667rem 0;overflow: hidden;white-space: nowrap;}}.gf-modal-close {display: flex;align-items: center;justify-content: center;z-index: 1;position: absolute;top: 0;right: 0;width: 0.853333rem;height: 0.853333rem;color: #999;font-size: 0.48rem;}}.gf-modal-alert {position: relative;overflow: hidden;.gf-modal-title {color: #333;font-size: 0.426667rem;line-height: 1;p {margin: 0.8rem 0.426667rem 0;overflow: hidden;white-space: nowrap;}}.gf-modal-detail-content {max-height: 60vh;overflow-y: scroll;margin: 0.426667rem 0;text-align: left;color: #666;font-size: 0.373333rem;line-height: 0.586667rem;.gf-modal-details {padding: 0 0.426667rem;.cube-input {margin-bottom: 8px;}.cube-textarea {padding-left: 0.133333rem;}.cube-input-field {padding: 5px;&::-webkit-input-placeholder {color: #ccc;text-overflow: ellipsis;font-weight: 100;font-family: monospace;}}label {color: #333;}}}.gf-modal-btns {border-top: 1px solid #E5E5E5;height: 50px;line-height: 50px;overflow: hidden;width: 100%;display: flex;flex-direction: row-reverse;font-size: 0;button {width: 60px;height: 30px;line-height: 1;border: 1px solid #CECECE;margin: 10px 5px 0;border-radius: 5px;color: #fff;&:focus {outline: none;}}}}}}}}

2.2vue编写

<template><div class="gf-modal gf-show-mask" style="z-index:100"><div class="gf-modal-mask" id="gf-modal-mask"></div><div class="gf-modal-container gf-modal-center"><div class="gf-modal-content"><div class="gf-modal-main"><div class="gf-modal-top"><span class="gf-modal-title">{{title}}</span><span class="gf-modal-close"><i class="cubeic-close" @click="cancel"></i></span></div><div class="gf-modal-alert"><div class="gf-modal-detail-content"><div class="gf-modal-details"><slot name="content"></slot></div></div><div class="gf-modal-btns" v-if="showBtn"><button class="blue" @click="confirm">确认</button><button class="white font-color" @click="cancel">取消</button></div></div></div></div></div></div>
</template><script>
export default {props:{title: {type: String,default: "标题"},showBtn: {type: Boolean,default: true},}, data() {return {};},created() {},mounted() {//兼容ios方法1//设置遮罩层后无法滑动和触摸  pc无效var shield = document.getElementById("gf-modal-mask"); //这里写遮罩层的名字shield.addEventListener("touchstart",function (e) {e.stopPropagation();e.preventDefault();},false);document.body.style.overflow="hidden";},methods: {cancel() {document.body.style.overflow="auto";this.$emit("cancel");},confirm() {},},
};
</script><style>
</style>

3.组件使用

<Modal  @cancel="cancel" :title="modalTile" v-if="showModal"><template slot="content"><component :is="tabView" :nameObj="nameObj" v-if="showModal"></component></template></Modal>data(){return{modalTile:'',nameObj:{},tabView:'',showModal:false,}
}

3.1特别说明

 此处用到了插槽slot，引用过程中，slot中内容会渲染到组组件中去。

4.总结

 通过上面简单的几步，组件就已经编写ok了，只是使用过程中还是遇到过坑点：transform：translate 移动会影响组件位置（这里面想着解决方法就是效仿其他ui组件，放在body的里面那层，组件移动比较麻烦。）

自定义Modal组件相关推荐

微信小程序自定义modal弹窗组件
微信小程序开发中官方自带的wx.showModal,这个弹窗 API有时候并不能满足我们的弹窗效果,所以往往需要自定义modal组件.下面我们进行一个自定义modal弹窗组件的开发,并进行组件的引用, ...
修改源码实现小程序UI库iview weapp的modal组件自定义宽高
记一下小程序端UI库iview weapp的modal模态窗自定义样式修改因为项目需要在模态窗中显示内容,小程序端的iview没有类似popup这种的弹出框,所以就选择了modal对话框来承载弹出内 ...
小程序自定义modal弹窗封装实现
前言小程序官方提供了 wx.showModal 方法,但样式比较固定,不能满足多元化需求,自定义势在必行~ 老规矩先上图点击某个按钮,弹出 modal框,里面的内容可以自定义,可以是简单的文字提示 ...
【Flutter】自定义 Flutter 组件 ( 创建自定义 StatelessWidget、StatefulWidget 组件 | 调用自定义组件 )
文章目录一.Flutter 组件简介二.Flutter 自定义 StatelessWidget 组件流程 1.导入父类包 2.选择继承的父类 3.设置成员变量及构造函数 4.重写 build 方法 ...
php动态写入vue,Vue自定义动态组件使用详解
这次给大家带来Vue自定义动态组件使用详解,Vue自定义动态组件的注意事项有哪些,下面就是实战案例,一起来看一下. 现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这 ...
开发自定义JSF组件(4) 保存状态与恢复状态
2019独角兽企业重金招聘Python工程师标准>>> 完整的教材: 开发自定义JSF组件(1) HelloWorld 开发自定义JSF组件(2) 使用Render渲染器开发自定义 ...
【MSDN文摘】使用自定义验证组件库扩展 Windows 窗体: Form Scope
使用自定义验证组件库扩展 Windows 窗体,第 2 部分(Windows 窗体探索) 发布日期: 5/28/2004 | 更新日期: 5/28/2004 Michael Weinhardt www ...
为SSIS编写自定义数据流组件(DataFlow Component)之进阶篇:自定义编辑器
我们之前几篇讨论过自定义数据流组件的一些技术,分别如下入门篇 http://www.cnblogs.com/chenxizhang/archive/2009/06/20/1507467.html 数 ...
C# 自定义箭头组件
C#自定义箭头组件,效果如图: 实现的功能: 1) 箭头方向属性左.右.上.下: 2) 颜色渐变,且颜色任意调整: 3) 箭头大小位置任意调整: 4) 其他. 主要代码如下: 1 using Syst ...

自定义Modal组件

弹窗效果

1.需求来源

2.代码编写

2.1css编写

2.2vue编写

3.组件使用

3.1特别说明

4.总结

自定义Modal组件相关推荐

最新文章

热门文章