layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE、非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue开发。这篇文章主要介绍了vue-cli脚手架引入弹出层layer插件的几种方法,需要的朋友可以参考下

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插件的几种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对爱安网网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

最新资讯
暴风集团退市倒计时 注册制下优胜劣汰效率将更高

暴风集团退市倒计时

A股市场已经不是几年前乃至十多年前的A股市场,上市难退
蓝城兄弟正式上市:开盘价20.45美元 涨幅27.8%

蓝城兄弟正式上市:开盘

LGBTQ社交平台Blued母公司BlueCity(以下称蓝城兄弟)正式
巴菲特再向盖茨基金会等5家慈善机构捐赠29亿美元

巴菲特再向盖茨基金会

据国外媒体报道,“股神”沃伦·巴菲特今日再向梅林达·
vivo再布局高端:X50系列新增Pro+产品线 支持1亿像素模式

vivo再布局高端:X50系

vivo今日举行X50 Pro+新品线上品鉴会。值得注意的是,这
IBM已与RPA软件供应商WDG Automation达成收购最终协议

IBM已与RPA软件供应商

7月8日,IBM宣布,已与巴西机器人流程自动化(RPA)软件供应
Facebook监管委员会今秋开始运作 可推翻扎克伯格决定

Facebook监管委员会今

Facebook新组建的“内容监督委员会”今日宣布,该委员会
最新文章
Vue实现图片与文字混输效果

Vue实现图片与文字混

用多了 JQuery ,习惯了使用JQuery的API操作 DOM ,几乎忘
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

Vue实现点击当前元素

这篇文章主要介绍了Vue实现点击当前元素以外的地方隐
Vue实现验证码功能

Vue实现验证码功能

这篇文章主要为大家详细介绍了Vue实现验证码功能,文中
JS实现的雪花飘落特效示例

JS实现的雪花飘落特效

这篇文章主要介绍了JS实现的雪花飘落特效,结合实例形
微信小程序实现图片压缩

微信小程序实现图片压

这篇文章主要为大家详细介绍了微信小程序实现图片压缩
JavaScript实现京东放大镜效果

JavaScript实现京东放

这篇文章主要为大家详细介绍了JavaScript实现京东放大