页面弹窗toast和加载loading

xioqua 发布于2019-08-23 16:44 / 3302人阅读

摘要：都采用单例模式，原生实现兼容老版本浏览器内核，请将用语法的地方作修改加载代码样式全部通过创建标签注入中，若需修改，请修改和的值即刻。弹窗参数弹窗文本显示时常时间默认或小于时设置为毫秒任意可调用的地方调用方法即可欢迎交流

create-at 2019-04-04

都采用单例模式，原生js实现

兼容老版本浏览器内核，请将用es6语法的地方作修改

loading 加载

代码: 样式全部通过js创建style标签注入head中，若需修改，请修改loadignStyle和loadignChildStyle 的值即刻。

const loading = (() => {
    let loadingEle  = null
    return (status) => {
        if(!loadingEle) {
            const divEle = document.createElement("div")
            const styleEle = document.createElement("style")
            // 底部遮罩样式
            const loadignStyle = ".loading{position: fixed;z-index: 1000;left: 0;top:0;width: 100%;height: 100%;background-color: rgba(0,0,0, .6)}"
            // loading动画样式
            const loadignChildStyle = ".loading div{position: absolute;width: 30px;height: 30px;top: 50%;left: 50%;margin: -15px 0 0 -15px;border: 1px solid #fff;border-right: 1px solid transparent;border-radius: 50%;animation: loading 1s linear infinite;}"
            divEle.setAttribute("class", "loading")
            divEle.innerHTML = ""
            styleEle.innerHTML = `${loadignStyle} ${loadignChildStyle} @keyframes loading {to {transform: rotate(360deg)}}`
            document.querySelector("head").append(styleEle)
            document.querySelector("body").append(divEle)
            loadingEle = divEle
        } else {
            // 控制loading的显示与隐藏
            const dispalyStatus = status ? "block": "none";
            loadingEle.setAttribute("style", `display:${dispalyStatus}`)
        }
    }
})()

任意可调用loading函数的地方调用即刻；显示传入参数true，不显示不传参数或传false。

toast 弹窗

const toast = (() => {
    let once = null
    let clearTime
    return (text, time) => {
        if(!time || time<1000 ) time = 1500
        const updata = () => {
            once.innerHTML = text || ""
            once.setAttribute("style", "position: fixed;left: 50%;z-index: 9000;max-width: 300px;padding: 5px 12px;-webkit-transform: translateX(-50%);text-align: center;border-radius: 4px;font-size: 14px;color: #fff;background-color: rgba(0,0,0,0.6);")
            clearTime = setTimeout(() => {
                once.setAttribute("style", "display:none")
                clearTimeout(clearTime)
            }, time);
        }
        if(!once) {
            const bodyEle = document.querySelector("body")
            const div = document.createElement("div");
            bodyEle.appendChild(div)
            once = div
            updata()
        } else {
            updata()
        }
    }
})()

参数：text(弹窗文本) time(显示时常) 时间默认或小于1000时设置为1500毫秒

任意可调用的地方调用 toast 方法即可

欢迎交流 Github

私有云云服务器加载Loading loading加载动画加载loading效果 load ata加载大量数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103226.html

Vue.extend用法（主要用于需要动态渲染的组件，或者类似于window.alert() 提示

摘要：一简单的使用主要用于需要动态渲染的组件，或者类似于提示组件注意创建的是一个组件构造器，而不是一个具体的组件实例属于的全局，在实际业务开发中我们很少使用，因为相比常用的写法使用步骤要更加繁琐一些。最近在重构公司的项目，有些组件想要封装的更灵活，例如toast、loading、messageBox等弹窗组件，模仿了mint-ui封装此类组件的方式封装了自己的弹窗组件； mint-UI的t...

masturbator 2019-08-23 18:35 评论0 收藏0
vue2实践（持续更新）

摘要：记录一些小技巧和踩过的坑由于本篇文章内容太多，导致编辑器有点卡，所以新开辟了一篇实践二，后续再这里更新。组件的生命周期函数是在标签里的数据发生变化时候触发数据可能更新了，但是没有绑定到上面的话，不会调用钩子函数。记录一些小技巧和踩过的坑由于本篇文章内容太多，导致SF编辑器有点卡，所以新开辟了一篇 vue2实践（二），后续再这里更新。 1. props 带不带冒号的区别 ...

n7then 2019-08-20 15:05 评论0 收藏0
Android之Window和弹窗问题

摘要：指向的主要是实现和通信的。子不能单独存在，需附属特定的父。系统需申明权限才能创建。和类似，同样是通过来实现。将添加到中显示。方法完成的显示。执行的检查参数等设置检查将保存到中将保存到中。因为通过和的将无法获取到从而导致失败。目录介绍 10.0.0.1 Window是什么？如何通过WindowManager添加Window(代码实现)？WindowManager的主要功能是什么？ 1...

Lorry_Lu 2019-08-16 17:15 评论0 收藏0
移动端常用alert、confirm、toast等弹窗插件，兼容 jQuery/Zepto

移动端弹窗插件第二版，包括常见的 alert、confirm、toast、notice 四种类型弹窗，支持 jQuery 和 Zepto 库。特性支持常见的 alert、confirm、toast、notice 四种类型弹窗可选择使用 IOS 或者 Material Design 风格的弹窗可自定义按钮的文字、样式、回调函数，支持多个按钮多个弹窗状态改变回调函数同时支持 jQuery...

khlbat 2019-08-21 17:36 评论0 收藏0
ionic监听android返回键（实现“再按一次退出”功能）

摘要：在平台上的，在主页面时经常会遇到再按一次退出的功能，避免只按一下返回键就退出提升体验优化。如果我们不想注册返回按钮影响所有页面，就要将返回函数再调用。在android平台上的app，在主页面时经常会遇到再按一次退出app的功能，避免只按一下返回键就退出app提升体验优化。 1、这个功能需要我们用到ionic提供的registerBackButtonAction方法（注册硬件后退按钮动...

qiangdada 2019-08-26 11:43 评论0 收藏0