代码拉取完成，页面将自动刷新
同步操作将从 Layui Vue/layer-vue 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
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 | 关闭回调 | -- |
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手