theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

📝(layer): 重构文档

Browse Source
This commit is contained in:
就眠儀式 2022-06-27 17:04:24 +08:00
parent 4a52df1f28
commit 34e352b25c
13 changed files with 478 additions and 495 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package/document-layer/index.html
View File

@ -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>

0
package/document-layer/App.vue → package/document-layer/src/App.vue
View File

40
package/document-layer/src/components/LayCode.vue
View File

@ -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
View 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
View File

439
package/document-layer/src/document/zh-CN/index.md
View 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>

0
package/document-layer/entry-client.ts → package/document-layer/src/entry-client.ts
View File

0
package/document-layer/entry-server.ts → package/document-layer/src/entry-server.ts
View File

25
package/document-layer/src/layouts/Layout.vue
View File

@ -1,5 +1,6 @@
<template>
<div class="markdown-body light-scheme">
<lay-scroll height="100%">
<div class="markdown-body light-scheme">
<div class="alone-header">
<img class="alone-logo" src="../assets/logo.png" />
<a
@ -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>

16
package/document-layer/main.ts → package/document-layer/src/main.ts
View File

@ -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)
@ -23,4 +25,4 @@ export function createApp(): {
.component("Children2", Children2);
return { app, router };
}
}

15
package/document-layer/src/router/zh-CN.ts
View File

@ -10,11 +10,20 @@ 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: "帮助" },
},
],
},
];
export default zhCN;
export default zhCN;

19
package/document-layer/tsconfig.json Normal file
View 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"]
}

11
package/layer/src/component/index.vue
View File

@ -159,25 +159,22 @@ const _l: Ref<string> = ref(offset.value[1]);
* <p>
*/
const firstOpenDelayCalculation = function () {
nextTick(async () => {
nextTick( async () => {
area.value = getArea(layero.value);
if (type == 4) {
area.value = calculateDrawerArea(props.offset, props.area);
}
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();