具体案例查看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. PHP7中Protobuf的安装使用

    PHP7中Protobuf的安装使用 写这篇文章的缘由是最近在关注RPC框架序列化的一些原理.但是在安装Protobuf的时候,发现网上的教程都太老了,加上目前Protobuf官方已经支持PHP了,不 ...

  2. C++基础之继承类和派生类

    (1)继承是创建一个具有某个类的属性和行为的新类的能力.原有的类称为基类,新创建的类称为派生类.派生类将基类中的所有成员作为自己的成员,同时派生类本身可以定义新的成员(2)派生类只有一个基类的继承称单 ...

  3. 采用DCT进行图像压缩

    一.实验目的:熟悉变换编码的图像压缩方法 二.实验内容:以所给图像为例,采用dct进行图像压缩编码,通过改变模板矩阵中非零元素的个数,得到不同缩编码图像, 根据公式 ,编写程序计算原图像和dct变换后 ...

  4. python之02数据类型学习-作业练习2

    引用博客地址:http://www.cnblogs.com/yuanchenqi/articles/5782764.html 作业描述: 省 市 县的三层数据通过字典 元祖 列表 保存起来执行程序后 ...

  5. 洛谷P1932 A+B A-B A*B A/B A%B Problem

    P1932 A+B A-B A*B A/B A%B Problem 题目背景 这个题目很新颖吧!!! 题目描述 求A.B的和差积商余! 由于数据有修改,减法运算结果可能带负号! 输入输出格式 输入格式 ...

  6. 自定义进度条PictureProgressBar——从开发到开源发布全过程

    自定义进度条PictureProgressBar——从开发到开源发布全过程 出处: 炎之铠邮箱:yanzhikai_yjk@qq.com 本文原创,转载请注明本出处! 本项目JCenter地址:htt ...

  7. 装饰器(Decorator)模式

    public interface IDoThings { public void doSomeThing(); } public class DoThings implements IDoThings ...

  8. BeanFilterUtil

    package com.yundaex.utility.bean.filter; import java.util.ArrayList; import java.util.List; import o ...

  9. (转)linux正则表达式详解

    linux正则表达式详解 http://blog.csdn.net/wuliowen/article/details/64131815 1:什么是正则表达式: 简单的说,正则表达式就是处理字符串的方法 ...

  10. MapReduce的输出格式

    1. OutputFormat接口 OutputFormat为输出格式接口,主要用于描述输出数据的格式,它能将输出的键值对写入特定格式的文件中.输出格式的层次结构如下 2. 文本输出 Hadoop默认 ...