在vue中继续使用layer.js来做弹出层---切图网
layer.js是一个方便的弹出层插件,切图网专注于PSD2HTML等前端切图多年,后转向Vue开发。在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>
在vue中继续使用layer.js来做弹出层---切图网的更多相关文章
- js进阶 11-20 弹出层如何制作
js进阶 11-20 弹出层如何制作 一.总结 一句话总结:其实就是一个div,控制显示和隐藏即可.设置成绝对定位更好,就可以控制弹出层出现的位置.关闭的画质需要将display重新设置为none就好 ...
- js漂亮的弹出层
1.漂亮的弹出层----artDialog http://aui.github.io/artDialog/ 2.弹出层 ------layer http://sentsin.com/jquery/la ...
- layer父页获取弹出层输入框里面的值
主要是因为修改功能,原来页面填写数据如图 改为 其中点击填写明细弹出框 填写完毕后点击确认返回,同事这里因为她是存的多表,所以点击确认就直接保存数据了,改的这个功能原本保存是整体保存,我就不想改原来的 ...
- JS来添加弹出层,并且完成锁屏
上图 <html> <head> <title>弹出层</title> <style type="text/css"> ...
- bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
答案来自老外http://stackoverflow.com/questions/14795035/twitter-bootstrap-modal-blocks-text-input-field $( ...
- layer.js漂亮的弹出框
它的官方网站:http://layer.layui.com/ 消息.确认框.ifame.自定义文本.旋转木马,都有按钮,是一款强大的js 弹出框: 以下为本人的简单介绍: layer.open({ t ...
- 整理:手机端弹出提示框,使用的bootstrap中的模态框(modal,弹出层),比kendo弹出效果好
效果图: 我的代码示例: <!--提示模态框--> <div class="modal fade" id="myModal" tabindex ...
- bootstrap中的模态框(modal,弹出层)
默认的modal示例: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset= ...
- Bootstrap学习5--bootstrap中的模态框(modal,弹出层)
bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集. 务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 b ...
随机推荐
- SpringBoot整合三大组建(Servlet、Listener、Filter)
>[更多资源和教程请关注公众号:**非科班的科班**.如果觉得我写的还可以请给个赞,谢谢大家,你的鼓励是我创作的动力](https://blog.csdn.net/qq_43255017)## ...
- Java基础语法面试题50题整理(带答案)
嗯,之前某些原因整理了这份面试题,加油生活 (: 0,嗯,先做简单的,那个不对() 1,int [] sy = {0,9,2,3}; 2,int [] sy1 = new int[4]; 3,in ...
- ios--->instrument的leaks来检查内存泄漏
instrument来检查内存泄漏 1.第一步打开 或者: 然后选择leaks 2.若此时编译出现如下问题,可能是非debug版本造成的,切换成debug版本即可 打开工程的Edit Scheme选项 ...
- 2016 CCPC-Final-Wash(优先队列+贪心)
Wash Mr.Panda is about to engage in his favourite activity doing laundry! He’s brought ...
- Shell之哈希表
前言 linux系统下会有一个hash表,当你刚开机时这个hash表为空,每当你执行过一条命令时,hash表会记录下这条命令的路径,就相当于缓存一样.第一次执行命令shell解释器默认的会从PATH路 ...
- shiro中ecache-core版本引起的异常
ecache-core包版本不对引起的错误,将2.5.3换成2.4.5就好了 来源 WARN [RMI TCP Connection(3)-127.0.0.1] - Exception encount ...
- 使用Allure+testNG自动生成漂亮强大的测试用例报告
最近领导让我找一个可以每次打包自动生成测试用例的东西,jenkins或者idea都可以, 最后找到了这个allure,也踩了很多坑,废话不多说!,总结一下: 1 使用原生allure 添加依赖: &l ...
- 关于Windows Server 服务器 安装tomcat部署Java Web 项目的问题
我遇到的问题是:不知道怎么配置,感觉在服务器上部署一个web项目,应该是很高大上,步骤应该很繁琐,但是,事实却不是那样.配置反而挺简单. tomcat配置:在tomcat安装目录中的conf文件夹下有 ...
- 关于Windows Server 服务器 安装tomcat部署Java Web 项母
抄至 http://blog.csdn.net/cx0330/article/details/68957914 我遇到的问题是:不知道怎么配置,感觉在服务器上部署一个web项目,应该是很高大上,步骤应 ...
- centos7安装OTRS6
1.在文件/etc/selinux/config中配置SELINUX=disabled 重启系统.重启后确认命令getenforce返回为Disabled 2.配置数据库 我们这里使用MariaDB ...