提示框简单封装

技术文章 3个月前 完美者
1,476 0

标签:creat   位置   nts   classname   border   end   out   意义   class   

jQuery封装

css

.myToast,.myToast{
    position: fixed;
    top:50%;
    left:50%;
    z-index: 1000;
    color:#fff;
    text-align: center;
    border-radius: 0.2rem;;
    transform:translate(-50%,-50%);
    white-space: nowrap;
    font-size: 0.52rem;
    padding:0.3rem 0.4rem;
    background-color: rgba(0,0,0,0.75);
}

js

function  toast(msg,time){
        var el = $(‘<span class="myToast">‘+msg+‘</span>‘);
        $(‘body‘).append(el)
        setTimeout(function(){
            el.remove();
        },time||2000)
    }

 

js封装

css

@font-face {
    font-family: ‘iconfont‘;
    /* project id 1564527 */
    src: url(‘https://at.alicdn.com/t/font_1564527_h2bpydgx1xv.eot‘);
    src: url(‘https://at.alicdn.com/t/font_1564527_h2bpydgx1xv.eot?#iefix‘) format(‘embedded-opentype‘),
        url(‘https://at.alicdn.com/t/font_1564527_h2bpydgx1xv.woff2‘) format(‘woff2‘),
        url(‘https://at.alicdn.com/t/font_1564527_h2bpydgx1xv.woff‘) format(‘woff‘),
        url(‘https://at.alicdn.com/t/font_1564527_h2bpydgx1xv.ttf‘) format(‘truetype‘),
        url(‘https://at.alicdn.com/t/font_1564527_h2bpydgx1xv.svg#iconfont‘) format(‘svg‘);
}

.message {
    position: fixed;
    padding: 15px;
    border: 1px solid;
    left: 50%;
    top: 50%;
    /* 让元素的css属性在0.2秒内完成变化 */
    transition: 0.2s;
    /* 变形:向左平移自身宽度的一半,向上平移自身高度的一半 */
    transform: translate(-50%, -50%);
    /* 圆角边框 */
    border-radius: 5px;
}

.message .icon {
    font-family: iconfont;
    display: inline-block;
    margin: 0 7px;
}

.message .content {
    display: inline-block;
}

/* 普通信息的样式 */
.message.info {
    border-color: #d8e3fd;
    background-color: #edf2fc;
    color: #727479;
}

.message.info .icon::before {
    content: "\e6bc";
}

/* 成功的样式 */
.message.success {
    border-color: #e1f3d8;
    background-color: #f0f9eb;
    color: #67C23A;
}

.message.success .icon::before {
    content: "\e61e";
}

/* 警告的样式 */
.message.warn {
    border-color: #faecd8;
    background-color: #fdf6ec;
    color: #E6A23C;
}

.message.warn .icon::before {
    content: "\e604";
}


/* 错误的样式 */
.message.error {
    border-color: #fde2e2;
    background-color: #fef0f0;
    color: #F56C6C;
}

.message.error .icon::before {
    content: "\e62b";
}

 

 

js

/
* 这个函数,才是真正实现功能的函数 * @param option 一个对象,配置对象 */ function _message(option) { // 生成一个最终的配置,如果用户传递的配置不存在,则使用默认值 // 对象混合 var defaultOption = { //该对象提供所有属性的默认值 type: "info", //消息类型: info、warn、error、success content: "", //消息提示内容 duration: 1, //多少秒后关闭 onClose: null //关闭后的回调 } // Object.assign 混合对象 var opt = Object.assign({}, defaultOption, option) // 根据opt对象中的配置创建div var div = document.createElement("div"); div.className = "message " + opt.type; div.innerHTML = "<div class=\"icon\"></div><div class=\"content\">" + opt.content + "</div>" //为了实现动画,添加div的时候,要将它设置为最小 div.style.transform = "translate(-50%, -50%) scale(0)"; document.body.appendChild(div); //强行让浏览器进行渲染:只要出现读取某个元素最终样式(位置、尺寸)的代码 getComputedStyle(div).top; //这句代码除了让浏览器强行渲染之外,没有任何其他意义 //将div变回原来的大小 div.style.transform = "translate(-50%, -50%) scale(1)"; setTimeout(close, opt.duration * 1000); function close() { div.style.transform = "translate(-50%, -50%) scale(0)"; setTimeout(function () { div.remove(); if (opt.onClose) { //传递了回调函数 opt.onClose(); } }, 200) } } /** * 提供给外面的人调用的函数 */ function message() { //根据参数的情况,构造出合适的对象,调用 _message if (arguments.length === 0) { //没有参数 _message({}); } else if (arguments.length === 1) { //有一个参数 if (typeof arguments[0] === "object") { _message(arguments[0]); //第一个参数就是对象 } else { _message({ content: arguments[0] }) } } else { //参数数量大于等于2,这种情况只需要前两个参数即可 _message({ content: arguments[0], type: arguments[1] }) } }

 

HTML.

 btnInfo.onclick = function() {
            message("一个普通的提示")
        }

        btnSuccess.onclick = function() {
            message("成功的提示", "success")
        }

        btnWarn.onclick = function() {
            message({
                content: "一个警告,3秒后消失",
                duration: 3, //3秒后消失
                type: "warn"
            });
        }

        btnError.onclick = function() {
            message({
                content: "错误提示,带有回调",
                type: "error",
                onClose: function() {
                    console.log("提示关闭了")
                }
            })
        }

 

 

 

....

 

提示框简单封装

标签:creat   位置   nts   classname   border   end   out   意义   class   

原文地址:https://www.cnblogs.com/wxyblog/p/14178618.html

版权声明:完美者 发表于 2020-12-29 11:23:54。
转载请注明:提示框简单封装 | 完美导航

暂无评论

暂无评论...