📝(layer): 重构文档
This commit is contained in:
就眠儀式
parent
4a52df1f28
commit
34e352b25c
@ -21,6 +21,6 @@
|
||||
<div id="app">
|
||||
<!--app-html-->
|
||||
</div>
|
||||
<script type="module" src="./entry-client.ts"></script>
|
||||
<script type="module" src="./src/entry-client.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,49 +1,19 @@
|
||||
<template>
|
||||
<div class="lay-code">
|
||||
<div id="source" class="source">
|
||||
<slot />
|
||||
<slot ></slot>
|
||||
<div v-if="$slots.description" class="description">
|
||||
<slot name="description" />
|
||||
<slot name="description" ></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="meta" class="meta">
|
||||
<div class="language-html">
|
||||
<slot name="code" />
|
||||
<slot name="code" ></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="{ 'is-fixed': isFixContorl }" class="control">
|
||||
<i class="layui-icon layui-icon-file btn" @click="copy"
|
||||
><svg
|
||||
t="1646244236057"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="5505"
|
||||
width="18"
|
||||
height="18"
|
||||
>
|
||||
<path
|
||||
d="M768 682.666667V170.666667a85.333333 85.333333 0 0 0-85.333333-85.333334H170.666667a85.333333 85.333333 0 0 0-85.333334 85.333334v512a85.333333 85.333333 0 0 0 85.333334 85.333333h512a85.333333 85.333333 0 0 0 85.333333-85.333333zM170.666667 170.666667h512v512H170.666667z m682.666666 85.333333v512a85.333333 85.333333 0 0 1-85.333333 85.333333H256a85.333333 85.333333 0 0 0 85.333333 85.333334h426.666667a170.666667 170.666667 0 0 0 170.666667-170.666667V341.333333a85.333333 85.333333 0 0 0-85.333334-85.333333z"
|
||||
p-id="5506"
|
||||
></path></svg
|
||||
></i>
|
||||
<i class="layui-icon layui-icon-fonts-code btn" @click="toggle"
|
||||
><svg
|
||||
t="1646244296040"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="7127"
|
||||
width="18"
|
||||
height="18"
|
||||
>
|
||||
<path
|
||||
d="M217.301333 414.933333a21.333333 21.333333 0 0 1-1.066666-30.165333l29.098666-31.232a21.333333 21.333333 0 0 1 30.165334-1.024l236.117333 220.16 236.16-220.16a21.333333 21.333333 0 0 1 30.122667 1.024l29.098666 31.232a21.333333 21.333333 0 0 1-1.024 30.165333L541.738667 661.333333l-13.44 14.421334a21.290667 21.290667 0 0 1-16.725334 6.741333 21.290667 21.290667 0 0 1-16.64-6.741333l-13.44-14.506667z"
|
||||
p-id="7128"
|
||||
></path></svg
|
||||
></i>
|
||||
<i class="layui-icon layui-icon-file btn" @click="copy"></i>
|
||||
<i class="layui-icon layui-icon-fonts-code btn" @click="toggle"></i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
406
package/document-layer/src/document/zh-CN/demo.md
Normal file
406
package/document-layer/src/document/zh-CN/demo.md
Normal file
@ -0,0 +1,406 @@
|
||||
<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>
|
||||
</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'/>"
|
||||
})
|
||||
}
|
||||
</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>
|
||||
|
||||
:::
|
||||
0
package/document-layer/src/document/zh-CN/help.md
Normal file
0
package/document-layer/src/document/zh-CN/help.md
Normal file
@ -69,445 +69,6 @@ const changeVisible = () => {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
<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.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>
|
||||
<button @click="open">小试牛刀</button>
|
||||
<button @click="openSize">指定尺寸</button>
|
||||
<button @click="openOffset">指定位置</button>
|
||||
<button @click="openIframe">远程窗体</button>
|
||||
<button @click="openHtml">HTML</button>
|
||||
<button @click="openVNode">vNode</button>
|
||||
<button @click="openMaxmin">缩小放大</button>
|
||||
<button @click="openResize">尺寸拉伸</button>
|
||||
<button @click="openIndex">设置层级</button>
|
||||
<button @click="openAreaAuto">内容自撑开</button>
|
||||
<button @click="openBtns">自定义按钮组</button>
|
||||
</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: 666,
|
||||
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 openBtns = function(){
|
||||
layer.open({
|
||||
type:1,
|
||||
title:"自定义按钮",
|
||||
btn:[{text:"第一个按钮",callback:function(){
|
||||
console.log("第一个按钮被点击");
|
||||
}},{text:"第二个按钮",callback:function(){
|
||||
console.log("第二个按钮被点击");
|
||||
}}]
|
||||
})
|
||||
}
|
||||
</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(){
|
||||
layer.msg("有点意思");
|
||||
}},{text:'坐着看', callback: function(){
|
||||
layer.msg("无聊");
|
||||
}}]})
|
||||
}
|
||||
</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 👉 查看 [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 } 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>
|
||||
|
||||
:::
|
||||
|
||||
<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 我们提供了一些核心函数来创建弹出层, 但在一些复杂的应用场景中, `lay-layer`是一个更好的选择。
|
||||
|
||||
<template>
|
||||
<button @click="changeVisible">{{ visible ? '隐藏':'显示' }}</button>
|
||||
<lay-layer title="标题" v-model="visible" :area="['300px','300px']">
|
||||
content
|
||||
</lay-layer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, h } from 'vue'
|
||||
import { layer } from "../../../../layer/src/index"
|
||||
|
||||
const visible = ref(false)
|
||||
const changeVisible = () => {
|
||||
visible.value = !visible.value;
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>选项</legend>
|
||||
</fieldset>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<template>
|
||||
<lay-scroll height="100%">
|
||||
<div class="markdown-body light-scheme">
|
||||
<div class="alone-header">
|
||||
<img class="alone-logo" src="../assets/logo.png" />
|
||||
@ -28,20 +29,34 @@
|
||||
<div class="layui-main">
|
||||
<img src="../assets/logo.jpg" />
|
||||
<h1>layer vue</h1>
|
||||
<p>首 选 的 弹 出 层 解 决 方 案 ⭐</p>
|
||||
<p>首 选 的 函 数 式 弹 出 层 解 决 方 案 ⭐</p>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="layui-container" style="width: 80%; margin-left: 10%">
|
||||
<lay-tab type="brief" v-model="active">
|
||||
<lay-tab-item title="入门" id="/zh-CN/index"></lay-tab-item>
|
||||
<lay-tab-item title="示例" id="/zh-CN/demo"></lay-tab-item>
|
||||
<lay-tab-item title="帮助" id="/zh-CN/help"></lay-tab-item>
|
||||
</lay-tab>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</lay-scroll>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import config from "../../../layer/package.json";
|
||||
import { useRouter } from "vue-router";
|
||||
import { ref, watch } from "vue";
|
||||
|
||||
const version = config.version;
|
||||
|
||||
const active = ref("/zh-CN/index");
|
||||
const router = useRouter();
|
||||
|
||||
watch(active, (val) => {
|
||||
router.push(val);
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@ -116,4 +131,8 @@ body {
|
||||
border-top: 1px solid #eee;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.layui-tab-content {
|
||||
padding: 0!important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
import Layout from "./App.vue";
|
||||
import { App, createApp as _createApp } from "vue";
|
||||
import { createRouter } from "./src/router/index";
|
||||
import { createRouter } from "./router/index";
|
||||
import { Router } from "vue-router";
|
||||
import LayCode from "./src/components/LayCode.vue";
|
||||
import Children1 from "./src/components/Children1.vue";
|
||||
import Children2 from "./src/components/Children2.vue";
|
||||
import layer from "../layer/src/index";
|
||||
import "./src/assets/css/index.css";
|
||||
import LayCode from "./components/LayCode.vue";
|
||||
import Children1 from "./components/Children1.vue";
|
||||
import Children2 from "./components/Children2.vue";
|
||||
import layui from "../../component/src/index";
|
||||
import layer from "../../layer/src/index";
|
||||
import "./assets/css/index.css";
|
||||
|
||||
export function createApp(): {
|
||||
app: App<Element>;
|
||||
@ -16,6 +17,7 @@ export function createApp(): {
|
||||
const router = createRouter();
|
||||
|
||||
app
|
||||
.use(layui)
|
||||
.use(layer)
|
||||
.use(router)
|
||||
.component("LayCode", LayCode)
|
||||
@ -10,8 +10,17 @@ const zhCN = [
|
||||
{
|
||||
path: "/zh-CN/index",
|
||||
component: () => import("../document/zh-CN/index.md"),
|
||||
|
||||
meta: { title: "指南" },
|
||||
meta: { title: "入门" },
|
||||
},
|
||||
{
|
||||
path: "/zh-CN/demo",
|
||||
component: () => import("../document/zh-CN/demo.md"),
|
||||
meta: { title: "示例" },
|
||||
},
|
||||
{
|
||||
path: "/zh-CN/help",
|
||||
component: () => import("../document/zh-CN/help.md"),
|
||||
meta: { title: "帮助" },
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
19
package/document-layer/tsconfig.json
Normal file
19
package/document-layer/tsconfig.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"module": "esnext",
|
||||
"target": "es2015",
|
||||
"moduleResolution": "Node",
|
||||
"strict": true,
|
||||
"allowJs": true,
|
||||
"resolveJsonModule": true,
|
||||
"declaration": true,
|
||||
"emitDeclarationOnly": true,
|
||||
"esModuleInterop": true,
|
||||
"declarationDir": "types",
|
||||
"jsx": "preserve",
|
||||
"lib": ["ESNext","DOM"]
|
||||
},
|
||||
"include": ["src/**/*","shims-vue.d.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
@ -166,18 +166,15 @@ const firstOpenDelayCalculation = function () {
|
||||
}
|
||||
if (type == 5) {
|
||||
// @ts-ignore
|
||||
area.value = await calculatePhotosArea(
|
||||
props.imgList[props.startIndex].src,
|
||||
props
|
||||
);
|
||||
area.value = await calculatePhotosArea(props.imgList[props.startIndex].src, props);
|
||||
}
|
||||
offset.value = calculateOffset(props.offset, area.value, props.type);
|
||||
w.value = area.value[0];
|
||||
h.value = area.value[1];
|
||||
t.value = offset.value[0];
|
||||
l.value = offset.value[1];
|
||||
_w.value = area.value[0];
|
||||
_l.value = area.value[1];
|
||||
t.value = offset.value[0];
|
||||
l.value = offset.value[1];
|
||||
_t.value = offset.value[0];
|
||||
_l.value = offset.value[1];
|
||||
supportMove();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user