利用JQ 插件制作的一个全局弹窗

作者: Pluto_7a23 | 来源:发表于2021-09-22 17:32 被阅读0次

利用JQ 插件制作的一个全局弹窗
input 暂位符生成打字动画效果文本
Android 经典笔记七全局弹窗Dialog
自定义jq弹窗插件
制作并发布第一个vue组件的npm包
vue 采用promise方式开发弹窗插件
qgis动画制作四--多窗口视图随机动画
前端小白jq简单实现弹窗广告
jq中的弹窗与范文(常见表格和按钮弹窗,ajax遍历)
简单的 jq 弹窗

在VUE项目中需要制作一个全局的提示框。element-ui不能放到html中（可能我不会）所有利用了一个JQ的插件

地址：https://www.jq22.com/yanshi11777

image.png

   <!-- 弹窗 -->
    <link rel="stylesheet" href="./iziToast.min.css">
    <script src="./iziToast.min.js"></script>


<body>
//可以放到 websocket中  然后调用弹出
    <script>
        (()=>{
            iziToast.settings({
                timeout: 0,//时间
                // position: 'center',
                // imageWidth: 50,
                pauseOnHover: true,
                // resetOnHover: true,
                close: true,//关闭
                // progressBar: true,//进度条
                // layout: 1,
                // balloon: true,
                // target: '.target',
                // icon: 'material-icons',//图标
                // iconText: 'face',
                // animateInside: false,
                // transitionIn: 'flipInX',
                // transitionOut: 'flipOutX',
            });
             iziToast.info({
                    title: '提示',
                    message:'提示框',
                    position: 'topRight',
                    transitionIn: 'bounceInRight',
                    imageWidth: 70,
                    layout:2,
                    onOpen: function () {
        //                 console.log('callback abriu! info');
                    },
                    onClose: function () {
        //                 console.log("callback fechou! info");
                    }
                });
        })()
    </script>
</body>