9.9 KiB
9.9 KiB
消息
"
})
}
const openAreaAuto2 = function(){
layer.open({
type:1,
title:"area:auto",
offset:['10px','50%'],
isHtmlFragment:true,
content:""
})
}
</script>
::: demo 通过 layer.msg(content, options) 创建消息窗, 第一个参数msg为消息内容, 第二参数options为可选配置, 常用于配置time超时时间等。
:::
确认::: demo 通过 layer.confirm(msg, options) 创建确认框, 第一个参数msg为文本消息, 第二个参数options为选项配置, 你可以使用options的btn属性定义操作。
:::
加载::: 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: 999, content: "设置层级" }) } const openAreaAuto = function(){ layer.open({ type:1, title:"area:auto", isHtmlFragment:true, content:""
})
}
const openAreaAuto2 = function(){
layer.open({
type:1,
title:"area:auto",
offset:['10px','50%'],
isHtmlFragment:true,
content:""
})
}
</script>
:::
抽屉::: demo 通过 layer.drawer(options) 创建抽屉层, options选项配置, 抽屉本质上是一个特殊的模态窗, 你可以使用offset选项来设置方向。
<button @click="openTop">上
<button @click="openBottom">下
<button @click="openLeft">左
<button @click="openRight">右
:::
图片::: demo 通过 layer.photos(options) 创建图片预览弹层, 参数options主要传入预览的图片链接。
:::
销毁::: demo 我们提供 layer.close(id) 与 layer.closeAll() 函数实现弹出层的主动销毁。
打开 销毁 销毁全部 <script setup> import { layer } from "../../../../layer/src/index"; let id = null; const open = function() { id = layer.open({ title: "标题", content: "内容", shade: false }) } const close = function() { layer.close(id); } const closeAll = function() { layer.closeAll(); } </script>:::
通讯::: 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, ref } 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>:::