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

document: 更新文档

Browse Source
This commit is contained in:
就眠仪式 2021-10-19 22:28:44 +08:00
parent ba784a3dff
commit 4e3fc29d85
28 changed files with 275 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/docs/zh-CN/components/animation.md
View File

@ -68,11 +68,11 @@ export default {
:::
::: field animation class
::: field 动画类名
:::
| | | |
| Name | Description | Accepted Values |
| --------------------------------- | ------------ | ---------------------------------------------- |
| layui-anim-down | 顶部往下滑入 | `layui-anim layui-anim-down` |
| layui-anim-downbit | 微微往下滑入 | `layui-anim layui-anim-downbit` |

12
docs/docs/zh-CN/components/avatar.md
View File

@ -1,3 +1,6 @@
::: field 基础使用
:::
::: demo
<template>
@ -21,6 +24,9 @@ export default {
:::
::: field 圆角头像
:::
::: demo
<template>
@ -45,6 +51,9 @@ export default {
:::
::: field 尺寸大小
:::
::: demo
<template>
@ -71,8 +80,7 @@ export default {
:::
::: field avatar attributes
::: 头像属性
:::
| | | |

2
docs/docs/zh-CN/components/badge.md
View File

@ -33,7 +33,7 @@ export default {
:::
::: field badge attributes
::: field 徽章属性
:::

11
docs/docs/zh-CN/components/block.md
View File

@ -1,3 +1,6 @@
::: field 基础使用
:::
::: demo
<template>
@ -18,6 +21,9 @@ export default {
:::
::: field 灰色主题
:::
::: demo
<template>
@ -41,10 +47,9 @@ export default {
:::
::: field block attributes
::: field Block 属性
:::
| | | |
| Name | Description | Accepted Values |
| ----- | ------ | -------------- |
| nm | 灰色样式 | -- |

10
docs/docs/zh-CN/components/breadcrumb.md
View File

@ -70,18 +70,16 @@ export default {
:::
::: field breadcrumb attributes
::: field 面包屑属性
:::
| | | |
| Name | Description | Accepted Values |
| --------- | ------ | --- |
| separator | 分割符 | `/` |
::: field breadcrumb slots
::: field 面包屑插槽
:::
| | | |
| Name | Description | Accepted Values |
| --------- | ------ | --- |
| default | 默认插槽 | `--` |

50
docs/docs/zh-CN/components/button.md
View File

@ -1,4 +1,7 @@
::: demo 传入 columns 数据，自动生成表格
::: field 基础使用
:::
::: demo 使用 lay-button 标签, 创建一个按钮
<template>
<lay-button type="primary">原始按钮</lay-button>
@ -23,7 +26,10 @@ export default {
:::
::: demo 传入 columns 数据，自动生成表格
::: field 简约按钮
:::
::: demo 使用 border 属性设置 主要按钮 边框主题
<template>
<lay-button type="primary">原始按钮</lay-button>
@ -48,7 +54,10 @@ export default {
:::
::: demo 传入 columns 数据，自动生成表格
::: field 按钮尺寸
:::
::: demo 传入 size 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs`
<template>
<lay-button type="primary" size="lg">原始按钮</lay-button>
@ -73,7 +82,10 @@ export default {
:::
::: demo 传入 columns 数据，自动生成表格
::: field 流式按钮
:::
::: demo 传入 fluid 属性, 创建最大化按钮
<template>
<lay-button type="primary" fluid>最大化按钮</lay-button>
@ -96,7 +108,10 @@ export default {
:::
::: demo 传入 columns 数据，自动生成表格
::: field 圆角按钮
:::
::: demo 传入 radius 属性，创建圆角按钮
<template>
<lay-button type="primary" radius>原始按钮</lay-button>
@ -121,7 +136,10 @@ export default {
:::
::: demo 传入 columns 数据，自动生成表格
::: field 按钮分组
:::
::: demo 使用 lay-button-group 标签, 创建一个按钮组
<template>
<div>
@ -152,7 +170,10 @@ export default {
:::
::: demo 传入 columns 数据，自动生成表格
::: field 图标按钮
:::
::: demo 结合 lay-icon 组件, 创建图标按钮
<template>
<lay-button-container>
@ -175,7 +196,10 @@ export default {
:::
::: demo 传入 columns 数据，自动生成表格
::: field 按钮容器
:::
::: demo 使用 lay-button-container 标签, 创建一个按钮容器
<template>
<lay-button-container>
@ -199,7 +223,10 @@ export default {
:::
::: demo 传入 columns 数据，自动生成表格
::: field 加载按钮
:::
::: demo 传入 loading 属性, 控制按钮的加载状态
<template>
<lay-button-container>
@ -225,10 +252,13 @@ export default {
:::
::: field 按钮属性
:::
| Name | Description | Accepted Values |
| ------ | ------ | --------------------------------------------- |
| type | 主题 | `primary` `normal` `warm` `danger` `disabled` |
| size | 尺寸 | `lg` `sm` `xs` |
| fluid | 最大化 | `true` `false` |
| radius | 圆角 | `true` `false` |
| border | 边框 | `green` `blue` `orange` `red` `black` |
| border | 边框 | `green` `blue` `orange` `red` `black` |

15
docs/docs/zh-CN/components/cards.md
View File

@ -1,3 +1,6 @@
::: field 基础使用
:::
::: demo
<template>
@ -28,6 +31,9 @@ export default {
</style>
:::
::: field 卡片插槽
:::
::: demo
<template>
@ -63,6 +69,9 @@ export default {
</style>
:::
::: field 简单使用
:::
::: demo
<template>
@ -94,16 +103,14 @@ export default {
:::
::: field card attributes
::: field 卡片属性
:::
| | | |
| ------ | ---- | ------ |
| title | 标题 | -- |
::: field card slots
::: field 卡片插槽
:::
| | | |

7
docs/docs/zh-CN/components/collapse.md
View File

@ -1,3 +1,6 @@
::: field 基础使用
:::
::: demo
<template>
@ -30,7 +33,7 @@ export default {
:::
| | | |
| Name | Description | Accepted Values |
| ----- | ------ | -------------- |
| openKeys | 打开的目录 | `array` |
@ -38,7 +41,7 @@ export default {
:::
| | | |
| Name | Description | Accepted Values |
| ----- | ------ | -------------- |
| id | 编号 | -- |
| title | 标题 | -- |

11
docs/docs/zh-CN/components/container.md
View File

@ -1,3 +1,6 @@
::: field 普通容器
:::
::: demo
<template>
@ -29,6 +32,9 @@ export default {
:::
::: field 流式容器
:::
::: demo
<template>
@ -59,10 +65,9 @@ export default {
:::
::: field container attributes
::: field 容器属性
:::
| | | |
| Name | Description | Accepted Values |
| ----- | ------ | -------------- |
| fluid | 流模式 | `true` `false` |

11
docs/docs/zh-CN/components/dropdown.md
View File

@ -1,3 +1,6 @@
::: field 基础使用
:::
::: demo
<template>
@ -25,6 +28,9 @@ export default {
:::
::: field 触发方式
:::
::: demo
<template>
@ -61,10 +67,9 @@ export default {
:::
::: field dropdown attributes
::: field Dropdown 属性
:::
| | | |
| Name | Description | Accepted Values |
| ------- | -------- | --------------- |
| trigger | 触发方式 | `click` `hover` |

10
docs/docs/zh-CN/components/empty.md
View File

@ -1,3 +1,6 @@
::: field 基础使用
:::
::: demo
<template>
@ -18,6 +21,9 @@ export default {
:::
::: field 指定描述
:::
::: demo
<template>
@ -38,10 +44,10 @@ export default {
:::
::: field empty attributes
::: field empty 属性
:::
| | | |
| Name | Description | Accepted Values |
| ----------- | -------- | --- |
| description | 描述信息 | -- |

4
docs/docs/zh-CN/components/field.md
View File

@ -1,3 +1,4 @@
::: demo
<template>
@ -59,9 +60,8 @@ export default {
:::
::: field field attributes
:::
| | | |
| Name | Description | Accepted Values |
| ----- | ---- | --- |
| title | 标题 | -- |

20
docs/docs/zh-CN/components/grid.md
View File

@ -1,3 +1,6 @@
::: field 基础使用
:::
::: demo
<template>
@ -38,6 +41,9 @@ export default {
:::
::: field 栅格偏移
:::
::: demo
<template>
@ -74,6 +80,9 @@ export default {
:::
::: field 栅格适应
:::
::: demo
<template>
@ -96,6 +105,9 @@ export default {
:::
::: field 流式布局
:::
::: demo
<template>
@ -124,19 +136,19 @@ export default {
:::
::: field row attributes
::: field 行属性
:::
| | | |
| Name | Description | Accepted Values |
| -------- | ---- | ----------------------- |
| space | 间隔 | -- |
::: field col attributes
::: field 列属性
:::
| | | | |
| Name | Description | Description Info | Accepted Values |
| -------- | ---- | ----------------------- | --- |
| xs | 尺寸 | 超小屏幕 (手机<768px) | 12 |
| sm | 尺寸 | 小屏幕 (平板 ≥768px) | 12 |

34
docs/docs/zh-CN/components/icon.md
View File

@ -1,3 +1,6 @@
::: field 基础使用
:::
::: demo
<template>
@ -18,6 +21,9 @@ export default {
:::
::: field 图标颜色
:::
::: demo
<template>
@ -43,6 +49,31 @@ export default {
:::
::: field 图标尺寸
:::
::: demo
<template>
<lay-icon type="layui-icon-star" size="26px" color="red"></lay-icon>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::
::: field 图标列表
:::
::: demo
@ -1073,6 +1104,9 @@ export default {
:::
::: field 图标属性
:::
| Name | Description | Default Value |
| ---- | ---- | ----------------- |
| type | 图标 | `layui-icon-home` |

15
docs/docs/zh-CN/components/iconPicker.md
View File

@ -1,3 +1,6 @@
::: field 基础使用
:::
::: demo
<template>
@ -20,6 +23,9 @@ export default {
:::
::: field 默认选择
:::
::: demo
<template>
@ -42,6 +48,9 @@ export default {
:::
::: field 开启分页
:::
::: demo
<template>
@ -64,6 +73,9 @@ export default {
:::
::: field 开启搜索
:::
::: demo
<template>
@ -86,8 +98,7 @@ export default {
:::
::: field icon-picker attributes
::: field icon-picker 属性
:::
| | | |

6
docs/docs/zh-CN/components/layout.md
View File

@ -12,6 +12,9 @@
<br>
::: field 基础使用
:::
```html
<lay-layout>
<lay-header>
@ -25,8 +28,7 @@
</lay-layout>
```
::: field layout components
::: field 布局组件
:::
| | | |

4
docs/docs/zh-CN/components/line.md
View File

@ -31,10 +31,10 @@ export default {
:::
::: field line attributes
::: field 分割属性
:::
| | | |
| Name | Description | Accepted Values |
| ----- | ---- | --------------------------------------------- |
| theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` |

18
docs/docs/zh-CN/components/menu.md
View File

@ -1,3 +1,6 @@
::: field 基础使用
:::
::: demo
<template>
@ -31,11 +34,12 @@ export default {
:::
::: field 垂直导航
:::
::: demo
<template>
选中项: {{selectedKey}}
打开项: {{openKeys}}
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" v-model:tree="isTree">
<lay-menu-item title="首页" id="1">
<template v-slot:title>
@ -73,19 +77,17 @@ export default {
:::
::: field menu attributes
::: field 菜单属性
:::
| | | |
| Name | Description | Accepted Values |
| --------------------- | ------ | --- |
| selectedKey (v-model) | 选中项 | -- |
| openKeys (v-model) | 打开项 | -- |
::: field menu slots
::: field 菜单插槽
:::
| | | |
| Name | Description | Accepted Values |
| ----- | -------- | --- |
| title | 菜单标题 | -- |

26
docs/docs/zh-CN/components/page.md
View File

@ -1,3 +1,6 @@
::: field 基础使用
:::
::: demo
<template>
@ -25,6 +28,9 @@ export default {
:::
::: field 简单模式
:::
::: demo
<template>
@ -50,6 +56,9 @@ export default {
:::
::: field 插槽使用
:::
::: demo
<template>
@ -78,6 +87,8 @@ export default {
:::
::: field 不同主题
:::
::: demo
@ -110,6 +121,9 @@ export default {
:::
::: field 完整分页
:::
::: demo
<template>
@ -145,6 +159,9 @@ export default {
:::
::: field 切换事件
:::
::: demo
<template>
@ -176,8 +193,7 @@ export default {
:::
::: field page attributes
::: field 分页属性
:::
| | | |
@ -190,8 +206,7 @@ export default {
| showRefresh | 显示刷新按钮 | `false` |
| showSkip | 显示跳转 | `false` |
::: field page events
::: field 分页事件
:::
| | | |
@ -199,8 +214,7 @@ export default {
| jump | 切换回调 | { current: 当前页面 } |
::: field page slots
::: field 分页插槽
:::
| | | |

3
docs/docs/zh-CN/components/panel.md
View File

@ -1,3 +1,6 @@
::: field 基础使用
:::
::: demo
<template>

12
docs/docs/zh-CN/components/progress.md
View File

@ -1,3 +1,6 @@
::: field 基础使用
:::
::: demo
<template>
@ -20,6 +23,9 @@ export default {
:::
::: field 尺寸大小
:::
::: demo
<template>
@ -44,6 +50,9 @@ export default {
:::
::: field 显示文字
:::
::: demo
<template>
@ -70,8 +79,7 @@ export default {
:::
::: field progress attributes
::: field Progress 属性
:::
| | | |

12
docs/docs/zh-CN/components/rate.md
View File

@ -1,3 +1,6 @@
::: field 基础使用
:::
::: demo
<template>
@ -18,6 +21,9 @@ export default {
:::
::: field 响应结果
:::
::: demo
<template>
@ -41,6 +47,9 @@ export default {
:::
::: field 指定长度
:::
::: demo
<template>
@ -66,8 +75,7 @@ export default {
:::
::: field rate attributes
::: field 评分属性
:::
| | | |

30
docs/docs/zh-CN/components/tab.md
View File

@ -1,3 +1,6 @@
::: field 基础使用
:::
::: demo
<template>
@ -24,6 +27,9 @@ export default {
:::
::: field 简约模式
:::
::: demo
<template>
@ -50,6 +56,9 @@ export default {
:::
::: field 卡片模式
:::
::: demo
<template>
@ -76,6 +85,9 @@ export default {
:::
::: field 允许关闭
:::
::: demo
<template>
@ -114,13 +126,14 @@ export default {
:::
::: field 嵌套循环
:::
::: demo
<template>
<lay-tab type="card" v-model="current5">
<lay-tab type="card" v-model="current5" @change="change5">
<lay-tab-item v-for="a in arr" :key="a" :title="a.title" :id="a.id">
{{a}}
</lay-tab-item>
</lay-tab>
</template>
@ -132,11 +145,16 @@ export default {
setup() {
const current5 = ref('1')
const change5 = function(id){
alert(id)
}
const arr = [
const arr = ref([
{id:'1', title:'选项一'},
{id:'2', title:'选项二'}
]
])
arr.value.push({id:'3', title:'选项三'})
return {
current5,
@ -148,7 +166,7 @@ export default {
:::
::: field tab attributes
::: field tab 属性
:::
@ -158,7 +176,7 @@ export default {
| type | 主题样式 | -- |
| allow-close | 允许关闭 | `true` `false` |
::: field tab events
::: field tab 事件
:::

6
docs/docs/zh-CN/components/timeline.md
View File

@ -1,3 +1,6 @@
::: field 基础使用
:::
::: demo
<template>
@ -41,6 +44,9 @@ export default {
:::
::: field 简单模式
:::
::: demo
<template>

8
docs/docs/zh-CN/components/transfer.md
View File

@ -1,3 +1,6 @@
::: field 基础使用
:::
::: demo
<template>
@ -21,6 +24,9 @@ export default {
:::
::: field 指定标题
:::
::: demo
<template>
@ -47,7 +53,7 @@ export default {
:::
::: field transfer attributes
::: field transfer 属性
:::

12
docs/docs/zh-CN/guide/getStarted.md
View File

@ -3,13 +3,15 @@
<br>
使用 npm 下载
- 使用 npm 下载
```
npm install @layui/layui-vue --save
```
在 main.ts 中
<br>
- 在 main.ts 中
```js
import App from './App.vue'
@ -20,7 +22,9 @@ import '@layui/layui-vue/lib/layui.css'
createApp(App).use(Layui).mount('#app')
```
这是一个基本的入门页面：
<br>
- 在 index.vue 使用：
```html
<lay-layout>
@ -35,4 +39,4 @@ createApp(App).use(Layui).mount('#app')
</lay-layout>
```
完整案例, 前往: [layui-vue-sample](https://gitee.com/layui-vue/layui-vue-sample)
- 前往: [layui-vue-sample](https://gitee.com/layui-vue/layui-vue-sample)

1
docs/docs/zh-CN/guide/sandbox.md
View File

@ -4,7 +4,6 @@
::: demo
<template>
{{tabs}}
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" :tree="isTree">
<lay-menu-item title="工作空间" id="0">
<lay-menu-child-item id="1" title="控制台">

2
docs/src/plugin/create-container.ts
View File

@ -23,7 +23,7 @@ export default function createContainer(
if (token.nesting === 1) {
return `<lay-field title="${
info || defaultTitle
}" style="margin-top:10px;margin-bottom: 10px;">`
}" style="margin-top:20px;margin-bottom: 20px;">`
} else {
return '</lay-field>\n'
}