15 KiB
通过 npm 工具安装 :
npm install @layui/layer-vue
在 main.ts 完成 layer-vue 的注册, 并导入 css 文件 :
import App from './App';
import { createApp } from 'vue';
import layer from '@layui/layer-vue';
import '@layui/layer-vue/lib/index.css';
const app = createApp(App);
app.use(layer).mount('#app');
因 layer-vue 可以独立使用，也可以在 layui-vue 中使用。所以请按照你的实际需求来选择。
如果你想独立使用 layer-vue, 你需要通过 npm 安装。如果你使用的是 layui-vue, 那么你无需安装 layer-vue。
入门我们提供 layer 函数来创建弹出层 :
<template>
<button type="button" @click="open">打开</button>
</template>
<script setup>
import { layer } from "@layui/layer-vue";
const open = function () {
layer.open({title:"标题", content: "内容"});
};
</script>
但在较为复杂的应用场景中, lay-layer 是一个更好的选择 :
<template>
<button @click="changeVisible">显示/隐藏</button>
<lay-layer v-model="visible">
content
</lay-layer>
</template>
<script setup>
import { ref } from "vue";
const visible = ref(false);
const changeVisible = () => {
visible.value = !visible.value;
}
</script>
::: demo 通过 layer.msg(content, options) 创建消息窗, 第一个参数msg为消息内容, 第二参数options为可选配置, 常用于配置time超时时间等。
:::
加载::: demo 通过 layer.load(type, options) 创建加载层, 第一个参数type为加载动画样式, 第二个参数options为可选配置, 常用于设置time加载时长shade遮盖层等。
:::
模态::: demo 通过 layer.open(option) 创建模态窗, 目前支持iframe page等类型, 你可以使用options选项开启Resize Offset等更多特性。
内容
" }) } const openVNode = function() { layer.open({ type: 1, title: "标题", content: h('button', { style: 'margin: 10px;' },'按钮') }) } const openMaxmin = function() { layer.open({ type: 1, title: "标题", maxmin: true, content: "内容" }) } const openResize = function() { layer.open({ type: 1, title: "标题", resize: true, content: "内容" }) } const openIndex = function() { layer.open({ type: 1, title: "标题", zIndex: 666, content: "设置层级" }) } const openAreaAuto = function(){ layer.open({ type:1, title:"area:auto", isHtmlFragment:true, content:"
"
})
}
const openBtns = function(){
layer.open({
type:1,
title:"自定义按钮",
btn:[{text:"第一个按钮",callback:function(){
console.log("第一个按钮被点击");
}},{text:"第二个按钮",callback:function(){
console.log("第二个按钮被点击");
}}]
})
}
</script>
:::
询问::: demo 通过 layer.confirm(msg, options) 创建确认框, 第一个参数msg为文本消息, 第二个参数options为选项配置, 你可以使用options的btn属性定义操作。
:::
抽屉::: demo 通过 layer.drawer(options) 创建抽屉层, options选项配置, 抽屉本质上是一个特殊的模态窗, 你可以使用offset选项来设置方向。
<button @click="openTop">上
<button @click="openBottom">下
<button @click="openLeft">左
<button @click="openRight">右
:::
图片层::: demo 通过 layer.photos(options) 创建图片预览弹层, 参数options主要传入预览的图片链接。
:::
通讯::: demo 👉 查看 Children1.vue, 通过 h() 函数的第二个参数向 Children1.vue 传递响应式变量。
数据 <script setup> import { reactive, h, resolveComponent } from 'vue' import { layer } from "../../../layer/src/index" const data = reactive({ remark: "信息" }) const ChildrenOne = resolveComponent('Children1') const openComponent1 = () => { layer.open({ title: '标题', content: h(ChildrenOne, { data }), shade: false, }) } </script>:::
::: demo 👉 查看 Children2.vue, 通过 h() 函数的第二个参数声明 onXxx() 形式的函数完成 Children2.vue 的事件监听。
事件 <script setup> import { reactive, h, resolveComponent } from 'vue' import { layer } from "../../../layer/src/index" const prop = reactive({}) const numb = ref(1000) const ChildrenTwo = resolveComponent('Children2') const openComponent2 = () => { layer.open({ title: '标题', content: h(ChildrenTwo, { prop, onAdd(res){ numb.value = numb.value + 1; }, onSub(res) { numb.value = numb.value - 1; } }), }) } </script>:::
销毁::: demo 我们提供 layer.close(id) 与 layer.closeAll() 函数实现弹出层的主动销毁。
打开 销毁 销毁全部 <script setup> const open = function() { const id = layer.open({ title: "标题", content: "内容", shade: false }) return id; } const close = function() { layer.close(open); } const closeAll = function() { layer.closeAll(); } </script>:::
组件::: demo 我们提供了一些核心函数来创建弹出层, 但在一些复杂的应用场景中, lay-layer是一个更好的选择。
:::
选项我们提供了丰富的 options 配置, 你可以通过配置来满足对 layer 的定制化, 需要注意的是有些属性仅适用部分组件。
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| type | 类型 | string | 1 |
0 1 2 3 |
| title | 标题 | string boolean | 信息 |
-- |
| content | 内容 | string vnode | -- | -- |
| v-model | 显示 | boolean | false |
true false |
| offset | 位置 | string array | ['50%','50%'] |
-- |
| area | 尺寸 | string array | auto |
-- |
| move | 拖拽 | boolean | true |
true false |
| maxmin | 缩放 | boolean | false |
true false |
| resize | 拉伸 | boolean | false |
true false |
| anim | 入场动画 | number | 0 |
0 - 6 |
| isOutAnim | 出场动画 | boolean | true |
true false |
| btnAlign | 按钮位置 | string | r |
l c r |
| closeBtn | 关闭按钮 | boolean | true |
true false |
| time | 关闭时间 | number | 0 |
-- |
| shade | 遮盖层 | boolean | true |
true false |
| shadeClose | 遮盖层关闭 | boolean | true |
true false |
| shadeOpacity | 遮盖层透明度 | string | 0.1 |
0.1 - 1 |
| isHtmlFragment | 解析 html 字符 | boolean | false |
true false |
| imgList | 图片数据数组 | array[{src:图片链接,alt:图片名字可选'}] | - | - |
anim：Number，默认：0
我们的出场动画全部采用CSS3。这意味着除了ie6-9，其它所有浏览器都是支持的。目前anim可支持的动画类型有0-6 如果不想显示动画，设置 anim: -1 即可。
另外需要注意的是，3.0之前的版本用的是 shift 参数。
| 属性 | 描述 |
|---|---|
| anim:0 | 平滑放大 |
| anim:1 | 从上掉落 |
| anim:2 | 从最底部往上滑入 |
| anim:3 | 从左滑入 |
| anim:4 | 从左翻滚 |
| anim:5 | 渐显 |
| anim:5 | 抖动 |
直接调用 layer 的方法，组件会通过 Vue.render 动态创建新的 Vue 实体。其 context 与当前代码所在 context 并不相同，因而无法获取 context 信息。
当你需要 context 信息（例如使用全局注册的组件）时，可以通过 appContext 属性传递当前组件 context, 当你需要保留属性响应式时，你可以使用函数返回:
import { getCurrentInstance, ref } from 'vue';
import { layer } from "@layui/layer-vue";
const appContext = getCurrentInstance().appContext;
const title = ref("标题")
layer.open({
title: () => title.value,
content: h("children"),
appContext: appContext
})
::: demo 以写作为工具，为道途，先帮助自己一程，再以自己的领悟帮助他人一程, 这是一种服务 -- 庆山
<script setup></script>:::