zoukankan      html  css  js  c++  java
  • co-dialog弹出框组件-版本v2.0.1

    具体案例查看co-dialoghttps://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()
  • 相关阅读:
    NOIP2018游记-DAY1
    NOIP2018游记-DAY0
    18.11.7绍一模拟赛
    [SPOJ]SELTEAM
    18.11.5绍一模拟赛
    18.11.2绍一模拟赛
    [模拟赛]世界杯
    [模拟赛]路途
    乘法逆元的研究
    子查询,TOP_N,分页,行转列
  • 原文地址:https://www.cnblogs.com/hao5599/p/9840471.html
Copyright © 2011-2022 走看看