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-down | 顶部往下滑入 | `layui-anim layui-anim-down` |
| layui-anim-downbit | 微微往下滑入 | `layui-anim layui-anim-downbit` | | layui-anim-downbit | 微微往下滑入 | `layui-anim layui-anim-downbit` |

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

@ -1,3 +1,6 @@
::: field 基础使用
:::
::: demo ::: demo
<template> <template>
@ -21,6 +24,9 @@ export default {
::: :::
::: field 圆角头像
:::
::: demo ::: demo
<template> <template>
@ -45,6 +51,9 @@ export default {
::: :::
::: field 尺寸大小
:::
::: demo ::: demo
<template> <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 ::: demo
<template> <template>
@ -18,6 +21,9 @@ export default {
::: :::
::: field 灰色主题
:::
::: demo ::: demo
<template> <template>
@ -41,10 +47,9 @@ export default {
::: :::
::: field block attributes ::: field Block 属性
::: :::
| | | | | Name | Description | Accepted Values |
| ----- | ------ | -------------- | | ----- | ------ | -------------- |
| nm | 灰色样式 | -- | | 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 | 分割符 | `/` | | separator | 分割符 | `/` |
::: field breadcrumb slots ::: field 面包屑插槽
::: :::
| | | | | Name | Description | Accepted Values |
| --------- | ------ | --- | | --------- | ------ | --- |
| default | 默认插槽 | `--` | | default | 默认插槽 | `--` |

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,3 +1,6 @@
::: field 基础使用
:::
::: demo ::: demo
<template> <template>
@ -18,6 +21,9 @@ export default {
::: :::
::: field 图标颜色
:::
::: demo ::: demo
<template> <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 ::: demo
@ -1073,6 +1104,9 @@ export default {
::: :::
::: field 图标属性
:::
| Name | Description | Default Value | | Name | Description | Default Value |
| ---- | ---- | ----------------- | | ---- | ---- | ----------------- |
| type | 图标 | `layui-icon-home` | | type | 图标 | `layui-icon-home` |

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

@ -1,3 +1,6 @@
::: field 基础使用
:::
::: demo ::: demo
<template> <template>
@ -20,6 +23,9 @@ export default {
::: :::
::: field 默认选择
:::
::: demo ::: demo
<template> <template>
@ -42,6 +48,9 @@ export default {
::: :::
::: field 开启分页
:::
::: demo ::: demo
<template> <template>
@ -64,6 +73,9 @@ export default {
::: :::
::: field 开启搜索
:::
::: demo ::: demo
<template> <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> <br>
::: field 基础使用
:::
```html ```html
<lay-layout> <lay-layout>
<lay-header> <lay-header>
@ -25,8 +28,7 @@
</lay-layout> </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` | | theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` |

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

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

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

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

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

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

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

@ -1,3 +1,6 @@
::: field 基础使用
:::
::: demo ::: demo
<template> <template>
@ -20,6 +23,9 @@ export default {
::: :::
::: field 尺寸大小
:::
::: demo ::: demo
<template> <template>
@ -44,6 +50,9 @@ export default {
::: :::
::: field 显示文字
:::
::: demo ::: demo
<template> <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 ::: demo
<template> <template>
@ -18,6 +21,9 @@ export default {
::: :::
::: field 响应结果
:::
::: demo ::: demo
<template> <template>
@ -41,6 +47,9 @@ export default {
::: :::
::: field 指定长度
:::
::: demo ::: demo
<template> <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 ::: demo
<template> <template>
@ -24,6 +27,9 @@ export default {
::: :::
::: field 简约模式
:::
::: demo ::: demo
<template> <template>
@ -50,6 +56,9 @@ export default {
::: :::
::: field 卡片模式
:::
::: demo ::: demo
<template> <template>
@ -76,6 +85,9 @@ export default {
::: :::
::: field 允许关闭
:::
::: demo ::: demo
<template> <template>
@ -114,13 +126,14 @@ export default {
::: :::
::: field 嵌套循环
:::
::: demo ::: demo
<template> <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"> <lay-tab-item v-for="a in arr" :key="a" :title="a.title" :id="a.id">
{{a}}
</lay-tab-item> </lay-tab-item>
</lay-tab> </lay-tab>
</template> </template>
@ -132,11 +145,16 @@ export default {
setup() { setup() {
const current5 = ref('1') const current5 = ref('1')
const change5 = function(id){
alert(id)
}
const arr = [ const arr = ref([
{id:'1', title:'选项一'}, {id:'1', title:'选项一'},
{id:'2', title:'选项二'} {id:'2', title:'选项二'}
] ])
arr.value.push({id:'3', title:'选项三'})
return { return {
current5, current5,
@ -148,7 +166,7 @@ export default {
::: :::
::: field tab attributes ::: field tab 属性
::: :::
@ -158,7 +176,7 @@ export default {
| type | 主题样式 | -- | | type | 主题样式 | -- |
| allow-close | 允许关闭 | `true` `false` | | 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 ::: demo
<template> <template>
@ -41,6 +44,9 @@ export default {
::: :::
::: field 简单模式
:::
::: demo ::: demo
<template> <template>

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

@ -1,3 +1,6 @@
::: field 基础使用
:::
::: demo ::: demo
<template> <template>
@ -21,6 +24,9 @@ export default {
::: :::
::: field 指定标题
:::
::: demo ::: demo
<template> <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> <br>
使用 npm 下载 - 使用 npm 下载
``` ```
npm install @layui/layui-vue --save npm install @layui/layui-vue --save
``` ```
在 main.ts 中 <br>
- 在 main.ts 中
```js ```js
import App from './App.vue' import App from './App.vue'
@ -20,7 +22,9 @@ import '@layui/layui-vue/lib/layui.css'
createApp(App).use(Layui).mount('#app') createApp(App).use(Layui).mount('#app')
``` ```
这是一个基本的入门页面： <br>
- 在 index.vue 使用：
```html ```html
<lay-layout> <lay-layout>
@ -35,4 +39,4 @@ createApp(App).use(Layui).mount('#app')
</lay-layout> </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 ::: demo
<template> <template>
{{tabs}}
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" :tree="isTree"> <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" :tree="isTree">
<lay-menu-item title="工作空间" id="0"> <lay-menu-item title="工作空间" id="0">
<lay-menu-child-item id="1" title="控制台"> <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) { if (token.nesting === 1) {
return `<lay-field title="${ return `<lay-field title="${
info || defaultTitle info || defaultTitle
}" style="margin-top:10px;margin-bottom: 10px;">` }" style="margin-top:20px;margin-bottom: 20px;">`
} else { } else {
return '</lay-field>\n' return '</lay-field>\n'
} }