移动端（H5）弹框组件--简单--实用--不依赖jQuery

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

下边就给大家介绍一下自己封装的一个小弹框组件，不依赖与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

第三步：用

 1             /*---第一种--带--确定与取消的弹出框 ---*/
 2             MobileUi.init({
 3                 title:'确认删除',
 4                 text:'您确认要删除吗？',
 5                 type:1,
 6                 callbak:function(){
 7                     console.log('callbak');
 8                 }
 9             });
10
11             /*---第二种--带--确定的弹出框 ---*/
12             MobileUi.init({
13                 type:2,
14                 title:'提示',
15                 text:'您的操作有误',
16                 callbak:function(){
17                     console.log('callbak');
18                 }
19             })
20
21             /*---第三种--数据加载中---*/
22             MobileUi.init({
23                 type:3
24             })
25
26             /*---第四种--提示消息自动消失 ---*/
27             MobileUi.init({
28                 type:4,
29                 text:'您的手机号码有误'
30             })
31
32             /*---第五种--移除数据加载 ---*/
33             MobileUi.init({
34                 type:5
35             })

移动端（H5）弹框组件--简单--实用--不依赖jQuery相关推荐

移动端下弹框禁止背景滑动
移动端下弹框禁止背景滑动茴字写法有很多种,找到最适合的才是好的. 以下下方法在一屛之内是可行的 body;html 设置overflow:hidden .overflow-hidden{height ...
看完这篇不要告诉我不会封装ant design弹框组件了
我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣获取前端学习知识 1设计需求封装一个弹框组件直接调用接口 2技术栈 ant design+react 设计第一步绘制样式 < ...
vantUI弹框组件 message文字，如何换行？
vantUI弹框组件 message文字,如何换行 ? 代码如下: // 权限已到期 if(response.data.code == 6001){Toast.fail({duration: 1500 ...
ElementUI弹框组件 messageBox 如何换行？
ElementUI弹框组件 messageBox 如何换行 ? 参考博客:element this.$confirm确定框内容换行显示效果图 · 截图示下: demo代码如下: const conf ...
elemenUI - 弹框组件alert - 宽度设置？ - 疑问篇
举例如下:(elemenUI - 使用alert弹框组件),对比代码和效果图官方组件+文档演示地址:点击查看官方文档部分主要代码 · 如下: <el-col class="user ...
VUE2.0增删改查附编辑添加model(弹框)组件共用
为什么80%的码农都做不了架构师?>>> Vue实战篇(增删改查附编辑添加model(弹框)组件共用) 前言最近一直在学习Vue,发现一份crud不错的源码预览链接 https: ...
Element-UI源码学习——弹框组件
手写弹框组件文章目录手写弹框组件前言一.Element-UI的弹框二.如何自己手写? 前言首先,分析一下Element-UI的对话框,点击,会弹出一个对话框.对话框由具体的弹框内容.关闭或 ...
Android中MaterialSearchView(搜索框)的简单实用
Android中MaterialSearchView(搜索框)的简单实用收搜框架有好多,动画效果满炫酷的就是代码太多,没发抽取他的搜索功能,而这个却比较好用些,直接从代码里面抠出来一个简单实现搜索功 ...
微信小程序自定义picker弹框组件
要有遥不可及的梦想,也要有脚踏实地的本事.----------- Grapefruit.Banuit Gang(香柚帮) 柚子写项目遇到了一个问题,就是微信小程序官方文档上面的弹框组件picker,它 ...

移动端（H5）弹框组件--简单--实用--不依赖jQuery

移动端（H5）弹框组件--简单--实用--不依赖jQuery相关推荐

最新文章

热门文章