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来做弹出层---切图网的更多相关文章

  1. js进阶 11-20 弹出层如何制作

    js进阶 11-20 弹出层如何制作 一.总结 一句话总结:其实就是一个div,控制显示和隐藏即可.设置成绝对定位更好,就可以控制弹出层出现的位置.关闭的画质需要将display重新设置为none就好 ...

  2. js漂亮的弹出层

    1.漂亮的弹出层----artDialog http://aui.github.io/artDialog/ 2.弹出层 ------layer http://sentsin.com/jquery/la ...

  3. layer父页获取弹出层输入框里面的值

    主要是因为修改功能,原来页面填写数据如图 改为 其中点击填写明细弹出框 填写完毕后点击确认返回,同事这里因为她是存的多表,所以点击确认就直接保存数据了,改的这个功能原本保存是整体保存,我就不想改原来的 ...

  4. JS来添加弹出层,并且完成锁屏

    上图 <html> <head> <title>弹出层</title> <style type="text/css"> ...

  5. bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题

    答案来自老外http://stackoverflow.com/questions/14795035/twitter-bootstrap-modal-blocks-text-input-field $( ...

  6. layer.js漂亮的弹出框

    它的官方网站:http://layer.layui.com/ 消息.确认框.ifame.自定义文本.旋转木马,都有按钮,是一款强大的js 弹出框: 以下为本人的简单介绍: layer.open({ t ...

  7. 整理:手机端弹出提示框,使用的bootstrap中的模态框(modal,弹出层),比kendo弹出效果好

    效果图: 我的代码示例: <!--提示模态框--> <div class="modal fade" id="myModal" tabindex ...

  8. bootstrap中的模态框(modal,弹出层)

    默认的modal示例: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset= ...

  9. Bootstrap学习5--bootstrap中的模态框(modal,弹出层)

    bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集. 务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 b ...

随机推荐

  1. SpringBoot整合三大组建(Servlet、Listener、Filter)

    >[更多资源和教程请关注公众号:**非科班的科班**.如果觉得我写的还可以请给个赞,谢谢大家,你的鼓励是我创作的动力](https://blog.csdn.net/qq_43255017)## ...

  2. Java基础语法面试题50题整理(带答案)

    嗯,之前某些原因整理了这份面试题,加油生活 (:   0,嗯,先做简单的,那个不对() 1,int [] sy = {0,9,2,3}; 2,int [] sy1 = new int[4]; 3,in ...

  3. ios--->instrument的leaks来检查内存泄漏

    instrument来检查内存泄漏 1.第一步打开 或者: 然后选择leaks 2.若此时编译出现如下问题,可能是非debug版本造成的,切换成debug版本即可 打开工程的Edit Scheme选项 ...

  4. 2016 CCPC-Final-Wash(优先队列+贪心)

                  Wash Mr.Panda is about to engage in his favourite activity doing laundry! He’s brought ...

  5. Shell之哈希表

    前言 linux系统下会有一个hash表,当你刚开机时这个hash表为空,每当你执行过一条命令时,hash表会记录下这条命令的路径,就相当于缓存一样.第一次执行命令shell解释器默认的会从PATH路 ...

  6. shiro中ecache-core版本引起的异常

    ecache-core包版本不对引起的错误,将2.5.3换成2.4.5就好了 来源 WARN [RMI TCP Connection(3)-127.0.0.1] - Exception encount ...

  7. 使用Allure+testNG自动生成漂亮强大的测试用例报告

    最近领导让我找一个可以每次打包自动生成测试用例的东西,jenkins或者idea都可以, 最后找到了这个allure,也踩了很多坑,废话不多说!,总结一下: 1 使用原生allure 添加依赖: &l ...

  8. 关于Windows Server 服务器 安装tomcat部署Java Web 项目的问题

    我遇到的问题是:不知道怎么配置,感觉在服务器上部署一个web项目,应该是很高大上,步骤应该很繁琐,但是,事实却不是那样.配置反而挺简单. tomcat配置:在tomcat安装目录中的conf文件夹下有 ...

  9. 关于Windows Server 服务器 安装tomcat部署Java Web 项母

    抄至 http://blog.csdn.net/cx0330/article/details/68957914 我遇到的问题是:不知道怎么配置,感觉在服务器上部署一个web项目,应该是很高大上,步骤应 ...

  10. centos7安装OTRS6

    1.在文件/etc/selinux/config中配置SELINUX=disabled 重启系统.重启后确认命令getenforce返回为Disabled 2.配置数据库 我们这里使用MariaDB ...