vue-cli脚手架引入弹出层layer插件的几种方法


Posted in Javascript onJune 24, 2019

1.如何引入

在vue-cli里,引入文件有几钟方法

一种是用npm或者cnpm指令去下载对应的插件,然后在main.js里用import方法引入,这里不讨论这种方法

我比较喜欢采用的是直接下载对应的js,然后引入到vue项目中去

问题来了,如何引入呢

方法如下:

  • 下载对应的js文件或者css文件,一般下载插件相关联的都会在一起
  • 进入vue-cli项目工程里的index.html文件,分别引入css文件和js文件

在这里,分别是

<link rel="stylesheet" href="./static/layer.css" rel="external nofollow" /> 
  <script src="./static/jquery.js"></script>
   <script src="./static/jquery.min.js"></script>
   <!-- 必须先引入上面jq 1.8版本以上的才能引layer -->
   <script src="./static/layer.js"></script>

这样在全局文件里都可以使用layer弹出层插件了,需要注意,必须先引入jq 1.8以上的版本才可以使用layer噢。

2.弹出层显示不出

  • 作为一个java开发小菜鸟,踩前端的坑基本是面向百度进行尝试解决,经历了时常两个半小时的挣扎,解决了几个问题:
  • 第一个是前端控制台报错,印象里是i is not a function 还有什么layer.open is not a function等,这些问题基本是出于引入的问题,解决途径:检查是否在之前引入了1.8以上的jq
  • 第二个是弹出层只有文字显示,但是缺乏样式,没有弹出层的feel。经过大量百度和分析,最后还是依靠调试前端样式看出端倪,问题在于里面用到的class在我引入的css文件里并不存在。经过检查,导入的css文件错误(注意有手机的css样式和另一个css,这里要用另一个,名称一样)。最终问题解决。

ps:下面看下在Vue中使用layer.js弹出层插件

layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE、非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue开发。在开发过程中引入layer.js的时候遇到了麻烦。原因是layer.js不支持import导入,这时就需要修改一下它的源码。在看过它的源码后,发现需要修改的地方只有两处,

源码中已经暴露了一个全局变量layer,故只需在脚本末尾处添加

export default layer;1

这表示将这个全局变量导出。

然后在文件中找到下面的代码注释掉,这段代码是为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-cli脚手架引入弹出层layer插件的几种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript延时重复执行函数 lLoopRun.js
Jun 29 Javascript
网页中可关闭的漂浮窗口实现可自行调节
Aug 20 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
微信小程序实现选项卡功能
Jun 19 Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
JS数组的常用10种方法详解
May 08 Javascript
JS实现网站楼层导航效果代码实例
Jun 16 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 Javascript
json.stringify()与json.parse()的区别以及用处
Jan 25 Javascript
JavaScript的function函数详细介绍
Nov 20 Javascript
浅谈一个webpack构建速度优化误区
Jun 24 #Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 #Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
Jun 24 #Javascript
JavaScript学习教程之cookie与webstorage
Jun 23 #Javascript
React组件对子组件children进行加强的方法
Jun 23 #Javascript
vue使用websocket的方法实例分析
Jun 22 #Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 #Javascript
You might like
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
用PHP提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
Laravel5.1数据库连接、创建数据库、创建model及创建控制器的方法
2016/03/29 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
IE bug table元素的innerHTML
2010/01/11 Javascript
Jquery 动态添加按钮实现代码
2010/05/06 Javascript
js查错流程归纳
2012/05/04 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
2017/06/16 Javascript
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
Django卸载之后重新安装的方法
2017/03/15 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
python实现机械分词之逆向最大匹配算法代码示例
2017/12/13 Python
Python中GIL的使用详解
2018/10/03 Python
解决Python下json.loads()中文字符出错的问题
2018/12/19 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
pycharm实现猜数游戏
2020/12/07 Python
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
医学生毕业自我鉴定
2014/03/26 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
MySQL 时间类型的选择
2021/06/05 MySQL
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android