vue项目中使用vue-layer弹框插件的方法
vue-layer弹框插件
安装
npmi--savevue-layer
引用
importlayerfrom'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弹框插件的方法的文章就介绍到这了,更多相关vuevue-layer弹框插件内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。