在Vue中使用layer.js彈出層插件

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

源碼中已經暴露了一個全局變量layer，故只需在腳本末尾處添加

export default layer;

這表示將這個全局變量導出。

然后在文件中找到下面的代碼注釋掉，這段代碼是為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中，在需要的地方，比如組件內部或者全局注冊，因為項目多處都會用到，所以采用全局注冊，在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等方法了。

這種方式應該可以適用於各種不支持import導入的腳本，即非npm提供的module。