master

分支 (1)

标签 (2)

管理

管理

master

0.0.2

0.0.1

layui-toast-exp
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吐司消息</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script>
        // 配置
        layui.config({
            base: "/model/" // toast.js 文件的拓展目录
        })
    </script>
</head>
<style>
    p {
        padding: 10px 0;
    }
</style>

<body>

    <button class="layui-btn" id="toast_show_rt">toast按钮-右上</button>
    <button class="layui-btn" id="toast_show_rb">toast按钮-右下</button>
    <button class="layui-btn" id="toast_show_lt">toast按钮-左上</button>
    <button class="layui-btn" id="toast_show_lb">toast按钮-左下</button>

    <p>
        <button class="layui-btn" id="toast_show_not_out">toast按钮-不消失</button>
        <button class="layui-btn" id="toast_close_all">toast按钮-关闭所有吐司</button>
    </p>


    <p>
        <button class="layui-btn" id="toast_show_assign">toast按钮-显示指定不消失吐司消息</button>
        <button class="layui-btn" id="toast_close_assign">toast按钮-关闭指定不消失吐司消息</button>
    </p>

    <p>
        <button class="layui-btn" id="toast_show_diy">toast按钮-自定义内容</button>
    </p>

    <p>
        <button class="layui-btn" id="toast_show_fun">toast按钮-显示成功回调</button>
        <button class="layui-btn" id="toast_show_cancel">toast按钮-关闭回调</button>
    </p>

    <p>
        <button class="layui-btn" id="toast_show_class">toast按钮-追加class</button>
    </p>

    <script>
        layui.use(["toast", "jquery"], function () {
            let toast = layui.toast
            let $ = layui.$

            // 右上
            $("#toast_show_rt").click(function () {
                toast.show("右上消息", { icon: 0 })
            })

            // 右下
            $("#toast_show_rb").click(function () {
                toast.show("右下消息", { icon: 1, offset: "rb" })
            })

            // 左上
            $("#toast_show_lt").click(function () {
                toast.show("左上消息", { icon: 2, offset: "lt" })
            })

            // 左下
            $("#toast_show_lb").click(function () {
                toast.show("左下消息", { icon: 3, offset: "lb" })
            })

            // 不消失
            $("#toast_show_not_out").click(function () {
                toast.show("这个消息不会消失", { icon: 1, time: 0 })
            })

            // 关闭所有吐司
            $("#toast_close_all").click(function () {
                toast.close()
            })

            // 指定
            let toast_index
            $("#toast_show_assign").click(function () {
                toast_index = toast.show("这是一个指定的吐司消息,不自动消失", { time: 0 })
            })

            // 关闭指定吐司
            $("#toast_close_assign").click(function () {
                if (typeof toast_index !== "undefined") {
                    toast.close(toast_index)
                }
            })

            // 自定义内容
            $("#toast_show_diy").click(function () {
                toast.show(`<p style="color:red;">这是IDY内容</p>`, { time: 3000 })
            })

            // 显示回调
            $("#toast_show_fun").click(function () {
                toast.show(`这个是回调吐司，显示成功触发回调`, {
                    time: 0, success: function (index, elem) {
                        console.log("索引值:", index) // 索引值
                        console.log("自身元素对象:", elem) // jquery对象
                    }
                })
            })

            // 关闭回调
            $("#toast_show_cancel").click(function () {
                toast.show(`这个是回调吐司，点击关闭触发回调和定时结束触发回调`, {
                    time: 5000,
                    offset: "lt",
                    cancel: function (index, elem) {
                        console.log("cancel")
                        console.log("索引值:", index) // 索引值
                        console.log("自身元素对象:", elem) // jquery对象

                        return true // 返回false则不关闭，定时关闭也会取消
                    }
                })
            })

            // 追加class
            $("#toast_show_class").click(function () {
                toast.show("左上消息", {
                    icon: 1,
                    time: 0,
                    offset: "lt",
                    class: "layui-bg-red layui-font-purple"
                })
            })
        })
    </script>
</body>

</html>