• 自定义弹窗dom元素的添加与使用的js文件

    在我们的项目中使用到的弹窗引用，这里写入一个js的文件，进行弹窗dom元素的渲染与初始化；
    在项目中引用pageTool.js文件，文件中export出对应的弹窗方法使用，通过传入对象参数的context(文本)，type(icon的类型)，title(标题)，btnContent(按钮文本)，callback(回调方法)；进行展示；

    自定义弹窗组件的js文件

    // pageTool.js
import './pageTool.scss';
// 初始化弹窗
const dialog = `
    
	
	
	
`;
document.write(dialog);
// 获取到对应更改的dom元素
const $toast = $('#face_toast');
const $toastIcon = $('#toast_icon');
const $toastContent = $('.toast__txt');
$toast.click(() => $toast.hide());
let toastTimeout;
/**
 * toast提示
 * @param text: 提示文本
 * @param type success fail warning normal(不展示图标)
 * @param time: toast显示时间
 */
function showToast(text, type = 'fail', time = 3000) {
    $toastContent.text(text);
    type && $toastIcon.attr('class', `toast__${type}`);
    $toast.show();
    clearTimeout(toastTimeout);
	toastTimeout = setTimeout(() => {
        $toast.hide();
    }, time);
}

// 初始化失败弹窗
const $dialog = $('#result_dg');
const $dialogText = $('#dialog_text');
const $confirmBtn = $('#confirm_btn');
const $cancelBtn = $('#cancel_btn');
const $dialogTitle = $('#dialog_title');
const $dialogBgTitle = $('#dialog_bg_title');

// 绑定
function bindHide(cb) {
    $confirmBtn.unbind();
    $confirmBtn.click(() => {
	    $dialog.hide();
	    (typeof cb === 'function') && cb();
    });
}

/**
 *  展示失败弹窗
 * @param context 弹窗内容
 * @param title 弹窗标题
 * @param btnContent
 * @param callback
 */
function showFailDialog({ context, title = '验证失败', btnContent = '确定', callback }) {
    showDialog({ type: 'fail', title, context, btnContent, callback });
}

/**
 *  展示成功弹窗
 * @param context 弹窗内容
 * @param title 弹窗标题
 * @param btnContent
 * @param callback
 */
function showSuccessDialog({ context, title = '验证成功', btnContent = '确定', callback }) {
	showDialog({ type: 'success', title, context, btnContent, callback });
}

/**
 *  展示提示文本弹窗
 * @param context 弹窗内容
 * @param title 弹窗标题
 * @param btnContent 弹窗按钮文字内容
 * @param callback 弹窗按钮点击回调，仅当次有效
 */
function showTextDialog({ title = '', context, btnContent = '我知道了', callback }) {
	showDialog({ type: 'normal', title, context, btnContent, callback });
}

/**
 *  展示带标题的提示文本弹窗
 * @param context 弹窗内容
 * @param title 弹窗标题
 * @param btnContent 弹窗按钮文字内容
 * @param callback 弹窗按钮点击回调，仅当次有效
 */
function showTitleDialog({ title = '', context, btnContent = '我知道了', callback }) {
    showDialog({ type: 'titleDialog', context, btnContent, callback, isShowBgTitle: true, bgTitle: title });
}

/**
 *  展示警告文本弹窗
 * @param context 弹窗内容
 * @param cancelBtn 取消按钮
 * @param btnContent 弹窗按钮文字内容
 * @param callback 弹窗按钮点击回调，仅当次有效
 * @param cancelBack 弹窗取消按钮点击回调，仅当次有效
 *
 */
function showWarnDialog({ context, cancelBtn = '取消', btnContent = '确定', callback, cancelBack }) {
    cancelBtn && $cancelBtn.text(cancelBtn);
    // 取消关闭弹窗
    $cancelBtn.unbind().click(() => {
		if (cancelBack && typeof cancelBack === 'function') {
			cancelBack();
		}
        $dialog.hide();
    });
	showDialog({ type: 'warning', context, isShowCancelBtn: true, btnContent, callback });
}

/**
 *  展示加载文本弹窗
 * @param context 弹窗内容
 * @param callback 弹窗按钮点击回调，仅当次有效
 */
function showLoadingDialog({ context, callback }) {
	showDialog({ type: 'loading', context });
    if (callback && typeof callback === 'function') {
        callback().then(() => $dialog.hide());
    }
}

/**
 * 展示弹窗的内容
 * @param type 弹窗类型 success fail warning normal
 * @param title 标题
 * @param context 弹窗内容
 * @param btnContent 弹窗按钮
 * @param callback
 */
function showDialog({ type, title = '', context, isShowCancelBtn = false, btnContent, callback, bgTitle = '' }) {
    $dialog.attr('class', `result__dg dg__${type}`);
    isShowCancelBtn ? $cancelBtn.show() : $cancelBtn.hide(); // 展示取消按钮
	$dialogTitle.hide();
	title && $dialogTitle.text(title).show();
    context && $dialogText.html(context);
    btnContent && $confirmBtn.text(btnContent);
    $dialogBgTitle.hide();
    bgTitle && $dialogBgTitle.text(bgTitle).show();
	$confirmBtn.show();
    $dialog.show(); // 每个弹窗展示的类别
	// 绑定回调方法，仅当次有效
	bindHide(() => {
		// callback 优先于 url跳转
		if (callback && typeof callback === 'function') {
			callback();
		}
	});
}

function closeDialog() {
	$dialog.hide();
}
export {
    showToast,
    showTextDialog,
    showWarnDialog,
    showFailDialog,
    showSuccessDialog,
    showLoadingDialog,
	closeDialog,
    showTitleDialog,
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185

    此css的文件引用的写法是sass，可自行更改其嵌套使用：

    // pageTool.scss
@import './mixin.scss';
.result__dg {
    background-color: $black_bgAl;
    @include position(fixed,$top:0, $left:0, $bottom:0, $right:0);
    @include flex($align:center, $justify:center);
    @include animation;
    // 错误弹窗的按钮样式
    &.dg__fail {
        .res__main {
            .res__icon {
                @include icon(-0, -8.26rem, $scale:.92);
            }
            .btn--act {
                background: $fail_btnCl;
            }
        }

    }
    &.dg__success {
        .res__main {
            .res__icon {
                @include icon(-4.2rem, -4.29rem, $scale:.92);
            }
        }
    }
    &.dg__warning {
        .res__main {
            .res__icon {
                width: 1.12rem;
                height: 1.12rem;
                margin: 0 auto .25rem;
                @include icon(-7.98rem, -7.07rem);
            }
        }

    }
    &.dg__normal {
        .res__main {
            .res__icon {
                display: none;
            }
        }
    }
    &.dg__loading {
        .res__main {
            .res__icon {
                width: .48rem;
                height: .48rem;
                background: none;
                @extend %loading;
            }
            .res__cont {
                margin: .36rem 0 0 0;
                >* {
                    margin: 0;
                }
            }
            .res__btn-list {
                display: none;
            }
        }
    }
    &.dg__titleDialog {
        .res__main {
            padding: 0 0 0.6rem 0;
            .res__icon {
                display: none;
            }
        }
    }
    .result_dg-title{
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 500;
        font-size: 0.36rem;
        color: #FFFFFF;
        background: url(../img/dialog_title_bg.png) no-repeat center;
        background-size: cover;
        height: 0.84rem;
        margin-bottom: 0.46rem;
    }
    .res__main {
        width: 6rem;
        max-height: calc(100% - 1.2rem);
        padding: .6rem .4rem;
        border-radius: .2rem;
        background: #fff;
        color: $cont_cl;
        font-size: $cont_size;
        line-height: .45rem;
        overflow: scroll;
        .res__icon {
            display: block;
            margin: 0 auto .25rem;
            width: 1.66rem;
            height: 1.66rem;
        }
        .res__title {
            margin-bottom: .24rem;
            font-size: .32rem;
            text-align: center;
            color: #222;
            line-height: 1;
            font-weight: bold;
        }
        .res__cont {
            margin-bottom: .4rem;
            text-align: center;
            .res__text {
                display: inline-block;
                text-align: left;
                a {
                    color: #00b7ff;
                    text-decoration: underline;
                }
            }
            &>* {
                margin-bottom: 10px;
            }
            .res__href {
                display: block;
                color: #00b7ff;
            }
        }
        .res__btn-list {
            @include flex($align: center, $justify: space-around);
            .btn--act {
                margin: 0 .2rem;
                @extend %btn;
            }
            .btn--no {
                border-color: currentColor;
                background: #fff;
                color: $sub_cl;
                margin: 0 .2rem;
                @extend %btn;
            }
        }
    }
}

// toast的样式文件
.toast {
    @include position(fixed,$top:0, $left:0, $bottom:0, $right:0);
    @include flex($align:center, $justify:center);
    .toast__main {
        max-width: 80%;
        padding: .16rem .24rem;
        background: $black_bgAl;
        border-radius: .2rem;
        @include flex($align:center);
    }
    %toast__icon {
        display: block;
        width: .56rem;
        height: .56rem;
        flex-shrink: 0;
        margin-right: .15rem;
    }
    /* 图片是png的icon */
    .toast__success {
        background: url('../img/toast_success.png') no-repeat;
        background-size: 100% 100%;
        @extend %toast__icon;
    }
    .toast__fail {
        background: url('../img/toast_fail.png') no-repeat;
        background-size: 100% 100%;
        @extend %toast__icon;
    }
    .toast__warning {
        background: url('../img/toast_warn.png') no-repeat;
        background-size: 100% 100%;
        @extend %toast__icon;
    }
    .toast__normal {
        display: none;
    }

    .toast__txt {
        font-size: $cont_size;
        line-height: .4rem;
        color: #fff;
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187

    多此引入一个mixin.scss的文件; 用于存放变量与混合模式的方法

    // mixin.scss
$sub_cl: #15D27D; // 主题色
$black_bgAl:rgba(0, 0, 0, .7); // 黑色Alpha值的背景
$fail_btnCl: #ff3b30; // 失败按钮的颜色
$cont_cl: #353535; // 主内容
// 字体大小
$cont_size: .28rem; // 主内容
$btn_size: .3rem; // 按钮文本
%btn {
    position: relative;
    display: block;
    width: 3.2rem;
    line-height: .86rem;
    font-size: $btn_size;
    border-radius: .43rem;
    margin: auto;
    color: #fff;
    background: $sub_cl;
    border: 1px solid rgba(0,0,0,0);
    &[disabled] {
        opacity: .5;
    }
    &:active {
        top: .03rem;
        box-shadow: 0 0 .1rem .1rem #eaeaea;
    }
}

%loading {
    border-width: 0 0 1px 1px;
    border-style: solid;
    border-color: #07C160;
    border-radius: 50%;
    animation: loading 1s linear infinite;
    overflow: hidden;
    margin: auto;
}
/*
    $x, $y: position的定位
    $img: 精灵图片的地址
    $unit: 单位 rem/px
    $scale: 缩放比例
*/
@mixin icon($x, $y, $img:url(../img/css_sprites.png), $unit:rem, $scale:1) {
    background: $img no-repeat 0 0;
    @if $unit == rem {
        background-size: 9.76rem*$scale 10rem*$scale;
    } @else if $unit == px {
        background-size: 976px*$scale 1000px*$scale;
    } @else {
        background-size: 9.76*$scale 10*$scale;
    }
	background-position: $x*$scale $y*$scale;
}

/* 文本超出隐藏 */
@mixin text-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* 定位布局 */
@mixin position($position: absolute, $top: auto, $left:auto, $right:auto, $bottom:auto) {
    // x/y轴的位置偏移
    $translateX: 0;
    $translateY: 0;
    position: $position;
    top: $top;
    left: $left;
    right: $right;
    bottom: $bottom;

    @if $position == 'fixed' {
        z-index: 9;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    @if$top == 50% {
        $translateY: -50%;
    }

    @if $left == 50% {
        $translateX: -50%;
    }
    transform: translate($translateX, $translateY);
	-webkit-transform: translate($translateX, $translateY);
}

@mixin flex($direction:row, $align: normal, $justify:normal) {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
	flex-direction: $direction;
	align-items: $align;
	justify-content: $justify;
}

/* 渐变主题色的文本 */
@mixin linear-text {
    background: $linear-text-color;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

// 加载的动画
@keyframes loading {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
@mixin animation($name: fadeIn, $time: .4s) {
    animation: $name $time;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130

    使用的js的文件：

    import { showToast, showTextDialog, showWarnDialog, showFailDialog, closeDialog } from './pageTool.js';
showToast('展示toast的提示文本，几秒钟后隐藏');
showToast('验证失败', 'fail');
showToast('验证成功', 'success');
showToast('验证警告', 'warning');
showToast('验证提示 - 不展示图标', 'normal');
closeDialog(); // 直接关闭弹窗的展示

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    showToast的展示效果如图：
    在这里插入图片描述
    showTextDialog的展示效果如图：

    showTextDialog({
	context: '进入小程序中查找....',
	title: '无法正常的展示怎么办？',
});

    • 1
    • 2
    • 3
    • 4

    在这里插入图片描述
    showWarnDialog的展示效果如图：

    showWarnDialog({
	context: '请确保你的提交内容.....',
	callback: () => {
		console.log('点击关闭弹窗并执行此回调的事件');
	},
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    在这里插入图片描述

  • 相关阅读:
    08_瑞萨GUI(LVGL)移植实战教程之LVGL对接串口打印
    java计算机毕业设计砂石矿山管理系统源程序+mysql+系统+lw文档+远程调试
    Java 21 新特性：虚拟线程（Virtual Threads）
    天宇优配|突然爆雷！大跌15%！
    uniapp H5页面调用微信支付
    vue封装自己的组件库 03.封装input+switch组件
    单商户商城系统功能拆解30—营销中心—积分签到
    【Python】3.python实现图片上传到阿里云OSS
    webApplication 、webSite 区别
    react-router@6 版本初体验
  • 原文地址：https://blog.csdn.net/weixin_42369598/article/details/126353057