layer-vue是一款基于vue3.0的Web弹层组件,内置dialog,page,iframe,loadig,msg,drawer等反馈组件
安装layer-vue作为独立项目的存在，首先我们需要使用pm或yar进行安装
1.pm
pmistall@layui/layer-vue2.yar
yaradd@layui/layer-vue3.css
import"@layui/layer-vue/lib/idex.css"使用layer-vue提供了组件与函数两种调用方式
组件方式：
<template><lay-layerv-model="visible">内容</lay-layer></template><script>import{LayLayer}from"@layui/layer-vue";exportdefault{compoets:{LayLayer},setup(){costvisible=ref(false)retur{visible}}}</script>你可以使用v-model配置，控制lay-layer的展示与隐藏
弹层通常作为js的回调反馈出现，所以函数的调用方式，更贴合我们的使用
核心函数：
//消息layer.msg(msg，optio,callback)//提示layer.cofirm(msg,optio,callback)//加载layer.load(type,optio,callback)//模态窗layer.ope(optio,callback)//抽屉layer.drawer(optio,callback)//关闭layer.close(id);//关闭所有layer.closeAll();使用案例：
<template><buttotype="butto"@click="opeSuccess">提示消息</butto></template><scriptsetup>import{ref}from"vue";import{layer}from"@layui/layer-vue";costopeSuccess=fuctio(){layer.msg("成功消息",{ico:1,time:1000});};</script>阅读文档属性备注描述默认值title标题--move允许拖拽falsemaxmi最小化最大化falseoffset位置--area尺寸--v-model展示隐藏falsecotet内容--shade开启遮盖--shadeClose遮盖点击关闭--shadeOpacity遮盖层透明度0.1zIdex自定义层级--type类型0:dialog1:page2:iframe3:loadig4:drawercloseBt显示关闭truebt按钮 btAlig按钮布局lrcaim入场动画0123456isOutAim关闭动画truefalseisHtmlFragmethtml解析 success显示回调--ed关闭回调--
评论