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

slider - 增加step

Browse Source
This commit is contained in:
halo
2022-02-05 11:28:05 +08:00
parent afeedaa399 05a3973753
commit 9c49a50b82
320 changed files with 4922 additions and 2973 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
example/docs/zh-CN/components/animation.md
View File

@@ -71,6 +71,113 @@ export default {
}
}
</script>
<style>
.site-doc-icon {
margin-bottom: 50px;
font-size: 0;
}
.site-doc-icon li .doc-icon-name,
.site-doc-icon li .doc-icon-code {
color: #c2c2c2;
}
.site-doc-icon li .doc-icon-fontclass {
height: 40px;
line-height: 20px;
padding: 0 5px;
font-size: 13px;
color: #333;
}
.site-doc-icon li {
display: inline-block;
vertical-align: middle;
width: 16.5%;
height: 105px;
line-height: 25px;
padding: 20px 0;
margin-right: -1px;
margin-bottom: -1px;
border: 1px solid #e2e2e2;
font-size: 14px;
text-align: center;
color: #666;
transition: all 0.3s;
-webkit-transition: all 0.3s;
}
.site-doc-icon li .layui-icon {
display: inline-block;
font-size: 32px;
}
.site-doc-color {
margin: 15px 0;
}
.site-doc-necolor li div {
border-radius: 0;
color: #000 !important;
}
.site-doc-color li div {
padding: 20px 10px;
color: #fff;
text-align: center;
line-height: 1.6;
font-size: 14px;
}
.site-doc-bgcolor li {
padding: 20px 10px;
}
.anim .site-doc-icon {
margin-bottom: 50px;
font-size: 0;
}
.anim .site-doc-icon li {
width: 50%;
}
.anim .site-doc-anim li {
height: auto;
}
.anim .site-doc-icon li {
display: inline-block;
vertical-align: middle;
width: 16.5%;
height: 105px;
line-height: 25px;
padding: 20px 0;
margin-right: -1px;
margin-bottom: -1px;
border: 1px solid #e2e2e2;
font-size: 14px;
text-align: center;
color: #666;
transition: all 0.3s;
-webkit-transition: all 0.3s;
}
.anim .site-doc-icon li .layui-anim {
width: 125px;
height: 125px;
line-height: 125px;
margin: 0 auto 10px;
text-align: center;
background-color: #009688;
cursor: pointer;
color: #fff;
border-radius: 50%;
}
.anim .site-doc-icon li .code {
white-space: nowrap;
}
</style>
:::

2
example/docs/zh-CN/components/avatar.md
View File

@@ -4,7 +4,7 @@
::: title 基础使用
:::
::: demo
::: demo 使用 `lay-avatar` 标签, 创建头像
<template>
<lay-avatar :src="src"></lay-avatar>

5
example/docs/zh-CN/components/backtop.md
View File

@@ -11,6 +11,9 @@
<lay-backtop></lay-backtop>
</template>
<script>
</script>
:::
:::title 自定义
@@ -35,7 +38,7 @@
<script>
import { ref } from 'vue'
import { layer } from "../../../../src/index.ts"
import { layer } from "@layui/layer-vue"
export default {
setup() {

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

@@ -4,7 +4,7 @@
::: title 基础使用
:::
::: demo
::: demo 使用 `lay-badge` 标签, 创建徽章
<template>
<lay-badge type="dot"></lay-badge>&nbsp;

9
example/docs/zh-CN/components/button.md
View File

@@ -12,7 +12,6 @@
<lay-button type="normal">百搭按钮</lay-button>
<lay-button type="warm">暖色按钮</lay-button>
<lay-button type="danger">警告按钮</lay-button>
<lay-button type="disabled">禁用按钮</lay-button>
</template>
<script>
@@ -60,7 +59,7 @@ export default {
::: title 按钮尺寸
:::
::: demo 传入 `size` 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs`
::: demo 使用 `size` 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs`
<template>
<lay-button type="primary" size="lg">原始按钮</lay-button>
@@ -88,7 +87,7 @@ export default {
::: title 流式按钮
:::
::: demo 传入 `size` 属性, 创建最大化按钮
::: demo 使用 `fluid` 属性, 创建最大化按钮
<template>
<lay-button type="primary" fluid>最大化按钮</lay-button>
@@ -114,7 +113,7 @@ export default {
::: title 圆角按钮
:::
::: demo 传入 `radius` 属性，创建圆角按钮
::: demo 使用 `radius` 属性，创建圆角按钮
<template>
<lay-button type="primary" radius>原始按钮</lay-button>
@@ -234,7 +233,7 @@ export default {
::: title 加载按钮
:::
::: demo 传入 `loading` 属性, 控制按钮的加载状态
::: demo 使用 `loading` 属性, 控制按钮的加载状态
<template>
<lay-button-container>

2
example/docs/zh-CN/components/card.md
View File

@@ -4,7 +4,7 @@
::: title 基础使用
:::
::: demo
::: demo 使用 `lay-card` 标签, 创建卡片组件
<template>
<div class="card-container">

2
example/docs/zh-CN/components/checkbox.md
View File

@@ -4,7 +4,7 @@
::: title 基础使用
:::
::: demo
::: demo 使用 `lay-checkbox` 标签, 创建一个复选框
<template>
<lay-form>

4
example/docs/zh-CN/components/confirm.md
View File

@@ -11,7 +11,7 @@
</template>
<script>
import { layer } from "../../../../src/index.ts"
import { layer } from "@layui/layer-vue"
export default {
setup() {
@@ -39,7 +39,7 @@ export default {
</template>
<script>
import { layer } from "../../../../src/index.ts"
import { layer } from "@layui/layer-vue"
export default {
setup() {

175
example/docs/zh-CN/components/drawer.md Normal file
View File

@@ -0,0 +1,175 @@
::: anchor
:::
::: title 基础使用
:::
::: demo
<template>
<lay-button @click="changeVisible" type="primary">打开</lay-button>
<lay-layer type="drawer" v-model="visible" title="标题">内容</lay-layer>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const visible = ref(false)
const changeVisible = function() {
visible.value = !visible.value;
}
return {
visible,
changeVisible
}
}
}
</script>
:::
::: title 抽屉嵌套
:::
::: demo
<template>
<lay-button @click="changeVisible1" type="primary">打开</lay-button>
<lay-layer type="drawer" v-model="visible1" title="标题">
<lay-button @click="changeVisible2" type="primary" style="margin:10px;">打开</lay-button>
<lay-layer type="drawer" area="200px" v-model="visible2" title="标题">
内容
</lay-layer>
</lay-layer>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const visible1 = ref(false)
const changeVisible1 = function() {
visible1.value = !visible1.value;
}
const visible2 = ref(false)
const changeVisible2 = function() {
visible2.value = !visible2.value;
}
return {
visible1,
visible2,
changeVisible1,
changeVisible2
}
}
}
</script>
:::
::: title 函数调用
:::
::: demo
<template>
<lay-button @click="openDrawer" type="primary">调用</lay-button>
</template>
<script>
import { ref } from 'vue'
import { layer } from "@layui/layer-vue"
export default {
setup() {
const openDrawer = function() {
layer.drawer({
title: "标题",
content: "内容"
})
}
return {
openDrawer
}
}
}
</script>
:::
::: title 不同方向
:::
::: demo
<template>
<lay-button @click="openTopDrawer" type="primary">上</lay-button>
<lay-button @click="openBottomDrawer" type="primary">下</lay-button>
<lay-button @click="openLeftDrawer" type="primary">左</lay-button>
<lay-button @click="openRightDrawer" type="primary">右</lay-button>
</template>
<script>
import { ref } from 'vue'
import { layer } from "@layui/layer-vue"
export default {
setup() {
const openTopDrawer = function() {
layer.drawer({
title: "标题",
content: "内容",
offset: "t"
})
}
const openBottomDrawer = function() {
layer.drawer({
title: "标题",
content: "内容",
offset: "b"
})
}
const openLeftDrawer = function() {
layer.drawer({
title: "标题",
content: "内容",
offset: "l"
})
}
const openRightDrawer = function() {
layer.drawer({
title: "标题",
content: "内容",
offset: "r"
})
}
return {
openTopDrawer,
openBottomDrawer,
openLeftDrawer,
openRightDrawer,
}
}
}
</script>
:::

145
example/docs/zh-CN/components/exception.md Normal file
View File

@@ -0,0 +1,145 @@
::: anchor
:::
::: title 401
:::
::: demo 使用 `lay-exception` 标签, 创建一个异常页面
<template>
<lay-exception status="401" title="401" describe="暂无相关权限">
<template #action>
<lay-button>刷新</lay-button>
<lay-button type="primary">返回</lay-button>
</template>
</lay-exception>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::
::: title 403
:::
::: demo 使用 `lay-exception` 标签, 创建一个异常页面
<template>
<lay-exception status="403" title="403" describe="暂无相关权限">
<template #action>
<lay-button>刷新</lay-button>
<lay-button type="primary">返回</lay-button>
</template>
</lay-exception>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::
::: title 404
:::
::: demo 使用 `lay-exception` 标签, 创建一个异常页面
<template>
<lay-exception status="404" title="404" describe="跳转页面失败">
<template #action>
<lay-button>刷新</lay-button>
<lay-button type="primary">返回</lay-button>
</template>
</lay-exception>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::
::: title 500
:::
::: demo 使用 `lay-exception` 标签, 创建一个异常页面
<template>
<lay-exception status="500" title="500" describe="服务发生错误">
<template #action>
<lay-button>刷新</lay-button>
<lay-button type="primary">返回</lay-button>
</template>
</lay-exception>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::
::: title Exception 属性
:::
::: table
| 属性 | 描述 | 可选值 |
| ----------- | -------- | ------ |
| title | 标题 | -- |
| status | 状态 | `403` `404` `500` |
| describe | 描述信息 | -- |
:::
::: title Exception 插槽
:::
::: table
| 属性 | 描述 | 可选值 |
| ----------- | -------- | ------ |
| action | 操作 | -- |
:::
::: comment
:::
::: previousNext field
:::

26
example/docs/zh-CN/components/grid.md
View File

@@ -105,6 +105,19 @@ export default {
}
}
</script>
<style>
.grid-demo-bg1 {
background-color: #63BA79;
}
.grid-demo {
padding: 10px;
line-height: 50px;
border-radius: 2px;
text-align: center;
background-color: #79C48C;
color: #fff;
}
</style>
:::
@@ -136,6 +149,19 @@ export default {
}
}
</script>
<style>
.grid-demo-bg1 {
background-color: #63BA79;
}
.grid-demo {
padding: 10px;
line-height: 50px;
border-radius: 2px;
text-align: center;
background-color: #79C48C;
color: #fff;
}
</style>
:::

6
example/docs/zh-CN/components/icon.md
View File

@@ -4,7 +4,7 @@
::: title 基础使用
:::
::: demo
::: demo 使用 `lay-icon` 标签, 创建图标组件
<template>
<lay-icon type="layui-icon-face-smile"></lay-icon>
@@ -27,7 +27,7 @@ export default {
::: title 图标颜色
:::
::: demo
::: demo 使用 `color` 属性设置颜色
<template>
<lay-icon type="layui-icon-face-smile" color="red"></lay-icon> &nbsp;
@@ -55,7 +55,7 @@ export default {
::: title 图标尺寸
:::
::: demo
::: demo 使用 `size` 属性设置尺寸
<template>
<lay-icon type="layui-icon-star" size="26px" color="red"></lay-icon>

2
example/docs/zh-CN/components/input.md
View File

@@ -4,7 +4,7 @@
::: title 基础使用
:::
::: demo
::: demo 使用 `lay-input` 标签, 创建输入框
<template>
<lay-input v-model="data1"></lay-input>

2
example/docs/zh-CN/components/inputNumber.md
View File

@@ -4,7 +4,7 @@
::: title 基础使用
:::
::: demo
::: demo 使用 `lay-input-number` 标签, 创建数字输入框
<template>
<lay-input-number v-model="data"></lay-input-number>

91
example/docs/zh-CN/components/layout.md
View File

@@ -7,7 +7,7 @@
::: demo
<template>
<lay-layout>
<lay-layout class="example">
<lay-header>header</lay-header>
<lay-body>content</lay-body>
<lay-footer>footer</lay-footer>
@@ -27,21 +27,21 @@ export default {
</script>
<style>
.lay-code .layui-footer,
.lay-code .layui-header {
.example .layui-footer,
.example .layui-header {
line-height: 60px;
text-align: center;
background: #87ca9a;
color: white;
}
.lay-code .layui-side {
.example .layui-side {
display: flex;
background: #77c38c;
align-items: center;
justify-content: center;
color: white;
}
.lay-code .layui-body {
.example .layui-body {
display: flex;
background: #5FB878;
align-items: center;
@@ -58,7 +58,7 @@ export default {
::: demo
<template>
<lay-layout>
<lay-layout class="example">
<lay-side>left</lay-side>
<lay-body>content</lay-body>
<lay-side>right</lay-side>
@@ -76,6 +76,29 @@ export default {
}
}
</script>
<style>
.example .layui-footer,
.example .layui-header {
line-height: 60px;
text-align: center;
background: #87ca9a;
color: white;
}
.example .layui-side {
display: flex;
background: #77c38c;
align-items: center;
justify-content: center;
color: white;
}
.example .layui-body {
display: flex;
background: #5FB878;
align-items: center;
justify-content: center;
color: white;
}
</style>
:::
@@ -85,7 +108,7 @@ export default {
::: demo
<template>
<lay-layout>
<lay-layout class="example">
<lay-header>header</lay-header>
<lay-layout>
<lay-side>side</lay-side>
@@ -105,6 +128,29 @@ export default {
}
}
</script>
<style>
.example .layui-footer,
.example .layui-header {
line-height: 60px;
text-align: center;
background: #87ca9a;
color: white;
}
.example .layui-side {
display: flex;
background: #77c38c;
align-items: center;
justify-content: center;
color: white;
}
.example .layui-body {
display: flex;
background: #5FB878;
align-items: center;
justify-content: center;
color: white;
}
</style>
:::
@@ -114,7 +160,7 @@ export default {
::: demo
<template>
<lay-layout>
<lay-layout class="example">
<lay-side>side</lay-side>
<lay-layout>
<lay-header>header</lay-header>
@@ -123,7 +169,7 @@ export default {
</lay-layout>
</lay-layout>
<hr>
<lay-layout>
<lay-layout class="example">
<lay-layout>
<lay-header>header</lay-header>
<lay-body>body</lay-body>
@@ -132,7 +178,7 @@ export default {
<lay-side>side</lay-side>
</lay-layout>
<hr>
<lay-layout>
<lay-layout class="example">
<lay-header>Header</lay-header>
<lay-body>
<lay-layout>
@@ -143,7 +189,7 @@ export default {
<lay-footer>Footer</lay-footer>
</lay-layout>
<hr>
<lay-layout>
<lay-layout class="example">
<lay-header>Header</lay-header>
<lay-body>
<lay-layout>
@@ -166,6 +212,29 @@ export default {
}
}
</script>
<style>
.example .layui-footer,
.example .layui-header {
line-height: 60px;
text-align: center;
background: #87ca9a;
color: white;
}
.example .layui-side {
display: flex;
background: #77c38c;
align-items: center;
justify-content: center;
color: white;
}
.example .layui-body {
display: flex;
background: #5FB878;
align-items: center;
justify-content: center;
color: white;
}
</style>
:::

6
example/docs/zh-CN/components/load.md
View File

@@ -16,7 +16,7 @@
<script>
import { ref } from 'vue'
import { layer } from "../../../../src/index.ts"
import { layer } from "@layui/layer-vue"
export default {
setup() {
@@ -54,7 +54,7 @@ export default {
</template>
<script>
import { layer } from "../../../../src/index.ts"
import { layer } from "@layui/layer-vue"
export default {
setup() {
@@ -85,7 +85,7 @@ export default {
<script>
import { ref } from 'vue'
import { layer } from "../../../../src/index.ts"
import { layer } from "@layui/layer-vue"
export default {
setup() {

131
example/docs/zh-CN/components/menu.md
View File

@@ -12,12 +12,12 @@
<lay-menu-item title="用户" id="2"></lay-menu-item>
<lay-menu-item title="角色" id="3"></lay-menu-item>
<lay-sub-menu title="目录" id="7">
<lay-menu-item title="菜单一" id="8"></lay-menu-item>
<lay-menu-item title="菜单二" id="9"></lay-menu-item>
<lay-sub-menu title="菜单三" id="10">
<lay-menu-item title="菜单一" id="11"></lay-menu-item>
<lay-menu-item title="菜单二" id="12"></lay-menu-item>
<lay-menu-item title="菜单三" id="13"></lay-menu-item>
<lay-menu-item title="菜单" id="8"></lay-menu-item>
<lay-menu-item title="菜单" id="9"></lay-menu-item>
<lay-sub-menu title="菜单" id="10">
<lay-menu-item title="菜单" id="11"></lay-menu-item>
<lay-menu-item title="菜单" id="12"></lay-menu-item>
<lay-menu-item title="菜单" id="13"></lay-menu-item>
</lay-sub-menu>
</lay-sub-menu>
</lay-menu>
@@ -52,12 +52,94 @@ export default {
<lay-menu-item title="用户" id="2"></lay-menu-item>
<lay-menu-item title="角色" id="3"></lay-menu-item>
<lay-sub-menu title="目录" id="7">
<lay-menu-item title="菜单一" id="8"></lay-menu-item>
<lay-menu-item title="菜单二" id="9"></lay-menu-item>
<lay-sub-menu title="菜单三" id="10">
<lay-menu-item title="菜单一" id="11"></lay-menu-item>
<lay-menu-item title="菜单二" id="12"></lay-menu-item>
<lay-menu-item title="菜单三" id="13"></lay-menu-item>
<lay-menu-item title="菜单" id="8"></lay-menu-item>
<lay-menu-item title="菜单" id="9"></lay-menu-item>
<lay-sub-menu title="菜单" id="10">
<lay-menu-item title="菜单" id="11"></lay-menu-item>
<lay-menu-item title="菜单" id="12"></lay-menu-item>
<lay-menu-item title="菜单" id="13"></lay-menu-item>
</lay-sub-menu>
</lay-sub-menu>
</lay-menu>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const openKeys = ref(["7"])
const selectedKey = ref("5")
return {
openKeys,
selectedKey
}
}
}
</script>
:::
::: title 反转样式
:::
::: demo
<template>
<lay-menu level="true" v-model:selectedKey="selectedKey" inverted="true" v-model:openKeys="openKeys" :tree="true">
<lay-menu-item title="首页" id="1"></lay-menu-item>
<lay-menu-item title="用户" id="2"></lay-menu-item>
<lay-menu-item title="角色" id="3"></lay-menu-item>
<lay-sub-menu title="目录" id="7">
<lay-menu-item title="菜单" id="8"></lay-menu-item>
<lay-menu-item title="菜单" id="9"></lay-menu-item>
<lay-sub-menu title="菜单" id="10">
<lay-menu-item title="菜单" id="11"></lay-menu-item>
<lay-menu-item title="菜单" id="12"></lay-menu-item>
<lay-menu-item title="菜单" id="13"></lay-menu-item>
</lay-sub-menu>
</lay-sub-menu>
</lay-menu>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const openKeys = ref(["7"])
const selectedKey = ref("5")
return {
openKeys,
selectedKey
}
}
}
</script>
:::
::: title 切换主题
:::
::: demo
<template>
<lay-menu v-model:selectedKey="selectedKey" theme="light" v-model:openKeys="openKeys" :tree="true">
<lay-menu-item title="首页" id="1"></lay-menu-item>
<lay-menu-item title="用户" id="2"></lay-menu-item>
<lay-menu-item title="角色" id="3"></lay-menu-item>
<lay-sub-menu title="目录" id="7">
<lay-menu-item title="菜单" id="8"></lay-menu-item>
<lay-menu-item title="菜单" id="9"></lay-menu-item>
<lay-sub-menu title="菜单" id="10">
<lay-menu-item title="菜单" id="11"></lay-menu-item>
<lay-menu-item title="菜单" id="12"></lay-menu-item>
<lay-menu-item title="菜单" id="13"></lay-menu-item>
</lay-sub-menu>
</lay-sub-menu>
</lay-menu>
@@ -90,17 +172,29 @@ export default {
<template>
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" v-model:tree="isTree">
<lay-menu-item id="1">
<router-link to="">首页</router-link>
<router-link to="">
<lay-icon type="layui-icon-home"></lay-icon>
首页
</router-link>
</lay-menu-item>
<lay-sub-menu id="7">
<template v-slot:title>
<router-link to="">目录</router-link>
<router-link to="">
<lay-icon type="layui-icon-home"></lay-icon>
目录
</router-link>
</template>
<lay-menu-item id="8">
<router-link to="">菜单一</router-link>
<router-link to="">
<lay-icon type="layui-icon-home"></lay-icon>
菜单
</router-link>
</lay-menu-item>
<lay-menu-item id="9">
<router-link to="">菜单二</router-link>
<router-link to="">
<lay-icon type="layui-icon-home"></lay-icon>
菜单
</router-link>
</lay-menu-item>
</lay-sub-menu>
</lay-menu>
@@ -136,6 +230,9 @@ export default {
| ------------------- | ------ | ---- |
| v-model:selectedKey | 选中项 | -- |
| v-model:openKeys | 打开项 | -- |
| theme | 菜单主题 | `dark` `light` |
| inverted | 特殊的激活样式 | `true` `false` |
| level | 菜单层级 | `true` `false` |
:::
@@ -187,4 +284,4 @@ export default {
:::
::: previousNext nav
:::
:::

20
example/docs/zh-CN/components/modal.md
View File

@@ -28,7 +28,7 @@ export default {
return {
visible1
};
},
}
};
</script>
@@ -61,7 +61,7 @@ export default {
return {
visible2
};
},
}
};
</script>
@@ -94,7 +94,7 @@ export default {
return {
visible3
};
},
}
};
</script>
@@ -127,7 +127,7 @@ export default {
return {
visible4
};
},
}
};
</script>
@@ -160,7 +160,7 @@ export default {
return {
visible8
};
},
}
};
</script>
@@ -193,7 +193,7 @@ export default {
type5,
visible5
};
},
}
};
</script>
@@ -231,7 +231,7 @@ export default {
btn6,
visible6
};
},
}
};
</script>
@@ -264,7 +264,7 @@ export default {
return {
visible7
};
},
}
};
</script>
@@ -283,7 +283,7 @@ export default {
<script>
import { ref, watch } from "vue";
import { layer } from "../../../../src/index.ts"
import { layer } from "@layui/layer-vue"
import { useRoute, useRouter } from "vue-router";
export default {
setup() {
@@ -307,7 +307,7 @@ export default {
close,
closeAll
};
},
}
};
</script>

8
example/docs/zh-CN/components/msg.md
View File

@@ -11,13 +11,13 @@
</template>
<script>
import { layer } from "../../../../src/index.ts"
import { layer } from "@layui/layer-vue"
export default {
setup() {
const openMsg = function() {
layer.msg("普通消息", { time: 1000 })
layer.msg("普通消息", { time: 100000 })
}
return {
openMsg
@@ -42,13 +42,13 @@ export default {
</template>
<script>
import { layer } from "../../../../src/index.ts"
import { layer } from "@layui/layer-vue"
export default {
setup() {
const openSuccess = function() {
layer.msg("成功消息", { icon : 1, time: 1000})
layer.msg("成功消息", { icon : 1, time: 100000})
}
const openFailure = function() {

2
example/docs/zh-CN/components/page.md
View File

@@ -4,7 +4,7 @@
::: title 基础使用
:::
::: demo
::: demo 使用 `lay-page` 标签, 创建分页
<template>
<lay-page :limit="limit" @limit="limit = $event" :total="total" :show-page="showPage"></lay-page>

2
example/docs/zh-CN/components/panel.md
View File

@@ -4,7 +4,7 @@
::: title 基础使用
:::
::: demo
::: demo 使用 `lay-panel` 标签, 创建面板组件
<template>
<lay-panel><div style="padding: 30px;">面板</div></lay-panel>

2
example/docs/zh-CN/components/radio.md
View File

@@ -4,7 +4,7 @@
::: title 基础使用
:::
::: demo
::: demo 使用 `lay-radio` 标签, 创建一个单选框
<template>
<lay-form>

2
example/docs/zh-CN/components/rate.md
View File

@@ -4,7 +4,7 @@
::: title 基础使用
:::
::: demo
::: demo 使用 `lay-rate` 标签, 创建评分组件
<template>
<lay-rate v-model="all1"></lay-rate>

79
example/docs/zh-CN/components/result.md Normal file
View File

@@ -0,0 +1,79 @@
::: anchor
:::
::: title 成功
:::
::: demo 使用 `lay-result` 标签, 创建一个结果页面
<template>
<lay-result></lay-result>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::
::: title 失败
:::
::: demo 使用 `lay-result` 标签, 创建一个结果页面
<template>
<lay-result status="failure"></lay-result>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::
::: title Result 属性
:::
::: table
| 属性 | 描述 | 可选值 |
| ----------- | -------- | ------ |
| title | 标题 | -- |
| status | 状态 | `success` `failure` |
| describe | 描述信息 | -- |
:::
::: title Result 插槽
:::
::: table
| 属性 | 描述 | 可选值 |
| ----------- | -------- | ------ |
| content | 内容 | -- |
| action | 操作 | -- |
:::
::: comment
:::
::: previousNext field
:::

1
example/docs/zh-CN/components/select.md
View File

@@ -46,7 +46,6 @@ export default {
import { ref } from 'vue'
export default {
name:'selectChange',
setup() {
const value = ref(null);
var i = 1;

2
example/docs/zh-CN/components/skeleton.md
View File

@@ -5,7 +5,7 @@
:::
::: demo
::: demo 使用 `lay-skeleton` 标签, 创建骨架屏
<template>
<div>

2
example/docs/zh-CN/components/slider.md
View File

@@ -4,7 +4,7 @@
::: title 横向
:::
::: demo
::: demo 使用 `lay-slider` 标签, 创建滑块
<template>
<lay-slider v-model="value1" :disabled="false"></lay-slider>

118
example/docs/zh-CN/components/splitPanel.md Normal file
View File

@@ -0,0 +1,118 @@
::: anchor
:::
::: title 基础使用
:::
::: demo
<template>
<div>
<lay-split-panel style="height: 300px">
<lay-split-panel-item>A</lay-split-panel-item>
<lay-split-panel-item>B</lay-split-panel-item>
<lay-split-panel-item>C</lay-split-panel-item>
</lay-split-panel>
</div>
</template>
<script>
</script>
:::
::: title 自定义比例
:::
::: demo
<template>
<div>
<lay-split-panel style="height: 300px">
<lay-split-panel-item :space="30">1</lay-split-panel-item>
<lay-split-panel-item :space="20">2</lay-split-panel-item>
<lay-split-panel-item :space="50">3</lay-split-panel-item>
</lay-split-panel>
</div>
</template>
<script>
</script>
:::
::: title 垂直布局
:::
::: demo
<template>
<div>
<lay-split-panel :vertical="true" style="height: 600px; width: 100%">
<lay-split-panel-item>1</lay-split-panel-item>
<lay-split-panel-item>2</lay-split-panel-item>
<lay-split-panel-item>3</lay-split-panel-item>
</lay-split-panel>
</div>
</template>
<script>
</script>
:::
::: title 组合用法
:::
::: demo
<template>
<div>
<lay-split-panel style="height: 600px;">
<lay-split-panel-item :space="60">
<lay-split-panel :vertical="true" style="height: 600px; width: 100%">
<lay-split-panel-item :space="40">1</lay-split-panel-item>
<lay-split-panel-item :space="40">2</lay-split-panel-item>
</lay-split-panel>
</lay-split-panel-item>
<lay-split-panel-item :space="40">2</lay-split-panel-item>
</lay-split-panel>
</div>
</template>
<script>
</script>
:::
::: title splitPanel属性
:::
::: table
| 属性 | 描述 | 类型 |可选值 | 默认值|
| ----- | ---- | ------ | ---| ---|
| vertical | 是否垂直布局 | Boolean |`true` `false`| false |
| minSize | 块拉动最小范围(按像素 `px`) | number | - | 50 |
:::
::: title splitPanelItem属性
:::
::: table
| 属性 | 描述 | 类型 |可选值 | 默认值|
| ----- | ---- | ------ | ---| ---|
| space | 默认每个站多大比例（`%`）, 设置一个，<br/> 其他的都需要设置，合计为（`100` ） | number | - | 按照个数平分 |
:::
::: comment
:::
::: previousNext splitPanel
:::

2
example/docs/zh-CN/components/switch.md
View File

@@ -4,7 +4,7 @@
::: title 基础使用
:::
::: demo
::: demo 使用 `lay-switch` 标签, 创建开关
<template>
<lay-switch v-model="active1"></lay-switch>

47
example/docs/zh-CN/components/tab.md
View File

@@ -130,15 +130,15 @@ export default {
:::
::: title 控制是否关闭
::: title 关闭前置
:::
::: demo
<template>
<lay-tab type="card" v-model="current5" allow-close @change="change5" @close="close5" :beforeClose="beforeClose">
<lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
<lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
<lay-tab-item title="选项一" id="1" closable="true"><div style="padding:20px">选项一</div></lay-tab-item>
<lay-tab-item title="选项二" id="2" closable="false"><div style="padding:20px">选项二</div></lay-tab-item>
<lay-tab-item title="选项三" id="3"><div style="padding:20px">选项三</div></lay-tab-item>
<lay-tab-item title="选项四" id="4"><div style="padding:20px">选项四</div></lay-tab-item>
<lay-tab-item title="选项五" id="5"><div style="padding:20px">选项五</div></lay-tab-item>
@@ -178,15 +178,14 @@ export default {
:::
::: title 嵌套循环
:::
::: demo
<template>
<lay-tab type="card" v-model="current6" @change="change6">
<lay-tab-item v-for="a in arr" :key="a" :title="a.title" :id="a.id">
<lay-tab type="card" allow-close v-model="current6" @change="change6">
<lay-tab-item v-for="a in arr" :key="a" :title="a.title" :id="a.id" :closable="a.closable">
内容{{a.id}}
</lay-tab-item>
</lay-tab>
@@ -204,12 +203,11 @@ export default {
}
const arr = ref([
{id:'1', title:'选项一'},
{id:'2', title:'选项二'}
{id:'1', title:'选项一', closable: false},
{id:'2', title:'选项二'},
{id:'3', title:'选项三'}
])
arr.value.push({id:'3', title:'选项三'})
return {
current6,
arr
@@ -225,13 +223,13 @@ export default {
::: table
| 属性 | 描述 | 可选值 |
| ----------- | -------- | -------------- |
| v-model | 当前激活 | -- |
| type | 主题样式 | -- |
| allow-close | 允许关闭 | `true` `false` |
| before-close | `Function`关闭之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行关闭 |
| before-leave | `Function`切换标签之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行切换 |
| 属性 | 描述 | 可选值 |
| ------------ | ------------------------------------ | ----------------------------------------- |
| v-model | 当前激活 | -- |
| type | 主题样式 | -- |
| allow-close | 允许关闭 | `true` `false` |
| before-close | `Function`关闭之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行关闭 |
| before-leave | `Function`切换标签之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行切换 |
:::
@@ -247,8 +245,21 @@ export default {
:::
::: title Tab Item 属性
:::
::: table
| 属性 | 描述 | 可选值 |
| -------- | -------- | ------ |
| id | 唯一标识 | -- |
| title | 头部标题 | -- |
| closable | 允许关闭 | -- |
:::
::: comment
:::
::: previousNext tab
:::
:::

2
example/docs/zh-CN/components/table.md
View File

@@ -4,7 +4,7 @@
::: title 基础使用
:::
::: demo
::: demo 使用 `lay-table` 标签, 创建表格
<template>
<lay-table :columns="columns" :dataSource="dataSource">

2
example/docs/zh-CN/components/textarea.md
View File

@@ -4,7 +4,7 @@
::: title 基础使用
:::
::: demo
::: demo 使用 `lay-textarea` 标签, 创建文本域
<template>
<lay-textarea placeholder="请输入描述" v-model="data1"></lay-textarea>

2
example/docs/zh-CN/components/transfer.md
View File

@@ -4,7 +4,7 @@
::: title 基础使用
:::
::: demo
::: demo 使用 `lay-transfer` 标签, 创建穿梭框
<template>
<lay-transfer :dataSource="dataSource1"></lay-transfer>

49
example/docs/zh-CN/guide/changelog.md
View File

@@ -11,15 +11,48 @@
<template>
<lay-timeline>
<lay-timeline-item title="0.3.x">
<ul>
<ul>
<a name="0-3-6"> </a>
<li>
<h3>0.3.6 <span class="layui-badge-rim">2022-02-02</span></h3>
<ul>
<li>[新增] result 结果组件, 提供 success error 通用状态页。</li>
<li>[新增] exception 异常组件, 提供 403, 404, 500 通用异常页。</li>
<li>[新增] menu 组件 level 属性, 控制菜单层级之间的背景色差异。</li>
<li>[新增] menu 组件 inverted 属性, 提供另一种树形菜单选中效果。</li>
<li>[新增] menu 组件 theme 属性, 可选值 light 和 dark。</li>
<li>[修复] table 组件 header 不随 body 滚动。</li>
<li>[升级] vue 3.2.29 版本。</li>
</ul>
</li>
</ul>
<ul>
<a name="0-3-5"> </a>
<li>
<h3>0.3.5 <span class="layui-badge-rim">2022-01-24</span></h3>
<ul>
<li>[新增] split-panel 分割面板, 高度灵活的布局组件。</li>
<li>[新增] layer 弹层 type 属性 drawer 可选值, 提供抽屉模式。</li>
<li>[修复] tab-item 组件 closable 属性警告, 兼容 string 类型。</li>
<li>[修复] dropdown 下拉菜单 content 显示位置问题。</li>
<li>[升级] icons-vue 1.0.3 版本。</li>
<li>[升级] layer-vue 1.3.1 版本。</li>
</ul>
</li>
</ul>
<ul>
<a name="0-3-4"> </a>
<li>
<h3>0.3.4 <span class="layui-badge-rim">2022-01-09</span></h3>
<h3>0.3.4 <span class="layui-badge-rim">2022-01-19</span></h3>
<ul>
<li>[新增] avatar-list 头像列表组件。</li>
<li>[修复] button 按钮 disabled 为 true 时, 仍触发 click 事件。</li>
<li>[修复] menu-item 与 sub-menu 组件的 title 属性必填警告。</li>
<li>[升级] vite 2.7.10。</li>
<li>[新增] tab-item 选项卡组件 closable 属性, 控制当前选项卡 close 支持。</li>
<li>[修复] button 按钮 disabled 为 true 时, 触发 click 事件。</li>
<li>[修复] menu-item 与 sub-menu 组件的 title 属性必填警告。</li>
<li>[修复] layout 组件 side 因 flex 布局宽度不固定。</li>
<li>[优化] layer 的 children slot 渲染机制。</li>
<li>[升级] layer-vue 1.2.5 版本。</li>
<li>[升级] vue 3.2.27 版本。</li>
</ul>
</li>
</ul>
@@ -50,7 +83,7 @@
<li>[增强] menu 菜单组件, 初步支持无限级嵌套。</li>
<li>[修复] layer.close layer.closeAll 函数无法触发 OutAnim 过度动画问题。</li>
<li>[废弃] menu-child-item 组件, 使用 menu-item 替代。</li>
<li>[升级] layer-vue 1.2.4。</li>
<li>[升级] layer-vue 1.2.4 版本。</li>
</ul>
</li>
</ul>
@@ -68,7 +101,7 @@
<li>[修复] rate 评分 mouseleave 事件绑定警告。</li>
<li>[修复] npm 安装 layui-vue 不必要的依赖警告。</li>
<li>[集成] eslint, prettier 规范插件 。</li>
<li>[升级] icons-vue 1.0.2。</li>
<li>[升级] icons-vue 1.0.2 版本。</li>
</ul>
</li>
</ul>
@@ -87,7 +120,7 @@
<li>[修复] layer 弹层 v-model 切换状态后, 让其保持 area 与 offset 状态。</li>
<li>[修复] transfer 穿梭框组件按钮样式, 使其增加减少操作按钮对齐。</li>
<li>[修复] tree 树开启 checkbox 时, 无法选中的问题。</li>
<li>[升级] layer-vue 1.2.2。</li>
<li>[升级] layer-vue 1.2.2 版本。</li>
</ul>
</li>
</ul>

41
example/docs/zh-CN/guide/getStarted.md
View File

@@ -1,18 +1,23 @@
::: title 快速上手
:::
<br>
::: describe 1. 使用 npm 下载
:::
```
npm install @layui/layui-vue --save
```
:::describe 或
:::
```
yarn add @layui/layui-vue --save
```
:::describe 或
:::
```
pnpm install @layui/layui-vue --save
```
<br>
::: describe 2. 在 main.ts 中依赖
::: title 全局注册
:::
```js
@@ -26,7 +31,27 @@ createApp(App).use(Layui).mount('#app')
<br>
::: describe 3. 在 index.vue 使用
::: title 按需引入
:::
```js
import App from './App.vue'
import { createApp } from 'vue'
import { LayButton, LayTable } from '@layui/layui-vue'
import '@layui/layui-vue/es/button/index.css';
import '@layui/layui-vue/es/table/index.css';
var app = createApp(App).
app.component("LayButton", LayButton);
app.component("LayTable", LayTable);
app.mount('#app')
```
<br>
::: title 基础示例
:::
```html
@@ -41,5 +66,3 @@ createApp(App).use(Layui).mount('#app')
<lay-footer>pearadmin.com</lay-footer>
</lay-layout>
```
- 前往: [layui-vue-sample](https://gitee.com/layui-vue/layui-vue-sample)

2
example/docs/zh-CN/guide/member.md
View File

@@ -129,7 +129,7 @@
莫名点
</lay-col>
<lay-col md="8">
焦点：skeleton step
焦点：skeleton step splitPanel
</lay-col>
<lay-col md="4">
地点：中国 上海