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

📝: 更新文档

Browse Source
This commit is contained in:
就眠儀式
2022-07-06 22:24:25 +08:00
parent f3b2d137b3
commit b4e67b46c6
13 changed files with 459 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package/document-component/src/document/zh-CN/components/modal.md
View File

@@ -4,7 +4,7 @@
::: title 基本介绍
:::
::: describe 需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 Modal 在当前页面正中打开一个浮层，承载相应的操作。
::: describe 需要用户处理事务，又不希望跳转页面以致打断工作流程时，承载相应的操作。
:::
::: title 基本使用

2
package/document-component/src/document/zh-CN/components/msg.md
View File

@@ -52,7 +52,7 @@ import { layer } from "@layui/layer-vue"
export default {
setup() {
const openSuccess = function() {
layer.msg("成功消息", { icon : 1, time: 100000})
layer.msg("成功消息", { icon : 1, time: 1000})
}
const openFailure = function() {
layer.msg("失败消息", { icon : 2, time: 1000})

133
package/document-component/src/document/zh-CN/components/notifiy.md Normal file
View File

@@ -0,0 +1,133 @@
::: anchor
:::
::: title 基本介绍
:::
::: describe 全局展示通知提醒信息。
:::
::: title 基础使用
:::
::: demo
<template>
<lay-row :space="30" >
<lay-col :span="24">
<lay-button type="primary" @click="baseNotifiy">右上位置</lay-button>
<lay-button type="primary" @click="baseNotifiyRB">右下位置</lay-button>
<lay-button type="primary" @click="baseNotifiyLT">左上位置</lay-button>
<lay-button type="primary" @click="baseNotifiyLB">左下位置</lay-button>
</lay-col>
</lay-row>
</template>
<script>
import { layer } from "@layui/layer-vue"
const baseNotifiy = function() {
layer.notifiy({
title:"这是标题",
content:"默认就是右上，也是用得最多的"
})
}
const baseNotifiyRB = function() {
layer.notifiy({
title:"这是标题",
content:"我出现在右下",
offset:'rb',
})
}
const baseNotifiyLT = function() {
layer.notifiy({
title:"这是标题",
content:"我出现在左上",
offset:'lt',
})
}
const baseNotifiyLB = function() {
layer.notifiy({
title:"这是标题",
content:"我出现在左下",
offset:'lb',
})
}
</script>
:::
::: title 指定图标
:::
::: demo
<template>
<lay-row :space="30" >
<lay-col :span="24">
<lay-button type="primary" @click="NotifiySuccess">成功通知</lay-button>
<lay-button type="primary" @click="NotifiyFailure">失败通知</lay-button>
<lay-button type="primary" @click="NotifiyWarm">警告通知</lay-button>
<lay-button type="primary" @click="NotifiyInfo">锁定通知</lay-button>
</lay-col>
</lay-row>
</template>
<script>
import { layer } from "@layui/layer-vue"
const NotifiySuccess=function(){
layer.notifiy({
title:"Success",
content:"默认就是右上，也是用得最多的",
icon:1
})
}
const NotifiyFailure=function(){
layer.notifiy({
title:"Error",
content:"默认就是右上，也是用得最多的",
icon:2
})
}
const NotifiyWarm=function(){
layer.notifiy({
title:"Warming",
content:"默认就是右上，也是用得最多的",
icon:3
})
}
const NotifiyInfo=function(){
layer.notifiy({
title:"Question",
content:"默认就是右上，也是用得最多的",
icon:4
})
}
</script>
:::
::: title 组件方法
:::
```
layer.notifiy(options)
```
::: title 组件属性
:::
::: table
| 属性 | 描述 | 备注 |
| ------------------- | ------ | ----|
| options | 选配属性 | { time: 加载时长, icon: 图标 } |
:::
::: contributor msg
:::
::: previousNext msg
:::

66
package/document-component/src/document/zh-CN/components/photo.md Normal file
View File

@@ -0,0 +1,66 @@
::: anchor
:::
::: title 基本介绍
:::
::: describe 预览图片。
:::
::: title 指定图标
:::
::: demo
<template>
<lay-button @click="signleImg">图片查看</lay-button>
<lay-button @click="signleImg2">图片标题</lay-button>
<lay-button @click="groupImg">图片分组</lay-button>
</template>
<script>
import { layer } from "@layui/layui-vue"
const signleImg = function() {
layer.photos("http://www.pearadmin.com/assets/images/un1.svg")
}
const signleImg2 = function() {
layer.photos({
imgList:[{src:'http://www.pearadmin.com/assets/images/un2.svg',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>
:::
::: title 组件方法
:::
```
layer.photos(options)
```
::: title 组件属性
:::
::: table
| 属性 | 描述 | 备注 |
| ------------------- | ------ | ----|
| options | 选配属性 | { time: 加载时长, icon: 图标 } |
:::
::: contributor msg
:::
::: previousNext msg
:::

14
package/document-component/src/router/zh-CN.ts
View File

@@ -400,15 +400,25 @@ const zhCN = [
meta: { title: "页头" },
},
{
path: "/zh-CN/components/Cascader",
path: "/zh-CN/components/cascader",
component: () => import("../document/zh-CN/components/cascader.md"),
meta: { title: "级联选择器" },
},
{
path: "/zh-CN/components/Affix",
path: "/zh-CN/components/affix",
component: () => import("../document/zh-CN/components/affix.md"),
meta: { title: "锚点" },
},
{
path: "/zh-CN/components/notifiy",
component: () => import("../document/zh-CN/components/notifiy.md"),
meta: { title: "通知" },
},
{
path: "/zh-CN/components/photo",
component: () => import("../document/zh-CN/components/photo.md"),
meta: { title: "相册" },
},
],
},
],

2
package/document-component/src/view/resource.vue
View File

@@ -14,7 +14,7 @@
<li class="layui-col-sm12">
<div class="alone">
<a
href="https://gitee.com/layui/layui-vue/tree/next/package/layer"
href="http://layer.layui-vue.com/zh-CN/demo"
target="_blank"
>layer - vue<cite>通用型弹出层组件</cite></a
>

16
package/document-component/src/view/utils/menus.ts
View File

@@ -372,7 +372,7 @@ const menus = [
{
id: 100,
title: "锚点",
subTitle: "Affix",
subTitle: "affix",
path: "/zh-CN/components/affix",
},
],
@@ -383,7 +383,7 @@ const menus = [
children: [
{
id: 90,
title: "弹层",
title: "模态",
subTitle: "modal",
path: "/zh-CN/components/modal",
},
@@ -411,6 +411,18 @@ const menus = [
subTitle: "drawer",
path: "/zh-CN/components/drawer",
},
{
id: 94,
title: "通知",
subTitle: "notifiy",
path: "/zh-CN/components/notifiy",
},
{
id: 94,
title: "相册",
subTitle: "photo",
path: "/zh-CN/components/photo",
},
],
},
];