移动端(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             })
时间: 2024-10-16 16:38:25

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

弹框组件

因为项目中使用的较多,因此封装了一个组件,便于使用. /* *@file 弹框组件 *@description 用于所有提示弹框 *@time 2016/11/29 */ function PopModel(options) { var that = this; this.defaults = { width: '100px', // 默认框 height: '120px', // 默认高 isMask: true, // 是否遮罩 dir: 'mid', // mid中间,left左下,rig

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

Vue实战篇(增删改查附编辑添加model(弹框)组件共用) 前言 最近一直在学习Vue,发现一份crud不错的源码 预览链接 https://taylorchen709.github.io/vue-admin/#/login 自己下载下来后仔细研究了起来,发现编辑和增加写了两个弹框,我觉得这不符合vue的组件原则,于是自己把编辑和添加改成共用的 因为也是纯粹的写写前端页面,所以数据方面用的是mock.js,真实的模拟请求. 这个项目用到的 技术栈: vue + webpack + vuex +

移动端下弹框禁止背景滑动

移动端下弹框禁止背景滑动 茴字写法有很多种,找到最适合的才是好的. 以下下方法在一屛之内是可行的 body;html 设置overflow:hidden .overflow-hidden{ height: 100%; overflow: hidden; } // 弹出时 $('html, body,.page').addClass('overflow-hidden'); // 隐藏时 $('html, body,.page').removeClass('overflow-hidden'); 问题

vue移动端弹框组件

最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的,很多用法都一样,可以看看哦! 一.npm 安装 // 当前最新版本 1.2.0  npm install vue-layer-mobile // 如新版遇到问题可回退旧版本  npm install [email protected] 二.调整配置:因为这个组件中有woff,ttf,eto,svg

vue移动端弹框组件的实例

最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的,很多用法都一样,可以看看哦! 一.npm 安装 ? 1 2 3 4 // 当前最新版本 1.2.0 npm install vue-layer-mobile // 如新版遇到问题可回退旧版本 npm install [email protected] 二.调整配置:因为这个组件中有woff,ttf

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

最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的,很多用法都一样,可以看看哦! 一.npm 安装 // 当前最新版本 1.2.0  npm install vue-layer-mobile // 如新版遇到问题可回退旧版本  npm install [email protected] 二.调整配置:因为这个组件中有woff,ttf,eto,svg

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

modal modal类似于javascript中的confirm弹框,默认情况下是一个带有确认取消的弹框,不过点击取消后弹框不会自动隐藏,需要通过触发事件调用函数来控制hidden属性. 官方文档 .wxml <modal hidden="{{hidden}}" title="这里是title" confirm-text="自定义确定按钮" cancel-text="自定义取消按钮" bindcancel="

vue 弹框组件

组件效果: HTML代码: <div :class="isHidden"> <div :class="promptStyle"> <div :class="iconStyle"></div> <div class= "msgStyle">{{msg}}</div> <div class="prompt-close-btn" @cl

手机页面弹框组件

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1.0" /> <title>Do