layer-vue —— 基于 vue 3.0 的 Web 弹层组件

layer - vue 是一款基于 vue 3.0 的 Web 弹层组件, 内置 dialog, page, iframe, loading, msg, drawer 等反馈组件

安装

layer - vue 作为独立项目的存在，首先我们需要使用 npm 或 yarn 进行安装

1.npm

npm install @layui/layer-vue 

2.yarn

yarn add @layui/layer-vue 

3.css

import "@layui/layer-vue/lib/index.css" 

使用

layer-vue 提供了 组件 与 函数 两种调用方式

组件方式：

<template> <lay-layer v-model="visible"> 内容 </lay-layer> </template> <script> import { LayLayer } from "@layui/layer-vue"; export default { components: { LayLayer }, setup(){ const visible = 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> <button type="button" @click="openSuccess">提示消息</button> </template> <script setup> import { ref } from "vue"; import { layer } from "@layui/layer-vue"; const openSuccess = function () { layer.msg("成功消息",{icon:1,time:1000}); }; </script> 

阅读文档

属性

备注	描述	默认值
title	标题	--
move	允许拖拽	false
maxmin	最小化 最大化	false
offset	位置	--
area	尺寸	--
v-model	展示 隐藏	false
content	内容	--
shade	开启遮盖	--
shadeClose	遮盖点击关闭	--
shadeOpacity	遮盖层透明度	0.1
zIndex	自定义层级	--
type	类型	0: dialog 1: page 2: iframe 3: loading 4: drawer
closeBtn	显示关闭	true
btn	按钮
btnAlign	按钮布局	l r c
anim	入场动画	0 1 2 3 4 5 6
isOutAnim	关闭动画	true false
isHtmlFragment	html 解析
success	显示回调	--
end	关闭回调	--