原生JS封裝 toast 彈層，自動關閉

2022-04-01 20:18:56 字數 1713 閱讀 5491

由於公司業務需求，要乙個公共toast ,下面是自己封裝的乙個。

css:

.toast .toast-icon .toast-tip
js:

/*


* @author: liguowei


* @date: 2019-04-08 10:25:42


* @last modified by: liguowei01


* @last modified time: 2019-04-08 11:17:17 */


function


toast(){};


toast.prototype =,


iconobj : ,


toasttxtobj : ,


/** icon 1成功 2失敗 3 提示


* toasttxt 提示語


* time 關閉前的毫秒數 不傳預設2000


*/showtoast: 


function


(icon,toasttxt,time)


var toasttxt = toasttxt || this


.toasttxtobj.right;


html = '


'+toasttxt+'


'; toastbox = document.createelement('div');


toastbox.classname = 'toast';


toastbox.id = 'toast';


toastbox.innerhtml =html;


settimeout(


function


(),time||2000)


},loadcss:


function


(), t:


function


() 


if(b) 


}return


b }


}var t = new


toast();


t.init();
已上**不用看，按下面操作來就行：

1.新建資料夾 如toast

2.新建css檔案，命名toast.css,把上面的css複製到這個檔案裡

3.新建js檔案，命名toast.js,把上面的js複製到這個檔案裡

好了，準備完畢，下面是用法：

一、       僅引入js 如：

<


script 


src="../static/plugins/toast/toast.js"


>


script


>
二、       具體用法如下：

/*


* t.showtoast(icon,toasttxt,time);


* 三個引數


* icon 1成功 2失敗 3 提示


* toasttxt 提示語


* time 關閉前的毫秒數 不傳預設2000


* 示例如下：


*/t.showtoast(1,'我是提示語',2000);

toast彈框元件的封裝 外掛程式方式

我們這裡打算做乙個彈框功能 當我們點選加入購物車的時候 就會彈出這個彈框，把它做成外掛程式方式的好處，我們引用的時候就很簡單，只需要用this.toast就可以了，首先我們要寫乙個外掛程式 123 45627 然後我們需要根據這個元件構建元件物件，並把這個物件上傳到vue.prototype上去 方...

原生js封裝函式

原理是對元素的所有的子節點做乙個遍歷。然後做乙個判斷，如果是子元素節點 nodetype 1 則遍歷該子元素的所有的子節點，用遞迴檢查是否包含空白節點 如果處理的子節點是文字節點 nodetype 3 則檢查是否是純粹的空白節點，如果是，就將它從xml物件中刪除。1 function removew...

原生JS封裝AJAX

今天我們來說說利用原生js封裝ajax.jquery框架的ajax方法確實很好用,但有時候我們寫的頁面需要引入多個js外掛程式,不一定哪個外掛程式就會和jquery發生衝突,導致jquery用不了了.或者頁面比較簡單,不需要加重瀏覽器的負擔,這時我們自己封裝乙個ajax就是乙個很好的辦法.將資料轉換...