在我们的项目中使用到的弹窗引用，这里写入一个js的文件，进行弹窗dom元素的渲染与初始化；
在项目中引用pageTool.js文件，文件中export出对应的弹窗方法使用，通过传入对象参数的context(文本)，type(icon的类型)，title(标题)，btnContent(按钮文本)，callback(回调方法)；进行展示；
自定义弹窗组件的js文件
// pageTool.js
import './pageTool.scss';
// 初始化弹窗
const dialog = `
<!-- toast提示 -->
<div id="face_toast" class="toast" style="display: none;">
<div class="toast__main">
<span id="toast_icon" class="toast__fail"></span>
<p class="toast__txt"></p>
</div>
</div>
<!-- 弹窗 -->
<div id="result_dg" class="result__dg" style="display: none;">
<div class="res__main">
<div class="result_dg-title" id="dialog_bg_title" style="display: none;"></div>
<span class="res__icon"></span>
<h4 id='dialog_title' class="res__title" style="display: none;">验证失败</h4>
<div class="res__cont">
<div id="dialog_text" class="res__text"></div>
</div>
<div class="res__btn-list">
<button id="cancel_btn" class="btn--no" style="display: none;">取消</button>
<button id="confirm_btn" class="btn--act">我知道了</button>
</div>
</div>
</div>
`;
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,
};
此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;
}
}
多此引入一个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;
}
使用的js的文件：
import { showToast, showTextDialog, showWarnDialog, showFailDialog, closeDialog } from './pageTool.js';
showToast('展示toast的提示文本，几秒钟后隐藏');
showToast('验证失败', 'fail');
showToast('验证成功', 'success');
showToast('验证警告', 'warning');
showToast('验证提示 - 不展示图标', 'normal');
closeDialog(); // 直接关闭弹窗的展示
showToast的展示效果如图：
showTextDialog的展示效果如图：
showTextDialog({
context: '进入小程序中查找....',
title: '无法正常的展示怎么办？',
});
showWarnDialog的展示效果如图：
showWarnDialog({
context: '请确保你的提交内容.....',
callback: () => {
console.log('点击关闭弹窗并执行此回调的事件');
},
});
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
