关注前端 | 前端博客
当前位置: VUE > vue项目中全局挂载layer

vue项目中全局挂载layer

2019-07-28 分类:VUE 作者:管理员 阅读(570)

弹出层,无论在移动端还是PC端,使用率几乎百分百,这篇文章主要介绍layer.js如何挂载到vue项目中,为什么我要选layerJS作为vue项目中的弹出层呢?官方介绍截取:"layer 甚至兼容了包括 IE6 在内的所有主流浏览器。她数量可观的接口,使得您可以自定义太多您需要的风格,每一种弹层模式各具特色,广受欢迎。",废话不多说,开始我们的主题。

默认你已经搭建好你的vue项目

第一步

我们在项目中的static文件夹中新建css和js已经images文件夹,如果你项目中已经有了略过。

第二步

然后从github上下载下来layer的压缩包,解压,把layer.css复制一份放进static里面的css文件夹里,再把layer.js放进static里面的js文件夹里,theme里面的图片放进static里面的images文件夹里。

第三步

把压缩的jQuery 1.8+版本的代码复制在layer.js的第一行,到此,layer.js里面就暴露出了两个我们需要的变量$和layer,当然你也可以只导出一个,谁也不知道你vue中要不要需要dom操作呢,我们假如只需要layer,在layer.js最后 加上 以及 "export default layer" 即可

第五步

layer.js经过以上步骤已经导出layer了,那么我们再去man.js里导入layer这个对象,注册后再全局挂载到vue的原型上,具体代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import layer from '../static/js/layer' // layer 弹出层插件


Vue.use(layer)



Vue.config.productionTip = false
Vue.prototype.layer=layer;


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
至此,layer已经出现在vue的实例上了,只差最后一步了,往下看。

第六步

页面使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
  <div class="hello">
      <button @click="hanlder1()">初体验</button>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      hanlder1(){
        this.layer.alert('内容')
      },
    }
  }
}
</script>

是不是就这样ok了呢?肯定不是,还有坑要踩,往下看。

第七部

更改layer.css里面的图片途径,图片路径前加上“../images”,这样图标路径问题也就解决了。
如果公司有自己的UI,觉得图标丑,产品要重新设计,也是可以的,扩展图标需要在layer.css里面增加公司自定义的图标类型对应的class类名,同时images里面的雪碧图也要重新布局,由UI完成,

PS:打包后遇到的问题

针对npm run build 后,运行dist里的index.html,一开始就会提示Built files are meant to be served over an HTTP server. Opening index.html over file:// won't work,这个问题是index.html里有加载文件资源路径不对,解决方法你可以在dist文件夹里执行 "npm install -g http-server",也可以打开index.html,把引入的资源路径都改对.

写在最后

至此,我们的vue项目成功的可以用上兼容IE6的layer弹出层了,,另附上layer的官方文档,大量api,layerAPI速览,另附上layer-demo只写了几个,更多请自行看文档体验.

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(11) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
11

感谢您让我添加个鸡腿!

支付宝
微信
标签:

上一篇:

下一篇:

共有 0 条评论 - vue项目中全局挂载layer

博客简介

一位不知名的前端工程师,专注全栈技术,分享各种所遇问题与个人心得,梦想成为一位知名大神!

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线