欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue-cli腳手架引入彈出層layer插件的幾種方法

 更新時(shí)間:2019年06月24日 08:59:05   作者:吳傲陽(yáng)  
layer.js(mobile)是一個(gè)小巧方便的彈出層插件,在之前的apicloud項(xiàng)目中被大量使用,但最近對(duì)apicloud的IDE、非常不友好的文檔和極低的開(kāi)發(fā)效率深感厭煩,決定棄用然后轉(zhuǎn)向Vue開(kāi)發(fā)。這篇文章主要介紹了vue-cli腳手架引入彈出層layer插件的幾種方法,需要的朋友可以參考下

1.如何引入

在vue-cli里,引入文件有幾鐘方法

一種是用npm或者cnpm指令去下載對(duì)應(yīng)的插件,然后在main.js里用import方法引入,這里不討論這種方法

我比較喜歡采用的是直接下載對(duì)應(yīng)的js,然后引入到vue項(xiàng)目中去

問(wèn)題來(lái)了,如何引入呢

方法如下:

  • 下載對(duì)應(yīng)的js文件或者css文件,一般下載插件相關(guān)聯(lián)的都會(huì)在一起
  • 進(jìn)入vue-cli項(xiàng)目工程里的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.彈出層顯示不出

  • 作為一個(gè)java開(kāi)發(fā)小菜鳥(niǎo),踩前端的坑基本是面向百度進(jìn)行嘗試解決,經(jīng)歷了時(shí)常兩個(gè)半小時(shí)的掙扎,解決了幾個(gè)問(wèn)題:
  • 第一個(gè)是前端控制臺(tái)報(bào)錯(cuò),印象里是i is not a function 還有什么layer.open is not a function等,這些問(wèn)題基本是出于引入的問(wèn)題,解決途徑:檢查是否在之前引入了1.8以上的jq
  • 第二個(gè)是彈出層只有文字顯示,但是缺乏樣式,沒(méi)有彈出層的feel。經(jīng)過(guò)大量百度和分析,最后還是依靠調(diào)試前端樣式看出端倪,問(wèn)題在于里面用到的class在我引入的css文件里并不存在。經(jīng)過(guò)檢查,導(dǎo)入的css文件錯(cuò)誤(注意有手機(jī)的css樣式和另一個(gè)css,這里要用另一個(gè),名稱一樣)。最終問(wèn)題解決。

ps:下面看下在Vue中使用layer.js彈出層插件

layer.js(mobile)是一個(gè)小巧方便的彈出層插件,在之前的apicloud項(xiàng)目中被大量使用,但最近對(duì)apicloud的IDE、非常不友好的文檔和極低的開(kāi)發(fā)效率深感厭煩,決定棄用然后轉(zhuǎn)向Vue開(kāi)發(fā)。在開(kāi)發(fā)過(guò)程中引入layer.js的時(shí)候遇到了麻煩。原因是layer.js不支持import導(dǎo)入,這時(shí)就需要修改一下它的源碼。在看過(guò)它的源碼后,發(fā)現(xiàn)需要修改的地方只有兩處,

源碼中已經(jīng)暴露了一個(gè)全局變量layer,故只需在腳本末尾處添加

export default layer;1

這表示將這個(gè)全局變量導(dǎo)出。

然后在文件中找到下面的代碼注釋掉,這段代碼是為layer添加樣式的,但使用的路徑不對(duì),故沒(méi)有太大幫助。

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;
} ());

接下來(lái)把layer.js和layer.css分別放入static/js和static/css中,在需要的地方,比如組件內(nèi)部或者全局注冊(cè),因?yàn)轫?xiàng)目多處都會(huì)用到,所以采用全局注冊(cè),在main.js中

import layer from '../static/js/layer.js'

layer.css也使用全局注冊(cè),它可以放在index.html中通過(guò)link引入,也可以放在App.vue中

<!--index.html-->
<link rel="stylesheet" href="./static/css/layer.css" />
<!--或者-->
<!--App.vue-->
<style>
@import "../static/css/layer.css";
</style>

接下來(lái)就能在各個(gè)組件中使用layer.open等方法了。

這種方式應(yīng)該可以適用于各種不支持import導(dǎo)入的腳本,即非npm提供的module。

總結(jié)

以上所述是小編給大家介紹的vue-cli腳手架引入彈出層layer插件的幾種方法,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!

相關(guān)文章

最新評(píng)論