最近項目需要引入layui,這裡記錄下引入遇到的問題。
Angular引入layUI有兩種方式,一種是在angular.json中的scripts和styles中分别引入layui.js和layer.css檔案。一種是直接在index.html頁面中,通過link和script标簽引入。
首先layui放在assets目錄下:
第一種引入方式:
項目運作會報錯
登入頁面我用到了layer彈窗,報這個錯,後面layui.js都不引入了。解決辦法就是缺少什麼,在scripts裡面就引入什麼。
重新開機項目,發現報的錯更多了
這些錯,其實都是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的子產品
使用時,直接this子產品就可以了
類似的,可以在方法裡調用table,laypage等
先在頭部申明
然後use子產品
第二種方式直接在index.html裡面引入:
然後元件裡使用就可以像上面一樣,寫個declare var layui,再使用layui.use([‘子產品’]),就可以用了。具體使用哪種方式,各自決定,我是覺得第二種更省事,哈哈。