layer-vue

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 关闭回调 --