在vue中使用layer弹框
Posted cbpm-wuhq
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在vue中使用layer弹框相关的知识，希望对你有一定的参考价值。
vue中使用layer弹框
1、npm安装
npm i --save layui-layer
2、在main.js中引入
import layer from "layui-layer";
3、然后就可以在各个组件中使用layer了
实例：
layer.confirm(‘您是如何看待前端开发？‘, {
btn: [‘重要‘,‘奇葩‘] //按钮
}, function(){
layer.msg(‘的确很重要‘, {icon: 1});
}, function(){
layer.msg(‘也可以这样‘, {
time: 20000, //20s后自动关闭
btn: [‘明白了‘, ‘知道了‘]
});
});
4、在项目中使用loading页
var loading= layer.load(3, {//请求未成功时出现loading页 ,3代表一中效果
shade: [0.1,‘#fff‘] //0.1透明度的白色背景
});
layer.close(loading); //停止loading效果
var confirm=layer.confirm(‘删除后，作者所选择【单位序号】数据将被清空，需要重新选择，是否确定?‘, {
btn: [‘确定‘,‘取消‘] //按钮
}, function(){
self.companyInfoArr.splice(index,1);
layer.close(confirm);
},function(){
});
5，1.5s后消失的提示框
layer.msg("操作成功!",{icon:1,time:1500});//提示框
6，询问框
layer.confirm(‘是否已完成支付？‘, {//layer弹窗插件
title:"信息",
closeBtn: 0,
btn: [‘付款成功‘,‘付款失败‘] //按钮
}, function(){
self.completePay(id);//查询是否支付
layer.closeAll();
},function(){
//...
});
以上是关于在vue中使用layer弹框的主要内容，如果未能解决你的问题，请参考以下文章