layer-vue是一款基于vue3.0的Web弹层组件,内置dialog,page,iframe,loading,msg,drawer等反馈组件
安装layer-vue作为独立项目的存在，首先我们需要使用npm或yarn进行安装
1.npm
npminstall@layui/layer-vue2.yarn
yarnadd@layui/layer-vue3.css
import"@layui/layer-vue/lib/index.css"使用layer-vue提供了组件与函数两种调用方式
组件方式：
<template><lay-layerv-model="visible">内容</lay-layer></template><script>import{LayLayer}from"@layui/layer-vue";exportdefault{components:{LayLayer},setup(){constvisible=ref(false)return{visible}}}</script>你可以使用v-model配置，控制lay-layer的展示与隐藏
弹层通常作为js的回调反馈出现，所以函数的调用方式，更贴合我们的使用
核心函数：
//消息layer.msg(msg，option,callback)//提示layer.confirm(msg,option,callback)//加载layer.load(type,option,callback)//模态窗layer.open(option,callback)//抽屉layer.drawer(option,callback)//关闭layer.close(id);//关闭所有layer.closeAll();使用案例：
<template><buttontype="button"@click="openSuccess">提示消息</button></template><scriptsetup>import{ref}from"vue";import{layer}from"@layui/layer-vue";constopenSuccess=function(){layer.msg("成功消息",{icon:1,time:1000});};</script>阅读文档属性备注描述默认值title标题--move允许拖拽falsemaxmin最小化最大化falseoffset位置--area尺寸--v-model展示隐藏falsecontent内容--shade开启遮盖--shadeClose遮盖点击关闭--shadeOpacity遮盖层透明度0.1zIndex自定义层级--type类型0:dialog1:page2:iframe3:loading4:drawercloseBtn显示关闭truebtn按钮 btnAlign按钮布局lrcanim入场动画0123456isOutAnim关闭动画truefalseisHtmlFragmenthtml解析 success显示回调--end关闭回调--
评论