具体案例查看co-dialog:https://koringz.github.io/co-dialog/index.html

2.0.1版本优化项,代码压缩,修复PC和移动端自适应,修复显示弹出框浏览器边框隐藏对body产生内容错位,添加 onResize 默认为 true, 添加选项 type 不同类型显示弹出框 ['success', 'error', 'warning', 'info', 'question'].

压缩内容的实现方式,主要是通过重构了内部代码,整理静态方法,抽离被多次调用的代码,抽离的代码结合对象结构,另外结合函数结构,重复出现代码进行合并处理。

PC和移动端自适应之前考虑参考 sweetAlert2 用flex弹性布局,但是因为sweetAlert2 不支持拖放,且layout布局仅居中显示,所以放弃了flex布局,采用absolute布局,结合onResize简单实现,并且默认情况为true。

修复点击显示弹出框时,浏览器边框隐藏对body产生内容错位。其实是对body进行一次位移差计算,浏览器边框没了,body宽度就比以前多了,那么body里面的内容就发生错位,解决错误使用浏览器的宽度 减去 body的宽度,得出边框的宽度,最后给body使用paddingRight设置内边距,实现全屏效果并且不会发生错位。

添加选项 type 不同类型显示弹出框,这是type就是一个icon提示效果的功能,比如http请求失败和成功,警告等信息,就必须有这个交互性效果存在,我们只需要设置type即可,比如:

最简单的方式,这个success就是我设置的type类型。

coog.app(".base").use("标题","这是一个基础的弹出框", “success”).show() 

在use方法里面设置

coog.app(".try-drag").use({

    title: "拖动-isDrag",

    message: "请尝试拖动窗口",

    isDrag: true,

    type: "success",

}).show()

co-dialog弹出框组件-版本v2.0.1的更多相关文章

  1. co-dialog弹出框组件-版本v2.0.0

    co-dialog theme 访问git:co-dialog 版本v2.0.0 主题2 coog.app('.theme2').use({ title: 'JUST CHECKING.', mess ...

  2. vue--vant组件库Dialog弹出框

    安装vant UI框架: cnpm install vant –-save-dev 导入组件-在main.js里: import Vant from 'vant'; import'vant/lib/v ...

  3. 关于隐式创建vue实例实现简化弹出框组件显示步骤

    我们在使用vue写alert组件的时候,经常是定义了一个alert.vue,然后引入alert.vue,然后配置参数等等,非常繁琐,那有没有一种方式可以像window.alert("内容&q ...

  4. Flex AIR自定义Mobile的弹出框组件

    做Flex Mobile开发的人应该知道,Flex为手机应用并没有提供弹出框组件,需要自定义. 通过查找文档.资料,我做出一个效果还算不错的弹出框组件,可以适用于手机设备上,不多讲,直接贴源码,相信对 ...

  5. 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

    vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...

  6. 使用easeui dialog弹出框中使用CKeditor多次加载后无法编辑问题

    问题呈现:弹出框页面 <tr class="addtr"> <th>内容</th> <td> <!-- <textare ...

  7. ReactNative: 使用弹出框组件ActionSheetIOS组件

    一.简介 在上一篇文章中,详细介绍了对话框组件,除此之外,React-Native系统还给开发者提供了一个弹框框组件ActionSheetIOS组件,它的弹出方式与对框框不同,它是从底部弹出,与iOS ...

  8. vue在element-ui的dialog弹出框中加入百度地图

    参考:https://blog.csdn.net/u012724595/article/details/82703579 <!-- gps弹窗 --> <el-dialog v-di ...

  9. JQuery EasyUI dialog弹出框的 close 和 destroy

    开发项目中(使用JQuery EasyUI),根据业务需要重叠弹出多个提示框的情况,会出现如下情况:页面出现两个div模块调用同一个弹出页面,页面的数据接受框元素不能实时存储数据解决方案: 使用$(t ...

随机推荐

  1. Postman使用-1

    文章来源:http://www.cnplugins.com/tool/specify-postman-methods.html https://www.cnblogs.com/Skyyj/p/6856 ...

  2. React.Component(V16.8.6)

    组件的生命周期 挂载 当组件实例被创建并插入 DOM 中时,其生命周期调用顺序如下: constructor() static getDerivedStateFromProps() render() ...

  3. 洛谷P3147 [USACO16OPEN]262144

    P3147 [USACO16OPEN]262144 题目描述 Bessie likes downloading games to play on her cell phone, even though ...

  4. 开发外包注意事项二——iOS APP的开发

    目前我的方式是按时间算. 首先这得建立在双方的信任基础上. 以我做过的Case为例: 首先会和客户一起评估需求: 1. 哪些功能是最为重要的 2. 哪些功能是可以删除的 3. 用什么策略保证APP的出 ...

  5. 分层图最短路【bzoj2662】[BeiJing wc2012]冻结

    分层图最短路[bzoj2662][BeiJing wc2012]冻结 Description "我要成为魔法少女!" "那么,以灵魂为代价,你希望得到什么?" ...

  6. JSP-模拟银行卡账号密码登录页面跳转

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  7. Swift几行代码解决UITableView空数据视图问题

    tableView空数据问题 一般项目中tableView若数据为空时会有一个提示示意图 为了更好的管理这种提示示意图,笔者利用extension进行了简单的拓展 解决思路 利用swift面向协议的特 ...

  8. ROS上利用usb_cam读取摄像头图像

    电脑需要有USB3.0的接口 我使用的环境为:Ubuntu16.04LTS ROS版本是kinetic 一.usb_cam驱动的安装 1.创建ROS工作空间 mkdir -p myros/src cd ...

  9. python多继承(新式类)一

    最近在学习python的多重继承. 先来了解下多重继承的概念,所谓多重继承,是指python的类可以有两个以上父类,也即有类A,类B,类C,C同时继承类A与类B,此时C中可以使用A与B中的属性与方法. ...

  10. SpringBoot | 第十六章:web应用开发

    前言 前面讲了这么多直接,都没有涉及到前端web和后端交互的部分.因为作者所在公司是采用前后端分离方式进行web项目开发了.所以都是后端提供api接口,前端根据api文档或者服务自行调用的.后台也有读 ...