prompt提示框

  • 最近项目中有很多地方需要用到prompt框。之前写的时候都是需要引一个css,一个js。标签还需要写在页面上。对此开发很有意见。所以封装了下。

依据项目要求,暂只有三种状态

如下:
效果图

下边详细介绍下:
效果图

代码结构是这样的 ,主要介绍下promptLayer.prototype 里面的代码:

  1. init
1
2
3
4
5
6
7
8
9
10
11
12
13
14
init: function(opts) {
var o = this;
var scriptCode = '(function() {var docEle = document.documentElement, evt = "onorientationchange" in window ? "orientationchange" : "",fn = function() {var width = docEle.clientWidth;width && (docEle.style.fontSize = width / 7.5 + "px");};fn(); if (window.addEventListener) { if (evt) { window.addEventListener(evt, fn, false);}window.addEventListener("resize", fn, false);document.addEventListener("DOMContentLoaded", fn, false);}})();';
o.brithStructure(opts);
var styleCode = 'body{font-size:0.24rem}' + '.prompt-bg {opacity: 0;visibility: hidden;position: fixed; top: 0;right: 0;bottom: 0;left: 0;z-index: 1040;overflow-x: hidden;overflow-y: auto;display: flex;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;justify-content: center; -webkit-justify-content: center; align-items: center;-webkit-align-items: center; -moz-box-align: center; -webkit-box-align: center; -webkit-box-pack: center;background: transparent;}' +
'.prompt-bg.is-visible { opacity: 1; visibility: visible;-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;-moz-transition: opacity 0.3s 0s, visibility 0s 0s;transition: opacity 0.3s 0s, visibility 0s 0s;}' + '.prompt {font-size: 0.28rem;text-align: center;padding: 0.3rem 0.64rem; background-color: rgba(0, 0, 0, .6); border-radius: 5px;}' + '.prompt span { font-size: 0.28rem; color: #fff;}';
var iconCode = '.prompt img {width: 0.56rem; height: 0.56rem; margin: 0 auto 0.2rem;display:block;border:0 }';
styleCode += iconCode;
if (!window.returnFlag) {
window.returnFlag = true;
o.loadJSCode(scriptCode);
o.loadCssCode(styleCode);
}
},

① scriptCode 是为了rem布局自适应。这是以375px屏为基础的。
② brithStructure是下边的方法,等会会写到。
③ styleCode是提示框的样式。iconCode是图标样式。这样就避免了引入样式表。
④ loadJSCode,loadCssCode 这两个方法很好理解。就是将样式和js加入html里面

  1. birthStructure
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
brithStructure: function(opts) {
var promptHtml = "";
var curCont = (!opts.content) ? '操作成功' : opts.content;
this.hideLayer(opts);
switch (opts.type) {
case 0: //纯文字
promptHtml = '<div class="prompt-bg is-visible"><div class="prompt"><span>' + curCont + '</span></div></div>';
$(opts.obj).append(promptHtml);
break;
case 1: //操作成功
promptHtml = '<div class="prompt-bg is-visible"><div class="prompt"><img src="prompt_yes.png" /><span>' + curCont + '</span></div></div>';
$(opts.obj).append(promptHtml);
break;
case 2: //操作失败
promptHtml = '<div class="prompt-bg is-visible"><div class="prompt"><img src="prompt_no.png" /><span>' + curCont + '</span></div></div>';
$(opts.obj).append(promptHtml);
break;
default:
promptHtml = '<div class="prompt-bg is-visible"><div class="prompt"><span>' + curCont + '</span></div></div>';
$(opts.obj).append(promptHtml);
break;
}
},

① 这边可以看到 0,1,2 三种情况。这个方法是将标签加入页面
② hideLayer 这个也很好理解,就是隐藏提示框

  1. hideLayer ,loadJSCode
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    hideLayer: function(opts) {
    var time = !opts.time ? '1500' : opts.time;
    setTimeout(function() {
    $('.prompt-bg').removeClass('is-visible');
    }, time);
    },
    loadJSCode: function(code) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.appendChild(document.createTextNode(code));
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(script);
    },

① 这个方法是隐藏提示框
② loadJSCode和loadCSSCode一样,就是将代码加入到页面,此列举一个为例

  1. showPromptLayer 此方法是呈现如何调用这个弹框
1
2
3
4
5
6
7
8
9
function showPromptLayer(type, content, obj, time) {
var opts = {
type: type,
content: content,
obj: (!obj) ? obj : 'body',
time: time
}
new promptLayer(opts);
};

① 此方法有四个参数。均为非必填。 showPromptLayer()默认是type:0 纯文字状态 type:1 success提示 type:2 fail提示
② 参数详解 content 表示要传递的内容 ; obj 表示标签加载在页面的部位 默认Body; time 表示提示框关闭时间 默认1500

使用步骤

1
showPromptLayer(1, '操作成功', 'body', 5000);

详细代码:

https://github.com/sulishibaobei/loadingOrPrompt/tree/master/prompt

另外,也封装过一个类似的loading加载。适用于后台系统。

https://github.com/sulishibaobei/loadingOrPrompt/tree/master/loading

谢谢你给我的支持,坚持原创技术分享,共同成长