利用JS+JQuery写提示小组件

最新推荐文章于 2024-06-12 16:19:00 发布

Samuel_luo。

最新推荐文章于 2024-06-12 16:19:00 发布

阅读量178

点赞数 1

文章标签： html css javascript jquery

本文链接：https://blog.csdn.net/m0_49242719/article/details/115106319

版权

本文档介绍如何使用JavaScript和jQuery创建一个弹窗提示组件。该组件包括图片提示、标题显示以及关闭功能，支持动态添加和移除提示，通过调整位置确保多个提示的层次感。在关闭时，会将之前的提示向上移动。适用于前端开发中的动态提示场景。

摘要由CSDN通过智能技术生成

接着上一篇的文利用JS+JQeury写弹出层组件，来实现一个弹窗提示小组件，这里我就不多赘述了,有疑问可以在上篇查看相关解释

组件JS

class Toast {
    constructor(options) {
        this.options = options;
        this.init();
    }

    self() {
        return this.$showToast;
    }

    get template() {
        let { title, type, id } = this.options;
        let src = "none";
        if (type == "true") {
            src = "http://hrc.geek51.cn/success.png";
        } else if (type == "false") {
            src = "http://hrc.geek51.cn/failure.png";
        }
        return `
            <div class="showToast">
                <img src="http://hrc.geek51.cn/cross.png" class="showToastExit" οnclick="closeToast(${id})"/>
                <img src="${src}" class="toastImage"/>
                <div class="title">${title}</div>
            </div>
        `
    }

    init() {
        var $showToast = $(this.template);
        this.$showToast = $showToast;
    }

	//获取当前提示组件的高，应该在执行完open()之后使用，因为元素还未挂载到body中获取的height为空，并且应该是获取outerHeight，包括margin、padding
    height() {
        return this.$showToast.outerHeight() + 10;
    }

	//遇到新的提示，需要将之前的提示组件向下移动
    moveDown(x) {
        this.$showToast.animate({
            top: '+=' + x + 'px'
        });
    }

	//删除中间的提示后，需要将之前的提示组件向上移动
    moveUp(x) {
        this.$showToast.animate({
            top: '-=' + x + 'px'
        });
    }

    open() {
        this.$showToast.appendTo('body');
        this.$showToast.animate({
            right: '20px'
        }, 600);
    }

    close() {
        this.$showToast.animate({
            opacity: '0'
        }, 300)
        //（）=>这写些是为了保证this不变化，因为在setTimeout中作用域不同，this将会指向window
        setTimeout(() => {
            this.$showToast.remove();
        }, 300);
    }
}

组件CSS

.showToast{
    position: fixed;
    top: 60px;
    right: -230px;
    /* right: 20px; */
    z-index: 200;
    width: auto;
    height: auto;
    min-width: 100px;
    min-height: 40px;
    padding: 15px 25px 15px 15px;
    background-color: white;
    box-shadow: 0 0 8px #b4b4b470;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    /* opacity: 0; */
}
.showToast .showToastExit{
    position: absolute;
    top: 5px;
    right: 5px;
    width: 10px;
    height: 10px;
    cursor: pointer;
}
.showToast .toastImage{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-right: 10px;
}
.showToast .title{
    width: auto;
    height: auto;
    max-width: 200px;
    min-height: 20px;
    line-height: 20px;
    word-break: break-all;
    font-family: 'Karla';
}

组件的使用 !important

同样的我们需要在html引用两个文件

<script type="text/javascript" src="../../Components/showToast/Toast.js"></script>
<link rel="stylesheet" href="../../Components/showToast/Toast.css">

这里因为没有内容content需要自已定，我们在创建类的时候将数据传给构造器
这里有一个很重要的事情，因为点击事件多次响应时会造成toast指代不明，造成toast页面停留，所以我们用数组将toast存入，再将下标传入，这事我的toast模块中给关闭图标绑定的onclick="closeToast(${id})"事件将会接收下标，就可以具体到数组中的某一个toast了。

//创建数组，以便多个弹窗的情况出现
var toastArr = new Array();
//这里我们在需要触发的元素上绑定事件并且传入title（文字）和type（图表类型）就好了
function showToast(title,type){
    let i = toastArr.length;
    var toast = new Toast({
        title: title,
        type: type,
        id: i
    })
    toastArr.push(toast);
    toastArr[i].open();
    for (let j = 0; j < toastArr.length - 1; j++) {
        toastArr[j].moveDown(toastArr[i].height());
    }
    setTimeout(function () {
        toastArr[i].close();
    }, 5000);
}
//此函数绑定在模板中的关闭图标上
function closeToast(e){
    let height = toastArr[e].height();
    toastArr[e].close();
    for (let j = 0; j < e; j++) {
        toastArr[j].moveUp(height);
    }
}