layer-vueWeb 弹层组件
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 | 关闭回调 | -- |
评论