418 lines
9.9 KiB
Markdown
418 lines
9.9 KiB
Markdown
<fieldset class="layui-elem-field layui-field-title">
|
|
<legend>消息</legend>
|
|
</fieldset>
|
|
|
|
::: demo 通过 layer.msg(content, options) 创建消息窗, 第一个参数`msg`为消息内容, 第二参数`options`为可选配置, 常用于配置`time`超时时间等。
|
|
|
|
<template>
|
|
<button @click="msg">普通消息</button>
|
|
<button @click="success">成功消息</button>
|
|
<button @click="failure">失败消息</button>
|
|
<button @click="warm">警告消息</button>
|
|
<button @click="info">锁定消息</button>
|
|
</template>
|
|
|
|
<script>
|
|
import { layer } from "../../../../layer/src/index"
|
|
|
|
const msg = function() {
|
|
layer.msg("普通消息", { time: 1000 })
|
|
}
|
|
|
|
const success = function() {
|
|
layer.msg("成功消息", { time: 1000, icon: 1})
|
|
}
|
|
|
|
const failure = function() {
|
|
layer.msg("失败消息", { time: 1000, icon: 2})
|
|
}
|
|
|
|
const warm = function() {
|
|
layer.msg("警告消息", { time: 1000, icon: 3})
|
|
}
|
|
|
|
const info = function() {
|
|
layer.msg("疑问消息", { time: 1000, icon: 4})
|
|
}
|
|
</script>
|
|
|
|
:::
|
|
|
|
<fieldset class="layui-elem-field layui-field-title">
|
|
<legend>确认</legend>
|
|
</fieldset>
|
|
|
|
::: demo 通过 layer.confirm(msg, options) 创建确认框, 第一个参数`msg`为文本消息, 第二个参数`options`为选项配置, 你可以使用`options`的`btn`属性定义操作。
|
|
|
|
<template>
|
|
<button @click="openConfirm1">确认框</button>
|
|
<button @click="openConfirm2">询问框</button>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { layer } from "../../../../layer/src/index"
|
|
|
|
const openConfirm1 = function() {
|
|
layer.confirm("layui-vue 1.0.0 已经发布")
|
|
}
|
|
|
|
const openConfirm2 = function() {
|
|
layer.confirm("你如何看待 layui-vue 的发布",
|
|
{btn:
|
|
[
|
|
{text:'站着看', callback: function(id){layer.close(id);}},
|
|
{text:'坐着看', callback: function(id){layer.close(id);}}
|
|
]
|
|
})
|
|
}
|
|
</script>
|
|
|
|
:::
|
|
|
|
<fieldset class="layui-elem-field layui-field-title">
|
|
<legend>加载</legend>
|
|
</fieldset>
|
|
|
|
::: demo 通过 layer.load(type, options) 创建加载层, 第一个参数`type`为加载动画样式, 第二个参数`options`为可选配置, 常用于设置`time`加载时长`shade`遮盖层等。
|
|
|
|
<template>
|
|
<button @click="load1">加载1</button>
|
|
<button @click="load2">加载2</button>
|
|
<button @click="load3">加载3</button>
|
|
<button @click="load4">加载4</button>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { layer } from "../../../../layer/src/index"
|
|
|
|
const load1 = function() {
|
|
layer.load(0, {time: 2000})
|
|
}
|
|
|
|
const load2 = function() {
|
|
layer.load(1, {time: 2000})
|
|
}
|
|
|
|
const load3 = function() {
|
|
layer.load(2, {time: 2000})
|
|
}
|
|
|
|
const load4 = function() {
|
|
layer.msg("加载中...",{icon: 16, time: 2000})
|
|
}
|
|
</script>
|
|
|
|
:::
|
|
|
|
<fieldset class="layui-elem-field layui-field-title">
|
|
<legend>模态</legend>
|
|
</fieldset>
|
|
|
|
::: demo 通过 layer.open(option) 创建模态窗, 目前支持`iframe` `page`等类型, 你可以使用`options`选项开启`Resize` `Offset`等更多特性。
|
|
|
|
<template>
|
|
<lay-row :space="30" >
|
|
<lay-col :span="24">
|
|
<button @click="open">小试牛刀</button>
|
|
<button @click="openSize">指定尺寸</button>
|
|
<button @click="openOffset">指定位置</button>
|
|
<button @click="openIframe">远程窗体</button>
|
|
<button @click="openHtml">代码片段</button>
|
|
</lay-col>
|
|
<lay-col :span="24">
|
|
<button @click="openVNode">虚拟节点</button>
|
|
<button @click="openMaxmin">缩小放大</button>
|
|
<button @click="openResize">尺寸拉伸</button>
|
|
<button @click="openIndex">设置层级</button>
|
|
<button @click="openAreaAuto">内容适应</button>
|
|
<button @click="openAreaAuto2">内容适应2</button>
|
|
</lay-col>
|
|
</lay-row>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { layer } from "../../../../layer/src/index"
|
|
|
|
const open = function() {
|
|
layer.open({
|
|
type: 1,
|
|
title: "标题",
|
|
content: "内容"
|
|
})
|
|
}
|
|
|
|
const openSize = function() {
|
|
layer.open({
|
|
type: 1,
|
|
title: "标题",
|
|
area: ['400px','400px'],
|
|
content: "内容"
|
|
})
|
|
}
|
|
|
|
const openOffset = function() {
|
|
layer.open({
|
|
type: 1,
|
|
title: "标题",
|
|
offset: ['100px','100px'],
|
|
content: "内容"
|
|
})
|
|
}
|
|
|
|
const openIframe = function() {
|
|
layer.open({
|
|
type: 2,
|
|
title: "标题",
|
|
resize: true,
|
|
area: ['500px','500px'],
|
|
content: "http://layui-vue.pearadmin.com"
|
|
})
|
|
}
|
|
|
|
const openHtml = function() {
|
|
layer.open({
|
|
type: 1,
|
|
title: "标题",
|
|
isHtmlFragment: true,
|
|
content: "<p style='color:red;'>内容</p>"
|
|
})
|
|
}
|
|
|
|
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:"<img src='https://chixian.oss-cn-hangzhou.aliyuncs.com/20210819230007_346ce.jpeg'/>"
|
|
})
|
|
}
|
|
|
|
const openAreaAuto2 = function(){
|
|
layer.open({
|
|
type:1,
|
|
title:"area:auto",
|
|
offset:['10px','50%'],
|
|
isHtmlFragment:true,
|
|
content:"<img src='https://chixian.oss-cn-hangzhou.aliyuncs.com/20210819230007_346ce.jpeg'/>"
|
|
})
|
|
}
|
|
</script>
|
|
|
|
:::
|
|
|
|
<fieldset class="layui-elem-field layui-field-title">
|
|
<legend>抽屉</legend>
|
|
</fieldset>
|
|
|
|
::: demo 通过 layer.drawer(options) 创建抽屉层, `options`选项配置, 抽屉本质上是一个特殊的模态窗, 你可以使用`offset`选项来设置方向。
|
|
<template>
|
|
<button @click="openTop">上</button>
|
|
<button @click="openBottom">下</button>
|
|
<button @click="openLeft">左</button>
|
|
<button @click="openRight">右</button>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { layer } from "../../../../layer/src/index"
|
|
|
|
const openTop = function() {
|
|
layer.drawer({
|
|
title: "标题",
|
|
content: "内容",
|
|
offset: "t"
|
|
})
|
|
}
|
|
|
|
const openBottom = function() {
|
|
layer.drawer({
|
|
title: "标题",
|
|
content: "内容",
|
|
offset: "b"
|
|
})
|
|
}
|
|
|
|
const openLeft = function() {
|
|
layer.drawer({
|
|
title: "标题",
|
|
content: "内容",
|
|
offset: "l"
|
|
})
|
|
}
|
|
|
|
const openRight = function() {
|
|
layer.drawer({
|
|
title: "标题",
|
|
content: "内容",
|
|
offset: "r"
|
|
})
|
|
}
|
|
</script>
|
|
:::
|
|
|
|
<fieldset class="layui-elem-field layui-field-title">
|
|
<legend>图片</legend>
|
|
</fieldset>
|
|
|
|
::: demo 通过 layer.photos(options) 创建图片预览弹层, 参数`options`主要传入预览的图片链接。
|
|
|
|
<template>
|
|
<button @click="signleImg">图片查看</button>
|
|
<button @click="signleImg2">图片标题</button>
|
|
<button @click="groupImg">图片分组</button>
|
|
</template>
|
|
|
|
<script>
|
|
import { layer } from "../../../../layer/src/index"
|
|
|
|
const signleImg = function() {
|
|
layer.photos("/src/assets/logo.jpg")
|
|
}
|
|
const signleImg2 = function() {
|
|
layer.photos({
|
|
imgList:[{src:'/src/assets/logo.jpg',alt:'layer for vue'}]
|
|
})
|
|
}
|
|
const groupImg = function() {
|
|
layer.photos({
|
|
imgList:[
|
|
{ src:'http://www.pearadmin.com/assets/images/un8.svg', alt:'图片1'},
|
|
{ src:'http://www.pearadmin.com/assets/images/un32.svg', alt:'图片2'}
|
|
]
|
|
})
|
|
}
|
|
</script>
|
|
|
|
:::
|
|
|
|
<fieldset class="layui-elem-field layui-field-title">
|
|
<legend>销毁</legend>
|
|
</fieldset>
|
|
|
|
::: demo 我们提供 layer.close(id) 与 layer.closeAll() 函数实现弹出层的主动销毁。
|
|
|
|
<template>
|
|
<button @click="open">打开</button>
|
|
<button @click="close">销毁</button>
|
|
<button @click="closeAll">销毁全部</button>
|
|
</template>
|
|
|
|
<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>
|
|
:::
|
|
|
|
<fieldset class="layui-elem-field layui-field-title">
|
|
<legend>通讯</legend>
|
|
</fieldset>
|
|
|
|
::: demo 👉 查看 [Children1.vue](https://gitee.com/layui-vue/layer-vue/blob/master/example/src/components/Children1.vue), 通过 h() 函数的第二个参数向 Children1.vue 传递响应式变量。
|
|
|
|
<template>
|
|
<button @click="openComponent1">数据</button>
|
|
<input type="text" v-model="data.remark" />
|
|
</template>
|
|
|
|
<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](https://gitee.com/layui-vue/layer-vue/blob/master/example/src/components/Children2.vue), 通过 h() 函数的第二个参数声明 onXxx() 形式的函数完成 Children2.vue 的事件监听。
|
|
|
|
<template>
|
|
<button @click="openComponent2">事件</button>
|
|
<input type="text" v-model="numb" />
|
|
</template>
|
|
|
|
<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>
|
|
|
|
:::
|