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。
在Vue中使用layer.js弹出层插件的更多相关文章
-
layer/layui弹出层插件bug
<button class="layui-btn" lay-submit lay-filter="formDemo" id="layui-btn ...
-
js弹出层插件 -- weebox
1.引入文件: 使用前需包含以下jquery.js.bgiframe.js.weebox.js.wee.css文件 2.基本用法举例如下: <script type="text/jav ...
-
layer (jQuery弹出层插件)使用
$(".delete").click(function(){ var work_name = $(this).data('name'); var item_id = $(this) ...
-
jQuery、layer实现弹出层的打开、关闭功能实例详解
本文主要介绍了jQuery.layer实现弹出层的打开.关闭功能,需要的朋友可以参考下,希望能帮助到大家. 打开弹出层: 在list页面带入layer.js 在list页面点击时,弹出form弹出层, ...
-
js弹出层
js弹出层 1.div附近显示 <div id="message"></div> $().delay().hide(); 2.遮罩层 表单提交后遮住页面,等 ...
-
webui-popover 一个轻量级的jquery弹出层插件
该提示框插件可以和Bootstrap完美结合,但是并不一定需要和Bootstrap一起使用.它支持IE7以上的浏览器. 首先要引入需要的css js 文件 <link rel="s ...
-
jQuery弹出层插件popbox
都什么年代了,还自己写弹出层插件!是的,①自己写的自己好控制②可定制性高③兼容低版本IE 本插件有以下特性: 样式分离,可定制,纯净无图片 可自定义按钮及按钮的样式.点击事件 可指定选择器选择页面元素 ...
-
Jquery学习之路(三) 实现弹出层插件
弹出层的应用还是比较多的,登陆,一些同页面的操作,别人的总归是别人的,自己的才是自己的,所以一直以来想写个弹出层插件.不多废话,直接开始吧! 不想看可以在这里直接下载源码xsPop.zip 1:遮罩层 ...
-
写了一个jquery的 弹出层插件。
下载地址:http://pan.baidu.com/s/1eQ26CMm ps:ajax加载做的,要有环境才能正常运行哦! //这是一个以ajax加载显示弹出层插件 参数(option): widt ...
随机推荐
-
Time33算法
Time33是字符串哈希函数,现在几乎所有流行的HashMap都采用了DJB Hash Function,俗称"Times33"算法.Times33的算法很简单,就是不断的乘33. ...
-
Exchange 2013 、Lync 2013、SharePoint 2013 二
上一篇简单介绍了安装过程,本篇主要集成 上一篇文章有关于头像的显示问题,engineer 给出了一个连接,介绍了Exchange和Lync的集成过程,根据介绍都配制了一遍. 一.Exchange 和 ...
-
5月21日 CSS样式表加阴影
HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
-
expr命令
expr命令的兩大作用:1)四则运算:2)字符串的操作: 1.四则运算 [tough@localhost ~]$ + + [tough@localhost ~]$ + [tough@localhost ...
-
iOS开发——使用OC篇&;frame,bounds,center,position,anchorPoint总结
frame,bounds,center,position,anchorPoint总结 图层的 position 属性是一个 CGPoint 的值,它指定图层相当于它父图层的位置, 该值基于父图层的坐标 ...
-
linux shell中的单引号与双引号的区别(看完就不会有引号的疑问了)(转)
tips: ============================= IFS - LINUX字段分隔符,内部字段分隔符 IFS(Internal Field Seperator)在Linux的she ...
-
hyperledger fabric 架设命令
单节点架设 Order 网络: cd ~/go/src/github.com/hyperledger/fabric/examples/e2e_cli/ rm -rf channel-artifacts ...
-
BZOJ 2303 方格染色(带权并查集)
要使得每个2*2的矩形有奇数个红色,如果我们把红色记为1,蓝色记为0,那么我们得到了这2*2的矩形里的数字异或和为1. 对于每个方格则有a(i,j)^a(i-1,j)^a(i,j-1)^a(i-1,j ...
-
【BZOJ1283/3550】序列/[ONTAK2010]Vacation 最大费用流
[BZOJ1283]序列 Description 给出一个长度为 的正整数序列Ci,求一个子序列,使得原序列中任意长度为 的子串中被选出的元素不超过K(K,M<=100) 个,并且选出的元素之和 ...
-
python数据绘图常用方法总结
挖坑,以后还会更新吧 做数学建模画图使用了matplotlib和numpy,这里简单总结一下常用的用法 一.数据拟合 1.np.polyfit(x, y, n) 使用n次多项式去拟合x,y散点图,返回 ...