es6 面向对象封装简易 toast

最新推荐文章于 2024-03-16 21:04:51 发布

原创最新推荐文章于 2024-03-16 21:04:51 发布 · 906 阅读

0 ·

CC 4.0 BY-SA版权

es6 学习笔记专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个简单的自定义Toast组件实现方法，通过JavaScript编写，支持确认和警告对话框功能。该组件可以方便地应用于Web应用中，提供弹窗提示效果。

引入后直接使用 $Toast 使用

链接：https://pan.baidu.com/s/11iIY9EAWrF2Q21PBZ1qGzQ 密码：2ie5

demo

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<a onclick="a()">confirm</a>
<a onclick="b()">alert</a>
</body>
</html>
<script src="./toast1.0.js"></script>
<script>
    function a(){
        $Toast.confirm().btnConfirm(function(){
            //确定点击 后你的代码
            alert('ok');
        }).btnCancel(function(){
            //取消点击后 你的代码
            alert('no')
        });
    }
    function b(){
        $Toast.alert().btnConfirm(function(){
            alert(1);
        });
    }
</script>

toast1.0.js

class ToastT
{
    constructor(){
        this.ToastDivId = 'toastDiv'
        this.confirmText = '确认';
        this.cancelText = '取消';
        this.msg = 'Toast';
        this._initStyle();
    };
    confirm(msg = 'Toast',options = {confirm:'确认',cancel:'取消'}){
        this.init(msg,options);
        return this;
    };
    alert(msg = 'Toast',options = {confirm:'确认',cancel:false}){
        this.init(msg,options);
        return this;
    };
    init(msg = 'Toast',options = {confirm:'确认',cancel:'取消'}){
        this.msg = msg;
        if(typeof options == 'object'){
            if(!(options.confirm === undefined)){
                this.confirmText = options.confirm;
            }
            if(!(options.cancel === undefined)){
                this.cancelText = options.cancel;
            }
        }else {
            console.error('options error ');
            return false;
        }
        this._initHtml();
        let div = document.createElement('div');
        div.id = this.ToastDivId;
        document.body.appendChild(div);
        document.getElementById(this.ToastDivId).innerHTML = this.html;
         if(!this.confirmText === false){
             this.btnConfirm()
         }
         if(!this.cancelText === false){
             this.btnCancel()
         }
        return this;
    };
    _initHtml(){
        let html = `<section style="`+ this.container +`" ><div style="` + this.toast + `"><span>` + this.msg + `</span><div style="` + this.btn + `" v-if="btnFlag">`;
        if(!(this.confirmText === false)) {
            html += `<button style="` + this.confirmStyle + `" id="ToastBtnConfirm">` + this.confirmText + `</button>`;
        }
        if(!(this.cancelText === false)){
            html += `<button style="`+ this.cancel +`" id="ToastBtnCancel">` + this.cancelText + `</button>`;
        }
        html += `</div></div></section>`;
        this.html = html;
    };
    _initStyle(){
        this.container = `position: absolute;left: 0;top: 0;bottom: 0;right: 0;z-index: 9999999;display: flex;justify-content: center;align-items: center;background: rgba(0,0,0,.2);`
        this.toast = `width: 23rem;height: 10rem;line-height: 10rem;text-align: center;background-color: #4e4b4a;border-radius: 10rem;color: #fff;`
        this.btn = `width: 23rem;height: 2rem;line-height: 2rem;margin: 1rem 0rem;`
        this.confirmStyle = `width: 4rem;height: 2rem;margin: 0rem 1rem;border-width:0;border-radius: 1rem;color: #fff;background-color: #5cb85c;border-color: #4cae4c;cursor: pointer;`
        this.cancel = `width: 4rem;height: 2rem;margin: 0rem 1rem;color: #fff;background-color: #f0ad4e;border-color: #f0ad4e;border-width:0;border-radius: 1rem;cursor: pointer;`
    };
    btnConfirm(confirm = ()=>{}){
        document.getElementById('ToastBtnConfirm').onclick = ()=>
        {
            document.getElementById(this.ToastDivId).remove();
            confirm();
        }
        return this;
    };
    btnCancel(cancel = ()=>{} ){
        document.getElementById('ToastBtnCancel').onclick = ()=>
        {
            document.getElementById(this.ToastDivId).remove();
            cancel();
        }
        return this;
    };
}
window.$Toast = new ToastT();