vue-cli脚手架引入弹出层layer插件的几种方法
作者:吴傲阳 发布时间:2023-07-02 17:04:29
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插件的几种方法,网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
来源:https://segmentfault.com/a/1190000019556312
猜你喜欢
- 1、背景在项目中,我们经常使用到update语句,那么update语句会锁定表中的那些记录呢?此处我们通过一些简单的案例来模拟下。此处是我自
- 目录前言🎪 一、Python 关键字🎢 二、Python标识符🎠 2.1 在 Python 中创建标识符的指南🎡 2.2 测试标识符是否有效
- 2016年9月22日凌晨,微信宣布“小程序”问世,妈的,论坛,博客全是小程序,昨天当之无愧抢了头条,当然只是开始内测了,微信公众平台对200
- 代码如下# -*- coding:utf-8 -*-import cv2import numpy as npfrom tkinter imp
- 一丶为什么数据库需要锁数据库锁设计的初衷是处理并发问题。作为多用户共享 的资源,当出现并发访问的时候,数据库需要合理地控制资源的访问规则。而
- Notes怀疑模型梯度 * ,想打印模型 loss 对各权重的导数看看。如果如果fit来训练的话,可以用keras.callbacks.Ten
- 用Python+OpenCV实现了自动扫雷,突破世界记录,我们先来看一下效果吧。中级 - 0.74秒 3BV/S=60.81相信许多人很早就
- 本章来实现一下删除已上传文件,同时优化了一下第一章中的代码。废话少说,上代码得意1.调整列表页面list.jsp<%@ page co
- 语法糖内的defineProps及defineEmits1、defineProps获取组件传值<div :style="fo
- Python httpx 运行过程中无限阻塞requests 模块只支持 http1,在遇到 http2 的数据接口的时候(某乎的搜索接口)
- 1.什么是pandas2.查看pandas版本信息print(pd.__version__)输出:0.24.13.常见数据类型常见的数据类型
- 如果备份的数据库有2个文件,分别是.LDF 和 .MDF,打开企业管理器,在实例上右击---所有任务--附加数据库,然后选择那个.MDF文件
- 前言今天为大家介绍一个利用Python模拟登陆CSDN的案例,虽然看起来很鸡肋,有时候确会有大用处,在这里就当做是一个案例练习吧,提高自己的
- 对比起Cookie,Session 是存储在服务器端的会话,相对安全,并且不像 Cookie 那样有存储长度限制。由于 Session 是以
- adminadmin 是 Django 自带的后台管理组件,你可以在 admin 中执行增删改查等操作。它以可视化的方式让你来操纵模型表,十
- mysqldump常用于MySQL数据库逻辑备份。1、各种用法说明A. 最简单的用法:mysqldump -uroot -pPassword
- Go语言是谷歌2009发布的第二款开源编程语言。Go语言专门针对 多处理器系统应用程序的编程进行了优化,使用Go编译的程序可以媲美C或C++
- 2D坐标系1 修改全部坐标颜色import matplotlib.pyplot as pltimport numpy as np#显示静态图
- linux默认是安装了python,默认是安装python2.6.6,可能安装的版本是不能符合我们需要的python要求的。我们需要重新安装
- 一、基础介绍Go 是静态(编译型)语言,是区别于解释型语言的弱类型语言(静态:类型固定,强类型:不同类型不允许直接运算)例如 python