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 相关文章推荐
锋利的jQuery jQuery中的DOM操作
Mar 21 Javascript
jquery 关于event.target使用的几点说明介绍
Apr 26 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
使用js实现的简单拖拽效果
Mar 18 Javascript
AngularJS基础 ng-options 指令详解
Aug 02 Javascript
jQuery多个版本和其他js库冲突的解决方法
Aug 11 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
Node.js连接mongodb实例代码
Jun 06 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
JavaScript格式化json和xml的方法示例
Jan 22 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代码审核的详细介绍
2013/06/13 PHP
php中strtotime函数用法详解
2014/11/15 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
javascript instanceof,typeof的区别
2010/03/24 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
jquery动画1.加载指示器
2012/08/24 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
jQuery实现长文字部分显示代码
2013/05/13 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
2019/01/18 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
[02:33]DOTA2亚洲邀请赛趣味视频之吐真话筒
2018/03/31 DOTA
pycharm 使用心得(三)Hello world!
2014/06/05 Python
Python访问MySQL封装的常用类实例
2014/11/11 Python
Python中的各种装饰器详解
2015/04/11 Python
详解Python如何获取列表(List)的中位数
2016/08/12 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
六道php面试题附答案
2014/06/05 面试题
自荐书模板
2013/12/15 职场文书
班级学习雷锋活动总结
2014/07/04 职场文书
干部理论学习心得体会
2016/01/21 职场文书
初中化学教学反思
2016/02/22 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis