成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

頁面彈窗toast和加載loading

xioqua / 3496人閱讀

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

create-at 2019-04-04

都采用單例模式,原生js實現(xiàn)

兼容老版本瀏覽器內(nèi)核,請將用es6語法的地方作修改

loading 加載

代碼: 樣式全部通過js創(chuàng)建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}`) } } })()

任意可調(diào)用loading函數(shù)的地方調(diào)用即刻;顯示傳入?yún)?shù)true,不顯示不傳參數(shù)或傳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()
        }
    }
})()

參數(shù):text(彈窗文本) time(顯示時常) 時間默認或小于1000時設置為1500毫秒

任意可調(diào)用的地方調(diào)用 toast 方法即可

歡迎交流 Github

文章版權歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/103226.html

相關文章

  • Vue.extend用法(主要用于需要 動態(tài)渲染的組件,或者類似于window.alert() 提示

    摘要:一簡單的使用主要用于需要動態(tài)渲染的組件,或者類似于提示組件注意創(chuàng)建的是一個組件構造器,而不是一個具體的組件實例屬于的全局,在實際業(yè)務開發(fā)中我們很少使用,因為相比常用的寫法使用步驟要更加繁瑣一些。 最近在重構公司的項目,有些組件想要封裝的更靈活,例如toast、loading、messageBox等彈窗組件,模仿了mint-ui封裝此類組件的方式封裝了自己的彈窗組件; mint-UI的t...

    masturbator 評論0 收藏0
  • vue2實踐(持續(xù)更新)

    摘要:記錄一些小技巧和踩過的坑由于本篇文章內(nèi)容太多,導致編輯器有點卡,所以新開辟了一篇實踐二,后續(xù)再這里更新。組件的生命周期函數(shù)是在標簽里的數(shù)據(jù)發(fā)生變化時候觸發(fā)數(shù)據(jù)可能更新了,但是沒有綁定到上面的話,不會調(diào)用鉤子函數(shù)。 記錄一些小技巧和踩過的坑 由于本篇文章內(nèi)容太多,導致SF編輯器有點卡,所以新開辟了一篇 vue2實踐(二),后續(xù)再這里更新。 1. props 帶不帶冒號的區(qū)別 ...

    n7then 評論0 收藏0
  • Android之Window彈窗問題

    摘要:指向的主要是實現(xiàn)和通信的。子不能單獨存在,需附屬特定的父。系統(tǒng)需申明權限才能創(chuàng)建。和類似,同樣是通過來實現(xiàn)。將添加到中顯示。方法完成的顯示。執(zhí)行的檢查參數(shù)等設置檢查將保存到中將保存到中。因為通過和的將無法獲取到從而導致失敗。 目錄介紹 10.0.0.1 Window是什么?如何通過WindowManager添加Window(代碼實現(xiàn))?WindowManager的主要功能是什么? 1...

    Lorry_Lu 評論0 收藏0
  • 移動端常用alert、confirm、toast彈窗插件,兼容 jQuery/Zepto

    移動端彈窗插件第二版,包括常見的 alert、confirm、toast、notice 四種類型彈窗,支持 jQuery 和 Zepto 庫。 特性 支持常見的 alert、confirm、toast、notice 四種類型彈窗 可選擇使用 IOS 或者 Material Design 風格的彈窗 可自定義按鈕的文字、樣式、回調(diào)函數(shù),支持多個按鈕 多個彈窗狀態(tài)改變回調(diào)函數(shù) 同時支持 jQuery...

    khlbat 評論0 收藏0
  • ionic監(jiān)聽android返回鍵(實現(xiàn)“再按一次退出”功能)

    摘要:在平臺上的,在主頁面時經(jīng)常會遇到再按一次退出的功能,避免只按一下返回鍵就退出提升體驗優(yōu)化。如果我們不想注冊返回按鈕影響所有頁面,就要將返回函數(shù)再調(diào)用。 在android平臺上的app,在主頁面時經(jīng)常會遇到再按一次退出app的功能,避免只按一下返回鍵就退出app提升體驗優(yōu)化。 1、這個功能需要我們用到ionic提供的registerBackButtonAction方法(注冊硬件后退按鈕動...

    qiangdada 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<