co-dialog弹出框组件-版本v2.0.1
具体案例查看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的更多相关文章
- co-dialog弹出框组件-版本v2.0.0
co-dialog theme 访问git:co-dialog 版本v2.0.0 主题2 coog.app('.theme2').use({ title: 'JUST CHECKING.', mess ...
- vue--vant组件库Dialog弹出框
安装vant UI框架: cnpm install vant –-save-dev 导入组件-在main.js里: import Vant from 'vant'; import'vant/lib/v ...
- 关于隐式创建vue实例实现简化弹出框组件显示步骤
我们在使用vue写alert组件的时候,经常是定义了一个alert.vue,然后引入alert.vue,然后配置参数等等,非常繁琐,那有没有一种方式可以像window.alert("内容&q ...
- Flex AIR自定义Mobile的弹出框组件
做Flex Mobile开发的人应该知道,Flex为手机应用并没有提供弹出框组件,需要自定义. 通过查找文档.资料,我做出一个效果还算不错的弹出框组件,可以适用于手机设备上,不多讲,直接贴源码,相信对 ...
- 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框
vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...
- 使用easeui dialog弹出框中使用CKeditor多次加载后无法编辑问题
问题呈现:弹出框页面 <tr class="addtr"> <th>内容</th> <td> <!-- <textare ...
- ReactNative: 使用弹出框组件ActionSheetIOS组件
一.简介 在上一篇文章中,详细介绍了对话框组件,除此之外,React-Native系统还给开发者提供了一个弹框框组件ActionSheetIOS组件,它的弹出方式与对框框不同,它是从底部弹出,与iOS ...
- vue在element-ui的dialog弹出框中加入百度地图
参考:https://blog.csdn.net/u012724595/article/details/82703579 <!-- gps弹窗 --> <el-dialog v-di ...
- JQuery EasyUI dialog弹出框的 close 和 destroy
开发项目中(使用JQuery EasyUI),根据业务需要重叠弹出多个提示框的情况,会出现如下情况:页面出现两个div模块调用同一个弹出页面,页面的数据接受框元素不能实时存储数据解决方案: 使用$(t ...
随机推荐
- “戏精少女”的pandas学习之路,你该这么学!No.5
如果文章图片无法观看,请前往CSDN博客观看 https://blog.csdn.net/hihell 戏精博主即将上线 就在上一篇,梦想橡皮擦这位博主经过艰苦的努力 终于能创建一个dataframe ...
- [USACO07MAR]黄金阵容均衡Gold Balanced L… map
题目描述 Farmer John's N cows (1 ≤ N ≤ 100,000) share many similarities. In fact, FJ has been able to na ...
- gulp的watch记事本
let gulp=require('gulp'), nodemon=require('gulp-nodemon'), browser=require('browser-sync'); let relo ...
- "微信戴圣诞帽"的一个简易实现程序
准备安装 由于是利用别人写的人脸识别的一个库,所以需要在import之前安装好相应的环境.如果直接安装face_recognition库的时候就会直接提示缺少的相应的dlib库.而dlib库本身需要c ...
- Vue 4 -- 获取原生的DOM的方式、DIY脚手架、vue-cli的使用
一.获取原生的DOM的方式 在js中,我们可以通过id.class或者标签获取DOM元素,vue中也为我们提供了获取原生DOM的方法,就是给标签或者组件添加ref属性,通过this.$refs获取,如 ...
- javascript 返回上一页面:onclick="javascript:history.back(-1);"
<a href="<a href="javascript :history.back(-1)">返回上一页</a>或<a href=& ...
- scala数据类型
# Scala数据类型 ## 1.数值类型 ### 1.1 与Java一样Scala也有8种数值类型 * Byte * Char * Short * Int * Long * Float * Doub ...
- Xcode Ghost
Xcode Ghost,是一种手机病毒,主要通过非官方下载的 Xcode 传播,能够在开发过程中通过 CoreService 库文件进行感染,使编译出的 App 被注入第三方的代码,向指定网站上传用户 ...
- ssm(Spring、Springmvc、Mybatis)实战之淘淘商城-第十二天(非原创)
文章大纲 一.课程介绍二.Ngnix基础知识学习三.Ngnix在淘淘商城中使用四.参考资料下载五.参考文章 一.课程介绍 一共14天课程(1)第一天:电商行业的背景.淘淘商城的介绍.搭建项目工程.Sv ...
- Java中的for循环——通过示例学习Java编程(9)
作者:CHAITANYA SINGH 来源:https://www.koofun.com/pro/kfpostsdetail?kfpostsid=21 循环用于反复执行同一组语句,直到满足特定条件 ...