Using the Layer.js pop-up layer plugin in Vue

Layer.js (mobile) is a small, easy-to-use pop-up layer plug-in that was used extensively in previous Apicloud projects, but was recently bored with Apicloud's IDE, very unfriendly documentation, and very low development efficiency, and decided to discard and turn to Vue for development. There was trouble introducing layer.js during the development process. The reason is that layer.js does not support import imports, then you need to modify its source code. After looking at its source code, found that there are only two places to modify,

A global variable layer has been exposed in the source code, so just add it at the end of the script

default layer;

This means that the global variable is exported.

Then find the following code in the file comment out, this code is to add style for layer, but the use of the wrong path, it is not much help.

Document.head.appendChild (function() {    var link = doc.createelement (' link ');     = path + ' need/layer.css?2.0 ';     = ' Text/css ';     = ' StyleSheet ' link.id = ' layermcss ';     return link;} ());

Next put Layer.js and layer.css into Static/js and static/css respectively, where needed, such as component internal or global registration, because the project will be used in many places, so the use of global registration, in the Main.js

Import layer from '. /static/js/layer.js '

LAYER.CSS also uses global registration, which can be introduced via link in index.html, and can be placed in App.vue

<!--index.html -<Linkrel= "stylesheet"href= "./static/css/layer.css" /><!--or -<!--App.vue -<style>@import ". /static/css/layer.css ";</style>

The next step is to use Layer.open and other methods in each component.

This should work for a variety of scripts that do not support import imports, that is, the module that is not provided by NPM.

Using the Layer.js pop-up layer plugin in Vue