在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 ...
随机推荐
- MySQL-python install
Redhat 7.6 yum install python-devel mysql-devel gcc -y pip install MySQL-python==1.2.5
- Best Time to Buy and Sell Stock with Cooldown -- LeetCode
Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...
- 2017 China Collegiate Programming Contest Final (CCPC 2017)
题解右转队伍wiki https://acm.ecnu.edu.cn/wiki/index.php?title=2017_China_Collegiate_Programming_Contest_Fi ...
- 洛谷 P3804 后缀自动机
题目描述 给定一个只包含小写字母的字符串SS , 请你求出 SS 的所有出现次数不为 11 的子串的出现次数乘上该子串长度的最大值. 输入输出格式 输入格式: 一行一个仅包含小写字母的字符串SS 输出 ...
- devexpress XtraReport报表 ---主从报表
private void GetWqpWorkPrinter(List<ReelListMagt> list, string WorkDate, User user) { ReelList ...
- 解决android客户端使用soap与服务器通讯错误415
在编写一个android client与服务器使用soap通讯,虽然能连上但不是正常的200代码,而是415,经查询是"HTTP 415 错误 – 不 支持的媒体类型(Unsupported ...
- 【mybatis】mybatis中的<if test=“”>test中多条件
mybatis中的<if test=“”>test中多条件 代码展示: 其中 accountCode和apiName都是ApiAllRespBean的属性 <select id=&q ...
- idea设置断点,对于for循环,到指定次数时停止
断点处右键 参考:https://www.w3cschool.cn/intellij_idea_doc/intellij_idea_doc-hn272f6k.html https://www.w3cs ...
- python 常用系统参数
获取当前路径: os.path.abspath('.') 或os.getcwd() 获取上一级路径: print os.path.abspath('..') 获取上上一级路径: os.path.ab ...
- LINQ获取两个List的交集
1.调用: UserList = UserList.ToList().Intersect(userIDList, new MyUserComparer()).AsQueryable(); 2.须要重写 ...