vue-cli腳手架引入彈出層layer插件的幾種方法
1.如何引入
在vue-cli里,引入文件有幾鐘方法
一種是用npm或者cnpm指令去下載對應(yīng)的插件,然后在main.js里用import方法引入,這里不討論這種方法
我比較喜歡采用的是直接下載對應(yīng)的js,然后引入到vue項目中去
問題來了,如何引入呢
方法如下:
- 下載對應(yīng)的js文件或者css文件,一般下載插件相關(guān)聯(lián)的都會在一起
- 進(jìn)入vue-cli項目工程里的index.html文件,分別引入css文件和js文件
在這里,分別是
<link rel="stylesheet" href="./static/layer.css" rel="external nofollow" /> <script src="./static/jquery.js"></script> <script src="./static/jquery.min.js"></script> <!-- 必須先引入上面jq 1.8版本以上的才能引layer --> <script src="./static/layer.js"></script>
這樣在全局文件里都可以使用layer彈出層插件了,需要注意,必須先引入jq 1.8以上的版本才可以使用layer噢。
2.彈出層顯示不出
- 作為一個java開發(fā)小菜鳥,踩前端的坑基本是面向百度進(jìn)行嘗試解決,經(jīng)歷了時常兩個半小時的掙扎,解決了幾個問題:
- 第一個是前端控制臺報錯,印象里是
i is not a function
還有什么layer.open is not a function
等,這些問題基本是出于引入的問題,解決途徑:檢查是否在之前引入了1.8以上的jq
- 第二個是彈出層只有文字顯示,但是缺乏樣式,沒有彈出層的feel。經(jīng)過大量百度和分析,最后還是依靠調(diào)試前端樣式看出端倪,問題在于里面用到的class在我引入的css文件里并不存在。經(jīng)過檢查,導(dǎo)入的css文件錯誤(注意有手機(jī)的css樣式和另一個css,這里要用另一個,名稱一樣)。最終問題解決。
ps:下面看下在Vue中使用layer.js彈出層插件
layer.js(mobile)是一個小巧方便的彈出層插件,在之前的apicloud項目中被大量使用,但最近對apicloud的IDE、非常不友好的文檔和極低的開發(fā)效率深感厭煩,決定棄用然后轉(zhuǎn)向Vue開發(fā)。在開發(fā)過程中引入layer.js的時候遇到了麻煩。原因是layer.js不支持import導(dǎo)入,這時就需要修改一下它的源碼。在看過它的源碼后,發(fā)現(xiàn)需要修改的地方只有兩處,
源碼中已經(jīng)暴露了一個全局變量layer,故只需在腳本末尾處添加
export default layer;1
這表示將這個全局變量導(dǎo)出。
然后在文件中找到下面的代碼注釋掉,這段代碼是為layer添加樣式的,但使用的路徑不對,故沒有太大幫助。
document.head.appendChild(function() { var link = doc.createElement('link'); link.href = path + 'need/layer.css?2.0'; link.type = 'text/css'; link.rel = 'styleSheet'link.id = 'layermcss'; return link; } ());
接下來把layer.js和layer.css分別放入static/js和static/css中,在需要的地方,比如組件內(nèi)部或者全局注冊,因為項目多處都會用到,所以采用全局注冊,在main.js中
import layer from '../static/js/layer.js'
layer.css也使用全局注冊,它可以放在index.html中通過link引入,也可以放在App.vue中
<!--index.html--> <link rel="stylesheet" href="./static/css/layer.css" /> <!--或者--> <!--App.vue--> <style> @import "../static/css/layer.css"; </style>
接下來就能在各個組件中使用layer.open等方法了。
這種方式應(yīng)該可以適用于各種不支持import導(dǎo)入的腳本,即非npm提供的module。
總結(jié)
以上所述是小編給大家介紹的vue-cli腳手架引入彈出層layer插件的幾種方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
Vue使用pdf-lib實現(xiàn)為文件流添加水印并預(yù)覽
這篇文章主要為大家詳細(xì)介紹了Vue如何使用pdf-lib實現(xiàn)為文件流添加水印并預(yù)覽的功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起了解一下2023-03-03vue3使用高德地圖,自定義點標(biāo)記、默認(rèn)點聚合樣式、點擊點標(biāo)記獲取信息
這篇文章主要介紹了vue3使用高德地圖,自定義點標(biāo)記、默認(rèn)點聚合樣式、點擊點標(biāo)記獲取信息的相關(guān)知識,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-01-01vue全局方法plugins/utils的實現(xiàn)示例
很多時候我們會在全局調(diào)用一些方法,本文主要介紹了vue全局方法plugins/utils的實現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下2024-07-07Vue this.$router.push(參數(shù))實現(xiàn)頁面跳轉(zhuǎn)操作
這篇文章主要介紹了Vue this.$router.push(參數(shù))實現(xiàn)頁面跳轉(zhuǎn)操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09vue如何將base64流數(shù)據(jù)轉(zhuǎn)成pdf文件并在新頁面打開
這篇文章主要介紹了vue如何將base64流數(shù)據(jù)轉(zhuǎn)成pdf文件并在新頁面打開問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-02-02Vue入門學(xué)習(xí)筆記【基本概念、對象、過濾器、指令等】
這篇文章主要介紹了Vue入門學(xué)習(xí)筆記,結(jié)合實例形式分析了vue.js的基本概念、對象、過濾器、指令等的相關(guān)原理與簡單使用方法,需要的朋友可以參考下2019-04-04