docs: 优化文档

This commit is contained in:
就眠仪式 2021-10-26 01:14:17 +08:00
parent 8d99918e56
commit 401efd527d
32 changed files with 165 additions and 160 deletions

View File

@ -50,6 +50,6 @@ export default {
::: title Block 属性 ::: title Block 属性
::: :::
| Name | Description | Accepted Values | | Name | Description | Accepted Values |
| ----- | ------ | -------------- | | ---- | ----------- | --------------- |
| nm | 灰色样式 | -- | | nm | 灰色样式 | -- |

View File

@ -1,5 +1,5 @@
::: title 基础使用 ::: title 基础使用
::: :::
::: demo ::: demo
@ -26,7 +26,7 @@ export default {
::: :::
::: title 指定分割 ::: title 指定分割
::: :::
::: demo ::: demo
@ -79,13 +79,13 @@ export default {
::: title 面包屑属性 ::: title 面包屑属性
::: :::
| Name | Description | Accepted Values | | Name | Description | Accepted Values |
| --------- | ------ | --- | | --------- | ----------- | --------------- |
| separator | 分割符 | `/` | | separator | 分割符 | `/` |
::: title 面包屑插槽 ::: title 面包屑插槽
::: :::
| Name | Description | Accepted Values | | Name | Description | Accepted Values |
| --------- | ------ | --- | | ------- | ----------- | --------------- |
| default | 默认插槽 | `--` | | default | 默认插槽 | `--` |

View File

@ -57,7 +57,7 @@ export default {
::: title 按钮尺寸 ::: title 按钮尺寸
::: :::
::: demo 传入 size 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs` ::: demo 传入 size 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs`
<template> <template>
<lay-button type="primary" size="lg">原始按钮</lay-button> <lay-button type="primary" size="lg">原始按钮</lay-button>
@ -226,7 +226,7 @@ export default {
::: title 加载按钮 ::: title 加载按钮
::: :::
::: demo 传入 loading 属性, 控制按钮的加载状态 ::: demo 传入 loading 属性, 控制按钮的加载状态
<template> <template>
<lay-button-container> <lay-button-container>
@ -255,10 +255,10 @@ export default {
::: title 按钮属性 ::: title 按钮属性
::: :::
| 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` |

View File

@ -29,6 +29,7 @@ export default {
padding: 20px; padding: 20px;
} }
</style> </style>
::: :::
::: title 卡片插槽 ::: title 卡片插槽
@ -67,6 +68,7 @@ export default {
padding: 20px; padding: 20px;
} }
</style> </style>
::: :::
::: title 简单使用 ::: title 简单使用
@ -100,20 +102,20 @@ export default {
padding: 20px; padding: 20px;
} }
</style> </style>
:::
:::
::: title 卡片属性 ::: title 卡片属性
::: :::
| | | | | | | |
| ------ | ---- | ------ | | ----- | ---- | --- |
| title | 标题 | -- | | title | 标题 | -- |
::: title 卡片插槽 ::: title 卡片插槽
::: :::
| | | | | | | |
| ------ | ---- | ------ | | ------ | -------- | --- |
| header | 头部插槽 | -- | | header | 头部插槽 | -- |
| body | 内容插槽 | -- | | body | 内容插槽 | -- |

View File

@ -28,20 +28,19 @@ export default {
::: :::
::: title Collapse attributes ::: title Collapse attributes
::: :::
| Name | Description | Accepted Values | | Name | Description | Accepted Values |
| ----- | ------ | -------------- | | -------- | ----------- | --------------- |
| openKeys | 打开的目录 | `array` | | openKeys | 打开的目录 | `array` |
::: title Collapse-item attributes ::: title Collapse-item attributes
::: :::
| Name | Description | Accepted Values | | Name | Description | Accepted Values |
| ----- | ------ | -------------- | | ----- | ----------- | --------------- |
| id | 编号 | -- | | id | 编号 | -- |
| title | 标题 | -- | | title | 标题 | -- |

View File

@ -68,6 +68,6 @@ export default {
::: title 容器属性 ::: title 容器属性
::: :::
| Name | Description | Accepted Values | | Name | Description | Accepted Values |
| ----- | ------ | -------------- | | ----- | ----------- | --------------- |
| fluid | 流模式 | `true` `false` | | fluid | 流模式 | `true` `false` |

View File

@ -70,14 +70,13 @@ export default {
::: title Dropdown 属性 ::: title Dropdown 属性
::: :::
| Name | Description | Accepted Values | | Name | Description | Accepted Values |
| ------- | -------- | --------------- | | ------- | ----------- | --------------- |
| trigger | 触发方式 | `click` `hover` | | trigger | 触发方式 | `click` `hover` |
::: title Dropdown 插槽 ::: title Dropdown 插槽
::: :::
| Name | Description | Accepted Values | | Name | Description | Accepted Values |
| ------- | -------- | --------------- | | ------- | ----------- | --------------- |
| content | 下拉内容 | -- | | content | 下拉内容 | -- |

View File

@ -48,6 +48,6 @@ export default {
::: :::
| Name | Description | Accepted Values | | Name | Description | Accepted Values |
| ----------- | -------- | --- | | ----------- | ----------- | --------------- |
| description | 描述信息 | -- | | description | 描述信息 | -- |

View File

@ -1,4 +1,3 @@
::: demo ::: demo
<template> <template>
@ -62,6 +61,6 @@ export default {
::: title field attributes ::: title field attributes
::: :::
| Name | Description | Accepted Values | | Name | Description | Accepted Values |
| ----- | ---- | --- | | ----- | ----------- | --------------- |
| title | 标题 | -- | | title | 标题 | -- |

View File

@ -45,20 +45,20 @@ export default {
::: title 表单事件 ::: title 表单事件
::: :::
| Name | Description | Accepted Values | | Name | Description | Accepted Values |
| ----- | ------ | -------------- | | ----- | ----------- | --------------- |
| model | 表单绑定值 | -- | | model | 表单绑定值 | -- |
::: title 表单事件 ::: title 表单事件
::: :::
| Name | Description | Accepted Values | | Name | Description | Accepted Values |
| ----- | ------ | -------------- | | ------ | ----------- | --------------- |
| submit | 提交事件 | -- | | submit | 提交事件 | -- |
::: title 表单项属性 ::: title 表单项属性
::: :::
| Name | Description | Accepted Values | | Name | Description | Accepted Values |
| ----- | ------ | -------------- | | ----- | ----------- | --------------- |
| label | 标题名称 | -- | | label | 标题名称 | -- |

View File

@ -140,21 +140,21 @@ export default {
::: :::
| Name | Description | Accepted Values | | Name | Description | Accepted Values |
| -------- | ---- | ----------------------- | | ----- | ----------- | --------------- |
| space | 间隔 | -- | | space | 间隔 | -- |
::: title 列属性 ::: title 列属性
::: :::
| Name | Description | Description Info | Accepted Values | | Name | Description | Description Info | Accepted Values |
| -------- | ---- | ----------------------- | --- | | -------- | ----------- | ----------------------- | --------------- |
| xs | 尺寸 | 超小屏幕 (手机<768px) | 12 | | xs | 尺寸 | 超小屏幕 (手机<768px) | 12 |
| sm | 尺寸 | 小屏幕 (平板 ≥768px) | 12 | | sm | 尺寸 | 小屏幕 (平板 ≥768px) | 12 |
| md | 尺寸 | 中等屏幕 (桌面 ≥992px) | 12 | | md | 尺寸 | 中等屏幕 (桌面 ≥992px) | 12 |
| lg | 尺寸 | 大型屏幕 (桌面 ≥1200px) | 12 | | lg | 尺寸 | 大型屏幕 (桌面 ≥1200px) | 12 |
| xsOffset | 偏移 | 超小屏幕 (手机<768px) | 12 | | xsOffset | 偏移 | 超小屏幕 (手机<768px) | 12 |
| smOffset | 偏移 | 小屏幕 (平板 ≥768px) | 12 | | smOffset | 偏移 | 小屏幕 (平板 ≥768px) | 12 |
| mdOffset | 偏移 | 中等屏幕 (桌面 ≥992px) | 12 | | mdOffset | 偏移 | 中等屏幕 (桌面 ≥992px) | 12 |
| lgOffset | 偏移 | 大型屏幕 (桌面 ≥1200px) | 12 | | lgOffset | 偏移 | 大型屏幕 (桌面 ≥1200px) | 12 |

View File

@ -1107,9 +1107,9 @@ export default {
::: title 图标属性 ::: title 图标属性
::: :::
| Name | Description | Default Value | | Name | Description | Default Value |
| ---- | ---- | ----------------- | | ------ | ----------- | ----------------- |
| type | 图标 | `layui-icon-home` | | type | 图标 | `layui-icon-home` |
| prefix | 前缀 | `layui-icon` | | prefix | 前缀 | `layui-icon` |
| color | 颜色 | -- | | color | 颜色 | -- |
| size | 尺寸 | -- | | size | 尺寸 | -- |

View File

@ -35,6 +35,6 @@ export default {
::: :::
| Name | Description | Accepted Values | | Name | Description | Accepted Values |
| ----- | ---- | --------------------------------------------- | | ----- | ----------- | --------------------------------------------- |
| theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` | | theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` |

View File

@ -80,14 +80,14 @@ export default {
::: title 菜单属性 ::: title 菜单属性
::: :::
| Name | Description | Accepted Values | | Name | Description | Accepted Values |
| --------------------- | ------ | --- | | --------------------- | ----------- | --------------- |
| selectedKey (v-model) | 选中项 | -- | | selectedKey (v-model) | 选中项 | -- |
| openKeys (v-model) | 打开项 | -- | | openKeys (v-model) | 打开项 | -- |
::: title 菜单插槽 ::: title 菜单插槽
::: :::
| Name | Description | Accepted Values | | Name | Description | Accepted Values |
| ----- | -------- | --- | | ----- | ----------- | --------------- |
| title | 菜单标题 | -- | | title | 菜单标题 | -- |

View File

@ -209,15 +209,14 @@ export default {
::: title 分页事件 ::: title 分页事件
::: :::
| | | | | | | |
| ----------- | ------------ | ------- | | ---- | -------- | --------------------- |
| jump | 切换回调 | { current: 当前页面 } | | jump | 切换回调 | { current: 当前页面 } |
::: title 分页插槽 ::: title 分页插槽
::: :::
| | | | | | | |
| ----------- | ------------ | ------- | | ---- | ------ | ------ |
| prev | 上一页 | 上一页 | | prev | 上一页 | 上一页 |
| next | 下一页 | 下一页 | | next | 下一页 | 下一页 |

View File

@ -24,6 +24,6 @@ export default {
::: title 面板插槽 ::: title 面板插槽
::: :::
| Name | Description | Accepted Values | | Name | Description | Accepted Values |
| ----- | ------ | -------------- | | ------- | ----------- | --------------- |
| default | 默认插槽 | -- | | default | 默认插槽 | -- |

View File

@ -81,4 +81,4 @@ export default {
| | | | | | | |
| ------- | -------- | --- | | ------- | -------- | --- |
| v-model | 评分值 | -- | | v-model | 评分值 | -- |
| length | 评分长度 | -- | | length | 评分长度 | -- |

View File

@ -58,29 +58,29 @@ export default {
::: title select 属性 ::: title select 属性
::: :::
| Name | Description | Accepted Values | | Name | Description | Accepted Values |
| -------- | ---- | ----------------------- | | ------- | -------------- | --------------- |
| name | 原生 name 属性 | -- | | name | 原生 name 属性 | -- |
| v-model | 选中值 | -- | | v-model | 选中值 | -- |
::: title select-option 属性 ::: title select-option 属性
::: :::
| Name | Description | Accepted Values | | Name | Description | Accepted Values |
| -------- | ---- | ----------------------- | | ----- | ----------- | --------------- |
| label | 标签 | -- | | label | 标签 | -- |
| value | 值 | -- | | value | 值 | -- |
::: title select-option 插槽 ::: title select-option 插槽
::: :::
| Name | Description | Accepted Values | | Name | Description | Accepted Values |
| -------- | ---- | ----------------------- | | ------- | ----------- | --------------- |
| default | 默认 | -- | | default | 默认 | -- |
::: title select 事件 ::: title select 事件
::: :::
| Name | Description | Accepted Values | | Name | Description | Accepted Values |
| -------- | ---- | ----------------------- | | ------ | ----------- | --------------- |
| change | 切换事件 | value | | change | 切换事件 | value |

View File

@ -116,6 +116,6 @@ export default {
| name | 原生 name 属性 | -- | | name | 原生 name 属性 | -- |
| v-model | 是否启用 | `true` `false` | | v-model | 是否启用 | `true` `false` |
| disabled | 禁用 | `true` `false` | | disabled | 禁用 | `true` `false` |
| change | 切换事件 | current : 当前值 | | change | 切换事件 | current : 当前值 |
| active-text | 启用描述 | `启动` | | active-text | 启用描述 | `启动` |
| inactive-text | 禁用描述 | `禁用` | | inactive-text | 禁用描述 | `禁用` |

View File

@ -1,5 +1,5 @@
::: title 基础使用 ::: title 基础使用
::: :::
::: demo ::: demo
@ -59,7 +59,7 @@ export default {
::: :::
::: title 不同尺寸 ::: title 不同尺寸
::: :::
::: demo ::: demo
@ -119,7 +119,7 @@ export default {
::: :::
::: title 开启分页 ::: title 开启分页
::: :::
::: demo ::: demo
@ -190,7 +190,7 @@ export default {
::: :::
::: title 完整表格 ::: title 完整表格
::: :::
::: demo ::: demo
@ -264,20 +264,20 @@ export default {
::: :::
| | | | | | | |
| --------------- | ---------- | --- | | ------------------------ | ---------- | -------------- |
| columns | 列配置 | -- | | columns | 列配置 | -- |
| dataSource | 数据源 | -- | | dataSource | 数据源 | -- |
| checkbox | 开启复现框 | -- | | checkbox | 开启复现框 | -- |
| id | 主键 | -- | | id | 主键 | -- |
| selectedKeys ( v-model ) | 选中项 | -- | | selectedKeys ( v-model ) | 选中项 | -- |
| default-toolbar | 开启工具栏 | `lg` `md` `sm` | | default-toolbar | 开启工具栏 | `lg` `md` `sm` |
| size | 尺寸 | -- | | size | 尺寸 | -- |
::: title table slots ::: title table slots
::: :::
| | | | | | | |
| --------------- | ----------- | --- | | ------- | ------------ | --- |
| toolbar | 自定义工具栏 | -- | | toolbar | 自定义工具栏 | -- |

View File

@ -76,7 +76,7 @@ export default {
::: :::
| | | | | | | |
| --------------- | ---------- | --- | | ------ | -------- | --- |
| simple | 简单模式 | -- | | simple | 简单模式 | -- |
| title | 标题 | -- | | title | 标题 | -- |

View File

@ -86,15 +86,15 @@ export default {
::: title transfer 属性 ::: title transfer 属性
::: :::
| Name | Description | Accepted Values | | Name | Description | Accepted Values |
| -------- | ---- | ----------------------- | | ---------- | ----------- | --------------- |
| dataSource | 数据来源 | -- | | dataSource | 数据来源 | -- |
| title | 标题 | -- | | title | 标题 | -- |
| id | 主键 | -- | | id | 主键 | -- |
::: title transfer 插槽 ::: title transfer 插槽
::: :::
| Name | Description | Accepted Values | | Name | Description | Accepted Values |
| -------- | ---- | ----------------------- | | ---- | ----------- | --------------- |
| item | 列表项 | { data } | | item | 列表项 | { data } |

View File

@ -14,4 +14,4 @@ layui - vue谐音类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库 ,
<lay-timeline-item title="2017年layui 里程碑版本 2.0 发布" simple></lay-timeline-item> <lay-timeline-item title="2017年layui 里程碑版本 2.0 发布" simple></lay-timeline-item>
<lay-timeline-item title="2016年layui 首个版本发布" simple></lay-timeline-item> <lay-timeline-item title="2016年layui 首个版本发布" simple></lay-timeline-item>
<lay-timeline-item title="2015年layui 孵化" simple></lay-timeline-item> <lay-timeline-item title="2015年layui 孵化" simple></lay-timeline-item>
</lay-timeline> </lay-timeline>

View File

@ -10,6 +10,6 @@ const dropdownRef = (ref < null) | (HTMLElement > null)
const isClickOutside = useClickOutside(dropdownRef) const isClickOutside = useClickOutside(dropdownRef)
watch(isClickOutside, () => { watch(isClickOutside, () => {
// do something // do something
}) })
``` ```

View File

@ -28,4 +28,4 @@ export default function createContainer(
}, },
}, },
] ]
} }

View File

@ -28,4 +28,4 @@ export default function createContainer(
}, },
}, },
] ]
} }

View File

@ -30,4 +30,4 @@ export default function createContainer(
}, },
}, },
] ]
} }

View File

@ -1,7 +1,7 @@
<template> <template>
<lay-layout> <lay-layout>
<lay-side> <lay-side>
<lay-scroll style="overflow-y: scroll;"> <lay-scroll style="overflow-y: scroll">
<ul class="layui-menu layui-menu-lg layui-menu-docs"> <ul class="layui-menu layui-menu-lg layui-menu-docs">
<li <li
v-for="menu in menus" v-for="menu in menus"

View File

@ -1,7 +1,7 @@
<template> <template>
<lay-layout> <lay-layout>
<lay-side> <lay-side>
<lay-scroll style="overflow-y: scroll;"> <lay-scroll style="overflow-y: scroll">
<ul class="layui-menu layui-menu-lg layui-menu-docs"> <ul class="layui-menu layui-menu-lg layui-menu-docs">
<li <li
v-for="menu in menus" v-for="menu in menus"
@ -85,7 +85,7 @@ export default {
title: '更新', title: '更新',
subTitle: 'change log', subTitle: 'change log',
path: '/zh-CN/guide/changelog', path: '/zh-CN/guide/changelog',
} },
], ],
}, },
] ]

View File

@ -1,7 +1,7 @@
<template> <template>
<lay-layout> <lay-layout>
<lay-side> <lay-side>
<lay-scroll style="overflow-y: scroll;"> <lay-scroll style="overflow-y: scroll">
<ul class="layui-menu layui-menu-lg layui-menu-docs"> <ul class="layui-menu layui-menu-lg layui-menu-docs">
<li <li
v-for="menu in menus" v-for="menu in menus"

View File

@ -1,5 +1,12 @@
<template> <template>
<div style="margin-top:60px;background-color: whitesmoke; height: 100%; width: 100%"> <div
style="
margin-top: 60px;
background-color: whitesmoke;
height: 100%;
width: 100%;
"
>
<div class="site-banner"> <div class="site-banner">
<div class="site-banner-main"> <div class="site-banner-main">
<div class="site-zfj site-zfj-anim"> <div class="site-zfj site-zfj-anim">

View File

@ -1,7 +1,7 @@
import { ref, onMounted, onUnmounted, Ref } from 'vue' import { ref, onMounted, onUnmounted, Ref } from 'vue'
const useNestedEvent = (elementRef: Ref<HTMLElement | null>) => { const useNestedEvent = (elementRef: Ref<HTMLElement | null>) => {
const event = ref(false) const event = ref(false)
return event return event
} }
export default useNestedEvent export default useNestedEvent