天天看點

angular8引入layui的方法

最近項目需要引入layui,這裡記錄下引入遇到的問題。

Angular引入layUI有兩種方式,一種是在angular.json中的scripts和styles中分别引入layui.js和layer.css檔案。一種是直接在index.html頁面中,通過link和script标簽引入。

首先layui放在assets目錄下:

angular8引入layui的方法

第一種引入方式:

angular8引入layui的方法

項目運作會報錯

angular8引入layui的方法

登入頁面我用到了layer彈窗,報這個錯,後面layui.js都不引入了。解決辦法就是缺少什麼,在scripts裡面就引入什麼。

angular8引入layui的方法

重新開機項目,發現報的錯更多了

angular8引入layui的方法

這些錯,其實都是404找不到的問題,解決辦法就是修改路徑。

先在layui.js裡面找到lay/ ,然後修改成

改好後,這解決了後面兩個404的問題,還有第一個找不到layer.css?v=3.1.1,需要修改layer.js:

先找到modules/layer/":“theme/”)+“default/layer.css?v=”+r.v+i;

然後将modules/layer修改成

OK,現在不再報錯了,元件上使用,先引入layui

再聲明個全局變量

然後引入layui的子產品

angular8引入layui的方法

使用時,直接this子產品就可以了

angular8引入layui的方法

類似的,可以在方法裡調用table,laypage等

先在頭部申明

angular8引入layui的方法

然後use子產品

angular8引入layui的方法

第二種方式直接在index.html裡面引入:

angular8引入layui的方法

然後元件裡使用就可以像上面一樣,寫個declare var layui,再使用layui.use([‘子產品’]),就可以用了。具體使用哪種方式,各自決定,我是覺得第二種更省事,哈哈。

繼續閱讀