vue项目中使用vue-layer弹框插件的方法

 更新时间:2020年03月11日 14:15:27   作者:郭敏  
这篇文章主要介绍了vue项目中使用vue-layer弹框插件的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

vue-layer弹框插件

安装

npm i --save vue-layer

引用

import layer from 'vue-layer'
Vue.prototype.$layer = layer(Vue);

参数说明

{
 type: 0, //0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
 title: '信息',
 content: '',
 area: 'auto',
 offset: 'auto',
 icon: -1,
 btn: '确定',
 time: 0,
 shade: true,//是否显示遮罩
 yes: '',
 cancel: '',
 tips: [0,{}],//支持上右下左四个方向,通过1-4进行方向设定,可以设定tips: [1, '#c00']
 tipsMore: false,//是否允许多个tips
 shadeClose: true,//点击遮罩是否关闭
}

方法

 layer.alert(content, [options, yes]);
 // options和yes可以省略, 如果您不愿意写options,则可以直接写确定按钮的函数,即yes
 // content 可以为html

layer.confirm(content, [options, yes, cancel]);
 // options,yes和cancel可以省略, 如果您不愿意写options,则可以直接写确定按钮的函数,即yes,或者覆盖默认的cancel方法。PS:yes和cancel方法不能互换
 //content 可以为html

layer.msg(content, [options, end]);
 // options和end可以省略, 如果您不愿意写options,则可以直接写时间到期的回调即可,即end方法
 // 默认msg的关闭时间为1.5秒
 // content 可以为html

layer.tips(content, follow, options);
//content 可以为html
//follow对css选择器,用来定位目标

layer.iframe({
 content: {
  content: componentName, //传递的组件对象
  parent: this,//当前的vue对象
  data:{}//props
 },
 area:['800px','600px'],
 title: 'title'
});
// data参数可认为是componentName的props,同时 该方法会自动添加一个key为layerid的值, 该值为创建层的id, 可以直接用来关闭该层
// options参数直接写到json里即可,比如title

layer.open(options);

layer.close(id);

layer.closeAll(type);

其它说明

该包的css都为vl-notice开头, 需要重写css样式,覆盖即可

总结

到此这篇关于vue项目中使用vue-layer弹框插件的方法的文章就介绍到这了,更多相关vue vue-layer弹框插件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue2老项目中node-sass更换dart-sass的操作方法

    vue2老项目中node-sass更换dart-sass的操作方法

    这篇文章主要介绍了vue2老项目中node-sass更换dart-sass的操作方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-07-07
  • vue 同局域网访问不到的问题及解决

    vue 同局域网访问不到的问题及解决

    这篇文章主要介绍了vue 同局域网访问不到的问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 基于Vue SEO的四种方案(小结)

    基于Vue SEO的四种方案(小结)

    这篇文章主要介绍了基于Vue SEO的四种方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • 深入解析Vue中的this.$forceUpdate()的使用

    深入解析Vue中的this.$forceUpdate()的使用

    this.$forceUpdate() 是一个重要的实例方法,本文主要介绍了深入解析Vue中的this.$forceUpdate()的使用,具有一定的参考价值,感兴趣的可以了解一下
    2024-07-07
  • Vue2实现图片的拖拽,缩放和旋转效果的示例代码

    Vue2实现图片的拖拽,缩放和旋转效果的示例代码

    这篇文章主要为大家介绍了如何基于vue2 实现图片的拖拽、旋转、鼠标滚动放大缩小等功能。文中的示例代码讲解详细,感兴趣的小伙伴可以尝试一下
    2022-11-11
  • vue中如何更改element-ui主题色

    vue中如何更改element-ui主题色

    这篇文章主要介绍了vue中如何更改element-ui主题色,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue结合Axios+v-for列表循环实现网易健康页面(实例代码)

    vue结合Axios+v-for列表循环实现网易健康页面(实例代码)

    这篇文章主要介绍了vue结合Axios+v-for列表循环实现网易健康页面,在项目下安装axios,通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • 解决axios post 后端无法接收数据的问题

    解决axios post 后端无法接收数据的问题

    今天小编就为大家分享一篇解决axios post 后端无法接收数据的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue中splice()方法对数组进行增删改等操作的实现

    Vue中splice()方法对数组进行增删改等操作的实现

    vue中对数组的元素进行删除,以前一直以为这个方法是vue中特有的,后来百度之后才知道原来是js的一个写法,下面这篇文章主要给大家介绍了关于Vue中splice()方法对数组进行增删改等操作的实现方法,需要的朋友可以参考下
    2023-05-05
  • vue使用stompjs实现mqtt消息推送通知

    vue使用stompjs实现mqtt消息推送通知

    这篇文章主要为大家详细介绍了vue中使用stompjs实现mqtt消息推送通知,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06

最新评论