俗话说的好,框架是服务与大家的,包含的功能比较多,代码多。在现在追求速度的年代。应该根据自己的需求去封装自己所需要的组件。

下边就给大家介绍一下自己封装的一个小弹框组件,不依赖与jQuery,代码少,适用于一般移动端小项目。

这个插件名称:MobileUi

包含功能:弹框,正在加载,tips1.5秒消失,清除正在加载。

如图:

  

接下来我来告诉大家怎么用吧!!

第一步:配置<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

第二步:加载  mobile-ui1.0-compress.js

第三步:用

             /*---第一种--带--确定与取消的弹出框 ---*/
MobileUi.init({
title:'确认删除',
text:'您确认要删除吗?',
type:1,
callbak:function(){
console.log('callbak');
}
}); /*---第二种--带--确定的弹出框 ---*/
MobileUi.init({
type:2,
title:'提示',
text:'您的操作有误',
callbak:function(){
console.log('callbak');
}
}) /*---第三种--数据加载中---*/
MobileUi.init({
type:3
}) /*---第四种--提示消息自动消失 ---*/
MobileUi.init({
type:4,
text:'您的手机号码有误'
}) /*---第五种--移除数据加载 ---*/
MobileUi.init({
type:5
})

移动端(H5)弹框组件--简单--实用--不依赖jQuery的更多相关文章

  1. 基于uni-app全端弹框组件uaPopup「兼容h5+小程序+app端|nvue」

    uniapp兼容多端自定义模态弹框组件UAPopup ua-popup 一款轻量级的uniapp自定义弹窗组件.汇集了android.ios和微信弹窗效果(msg消息.alert提示框.dialog对 ...

  2. svelte组件:Svelte自定义弹窗Popup组件|svelte移动端弹框组件

    基于Svelte3.x自定义多功能svPopup弹出框组件(组件式+函数式) 前几天有分享一个svelte自定义tabbar+navbar组件,今天继续带来svelte自定义弹窗组件. svPopup ...

  3. vue3系列:vue3.0自定义弹框组件V3Popup|vue3.x手机端弹框组件

    基于Vue3.0开发的轻量级手机端弹框组件V3Popup. 之前有分享一个vue2.x移动端弹框组件,今天给大家带来的是Vue3实现自定义弹框组件. V3Popup 基于vue3.x实现的移动端弹出框 ...

  4. VUE2.0增删改查附编辑添加model(弹框)组件共用

    Vue实战篇(增删改查附编辑添加model(弹框)组件共用) 前言 最近一直在学习Vue,发现一份crud不错的源码 预览链接 https://taylorchen709.github.io/vue- ...

  5. vue移动端弹框组件,vue-layer-mobile

    最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的 ...

  6. vue移动端弹框组件

    最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的 ...

  7. 关于微信小程序 modal弹框组件的介绍

    微信小程序 modal: 这里对微信小程序中 modal组件进行详细解析,我想开发微信小程序的小伙伴可以用到,这里小编就记录下modal的知识要点. modal modal类似于javascript中 ...

  8. 微信小程序之----弹框组件modal

    modal modal类似于javascript中的confirm弹框,默认情况下是一个带有确认取消的弹框,不过点击取消后弹框不会自动隐藏,需要通过触发事件调用函数来控制hidden属性. 官方文档 ...

  9. vue的通讯与传递props emit (简单的弹框组件)

    props父把信息传递给子组件 1父组件 <template> <div class="hello"> <div id="app-3&quo ...

随机推荐

  1. python --- socket模块详解

    socket常用功能函数: socket.socket(family=AF_INET, type=SOCK_STREAM, proto=0, fileno=None)                  ...

  2. PHP的ntohl网络字节序函数及相关知识

    PHP与C服务器的socket通信,在做数据转换的时候,PHP没有提供对应将网络字节序和机器字节序相互转换的程序,但是根据函数的意义,我们可以做相应的转换来实现这一函数: function ntohl ...

  3. FPGA与数字图像处理技术

    数字图像处理方法的重要性源于两个主要应用领域: 改善图像信息以便解释. 为存储.传输和表示而对图像数据进行处理,以便于机器自动理解. 图像处理(image processing): 用计算机对图像进行 ...

  4. js中 && 与 || 的妙用

    在js逻辑运算中,0."".null.false.undefined.NaN都会判为false,其他都为true(好像没有遗漏了吧,请各位确认下).这个一定要记住,不然应用||和& ...

  5. 彻底区分html的attribute与dom的property

    当初在学html时始终没有弄清楚的关于attribute与property的区别,竟然在看angular文档时弄明白了. angular官方文档的数据绑定一节提到html attribute与dom ...

  6. Table样式设置

    <table class="listTable"> <tr><th width="40px">序号</th>&l ...

  7. win10 删除设备和驱动器中你不要的图标

    设备和驱动器可能有很多你不想要的东西,360云盘,百度网盘,微云-- 删除设备和驱动器中的百度云图标,360网盘图标,要去注册表 运行 regedit 点开 HKEY_CURRENT_USER\SOF ...

  8. go基础编程 day-1

    Go语言的特性 开启了学习新的语言路程,记录每天学习的笔记,与大家一起分享. ①.自动垃圾回收 ②.更丰富的内置类型 ③.函数多返回值 ④.错误处理 ⑤.匿名函数和闭包 ⑥.类型和接口 ⑦.并发编程 ...

  9. 如何在不同的语言/平台中获取Android ID

    如何在不同的语言/平台中获取Android ID 最近开发工作中需要使用到AndroidID,在Unity和native code中也需要使用,java获取很方便,Unity中也不难,最难的是在nat ...

  10. 【转】花开正当时,十四款120/128GB SSD横向评测

    原文地址:http://www.expreview.com/19604-all.html SSD横评是最具消费指导意义的评测文章,也是各类热门SSD固态硬盘的决斗疆场.SSD评测在行业内已经有不少网站 ...