在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。
在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 ...
随机推荐
- (11)C#值类型和引用类型,堆和栈,ref和out,装箱和拆箱
一.值类型和引用类型定义 以内存中的存在方式可以把变量分成两大类型,值类型和引用类型. 值类型:系统只占用一块内存,数据直接存储在内存里. 引用类型:系统占用两块内存,一块存放地址,另一块存放实际数据 ...
- 干净卸载mysql
一.在控制面板中卸载mysql软件 二.卸载过后删除C:\Program Files (x86)\MySQL该目录下剩余了所有文件,把mysql文件夹也删了 三.windows+R运行“regedit ...
- 洛谷——P1579 哥德巴赫猜想(升级版)
P1579 哥德巴赫猜想(升级版) 题目背景 1742年6月7日哥德巴赫写信给当时的大数学家欧拉,正式提出了以下的猜想:任何一个大于9的奇数都可以表示成3个质数之和.质数是指除了1和本身之外没有其他约 ...
- 利用MAP动态创建C++类对象
MFC的CRuntimeClass利用链表实现了C++类的动态创建.但是如果项目中对动态创建的要求比较低,我们完全可以利用map实现简单的动态创建. http://blog.csdn.net/yeji ...
- LA 3026 Period
这只是蓝书上的一道KMP水题...然后对于最长前缀的循环证明我就不说了... #include<iostream> #include<cstring> #include< ...
- iframe和response.sendRedirect()跳转到父页面的问题
在项目中,因为为了给页面分层次,就使用了 内嵌iframe 的分了三个框.在子页面进行操作的时候,如果session超时,就要被拦截器拦截重新回到首页进行登录,但是在sub页 面 ,进行操作的时候,如 ...
- (转)Unity3d通过Action注册事件,回调方法
http://www.cnblogs.com/jisi5789/archive/2013/04/22/3036589.html using UnityEngine; namespace Liulala ...
- IntelliJ IDEA控制台Console里没有查找快捷键
问题描述:之前的项目一直用的 Eclipse,习惯了其快捷键的使用,现在的项目换到IntelliJ IDEA,为了尽快上手,就把快捷键Keymap修改为Eclipse方式.发现在控制台Console里 ...
- Winform打砖块游戏制作step by step第6节---画墙(砖块集合)以及双缓冲实现
一 引子 为了让更多的编程初学者,轻松愉快地掌握面向对象的思考方法,对象继承和多态的妙用,故推出此系列随笔,还望大家多多支持. 预备知识,无GDI画图基础的童鞋请先阅读一篇文章让你彻底弄懂WinFor ...
- Unity3d / 3ds max 模型分享站点
http://www.cgrealm.org/model/ 王国3D模型库 http://www.cgjoy.com/ 游戏特效论坛