頁面彈窗toast和加載loading

xioqua 發布于2019-08-23 16:44 / 3484人閱讀

摘要：都采用單例模式，原生實現兼容老版本瀏覽器內核，請將用語法的地方作修改加載代碼樣式全部通過創建標簽注入中，若需修改，請修改和的值即刻。彈窗參數彈窗文本顯示時常時間默認或小于時設置為毫秒任意可調用的地方調用方法即可歡迎交流

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

云服務器 GPU云服務器加載Loading loading加載動畫加載loading效果 load ata加載大量數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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