layui弹框封装成vue写法
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了layui弹框封装成vue写法相关的知识，希望对你有一定的参考价值。
参考技术A layui 其实更偏向与后端开发人员使用，在服务端页面上有非常好的效果做后台框架，满足服务端程序员的需求。layui是提供给后端开发人员最好的ui框架，基于DOM驱动，在实现前端交互上比较麻烦，页面的增删改查都需要查询DOM元素。所以在不需要交互的时候，用layui还是不错的。
在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(){
//...
});
以上是关于layui弹框封装成vue写法的主要内容，如果未能解决你的问题，请参考以下文章
vue实战：三分钟实现优雅弹框 [ 项目级组件封装 ][ 超详细 ]