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

slider

Browse Source
This commit is contained in:
halo
2022-01-05 12:42:50 +08:00
parent 7ba34dddb5 ead411ca83
commit ada270da87
92 changed files with 2399 additions and 794 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

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

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

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

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
###### 回到顶部组件的默认样式，<code>lay-backtop</code> 会自动寻找最近的可滚动祖先元素，也可以使用 `target` 属性指定触发滚动事件的元素，通过滑动来查看页面右下角的正方形按钮。

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

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

3
example/docs/zh-CN/components/block.md
View File

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

3
example/docs/zh-CN/components/breadcrumb.md
View File

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

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

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

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

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

3
example/docs/zh-CN/components/carousel.md
View File

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

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

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

3
example/docs/zh-CN/components/collapse.md
View File

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

3
example/docs/zh-CN/components/color.md
View File

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 主色调
:::

3
example/docs/zh-CN/components/colorPicker.md
View File

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

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

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

3
example/docs/zh-CN/components/container.md
View File

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 普通容器
:::

3
example/docs/zh-CN/components/countup.md
View File

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

3
example/docs/zh-CN/components/datePicker.md
View File

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

3
example/docs/zh-CN/components/dropdown.md
View File

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

3
example/docs/zh-CN/components/empty.md
View File

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

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

@@ -1,3 +1,9 @@
::: anchor
:::
::: title 基础使用
:::
::: demo
<template>

3
example/docs/zh-CN/components/form.md
View File

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

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

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

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

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

3
example/docs/zh-CN/components/iconPicker.md
View File

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

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

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

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

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

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

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

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

@@ -1,3 +1,9 @@
::: anchor
:::
::: title 基础使用
:::
::: demo
<template>

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

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

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

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::
@@ -9,9 +12,13 @@
<lay-menu-item title="用户" id="2"></lay-menu-item>
<lay-menu-item title="角色" id="3"></lay-menu-item>
<lay-menu-item title="目录" id="7">
<lay-menu-child-item title="菜单一" id="4"></lay-menu-child-item>
<lay-menu-child-item title="菜单二" id="5"></lay-menu-child-item>
<lay-menu-child-item title="菜单三" id="6"></lay-menu-child-item>
<lay-menu-item title="菜单一" id="8"></lay-menu-item>
<lay-menu-item title="菜单二" id="9"></lay-menu-item>
<lay-menu-item 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>
</lay-menu-item>
</lay-menu>
</template>
@@ -49,9 +56,13 @@ export default {
<lay-menu-item title="用户" id="2"></lay-menu-item>
<lay-menu-item title="角色" id="3"></lay-menu-item>
<lay-menu-item title="目录" id="7">
<lay-menu-child-item title="菜单一" id="4"></lay-menu-child-item>
<lay-menu-child-item title="菜单二" id="5"></lay-menu-child-item>
<lay-menu-child-item title="菜单三" id="6"></lay-menu-child-item>
<lay-menu-item title="菜单一" id="8"></lay-menu-item>
<lay-menu-item title="菜单二" id="9"></lay-menu-item>
<lay-menu-item 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>
</lay-menu-item>
</lay-menu>
</template>

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

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基本使用
:::
@@ -5,9 +8,9 @@
<template>
<lay-button @click="changeVisible1" type="primary">基础使用</lay-button>
<lay-modal title="基础使用" v-model="visible1">
<lay-layer title="基础使用" v-model="visible1">
内容
</lay-modal>
</lay-layer>
</template>
<script>
@@ -38,9 +41,9 @@ export default {
<template>
<lay-button @click="changeVisible2" type="primary">允许拖动</lay-button>
<lay-modal title="允许拖动" v-model="visible2">
<lay-layer title="允许拖动" v-model="visible2">
内容
</lay-modal>
</lay-layer>
</template>
<script>
@@ -71,9 +74,9 @@ export default {
<template>
<lay-button @click="changeVisible3" type="primary">放大缩小</lay-button>
<lay-modal title="放大缩小" v-model="visible3" move="true" maxmin="true">
<lay-layer title="放大缩小" v-model="visible3" move="true" maxmin="true">
内容
</lay-modal>
</lay-layer>
</template>
<script>
@@ -104,9 +107,9 @@ export default {
<template>
<lay-button @click="changeVisible4" type="primary">指定位置</lay-button>
<lay-modal title="指定位置" v-model="visible4" move="true" :offset="['100px','100px']">
<lay-layer title="指定位置" v-model="visible4" move="true" :offset="['100px','100px']">
内容
</lay-modal>
</lay-layer>
</template>
<script>
@@ -137,9 +140,9 @@ export default {
<template>
<lay-button @click="changeVisible8" type="primary">尺寸拉伸</lay-button>
<lay-modal title="拉伸尺寸" resize="true" v-model="visible8" move="true">
<lay-layer title="拉伸尺寸" resize="true" v-model="visible8" move="true">
内容
</lay-modal>
</lay-layer>
</template>
<script>
@@ -170,7 +173,7 @@ export default {
<template>
<lay-button @click="changeVisible5" type="primary">远程窗体</lay-button>
<lay-modal title="加载 Iframe 内容" width="500px" height="400px" maxmin="true" v-model="visible5" move="true" :type="type5" content="http://www.pearadmin.com"></lay-modal>
<lay-layer title="加载 Iframe 内容" width="500px" height="400px" maxmin="true" v-model="visible5" move="true" :type="type5" content="http://www.pearadmin.com"></lay-layer>
</template>
<script>
@@ -203,9 +206,9 @@ export default {
<template>
<lay-button @click="changeVisible6" type="primary">定义操作</lay-button>
<lay-modal title="定义操作" v-model="visible6" move="true" :btn="btn6">
<lay-layer title="定义操作" v-model="visible6" move="true" :btn="btn6">
内容
</lay-modal>
</lay-layer>
</template>
<script>
@@ -241,9 +244,9 @@ export default {
<template>
<lay-button @click="changeVisible7" type="primary">开启遮盖</lay-button>
<lay-modal title="开启遮盖" move="true" shade="false" v-model="visible7">
<lay-layer title="开启遮盖" move="true" shade="false" v-model="visible7">
内容
</lay-modal>
</lay-layer>
</template>
<script>
@@ -316,7 +319,7 @@ export default {
::: table
| 备注 | 描述 | 默认值 |
| --------------- | ------------- | -------------------------- |
| --------------- | ------------- | --------------------------|
| title | 标题 | -- |
| move | 允许拖拽 | `false` |
| maxmin | 最小化 最大化 | `false` |
@@ -326,6 +329,7 @@ export default {
| content | 内容 | -- |
| shade | 开启遮盖 | -- |
| shadeClose | 遮盖点击关闭 | -- |
| shadeOpacity | 遮盖层透明度 | `0.1` |
| zIndex | 自定义层级 | -- |
| type | 类型 | `1: component` `2: iframe` |
| closeBtn | 显示关闭 | true |
@@ -333,6 +337,8 @@ export default {
| btnAlign | 按钮布局 | `l` `r` `c` |
| anim | 入场动画 | `0` `-` `6` |
| isOutAnim | 关闭动画 | `true` `false` |
| success | 显示回调 | -- |
| end | 关闭回调 | -- |
:::

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

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

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

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

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

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

3
example/docs/zh-CN/components/progress.md
View File

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

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

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

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

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

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

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

112
example/docs/zh-CN/components/skeleton.md Normal file
View File

@@ -0,0 +1,112 @@
::: anchor
:::
::: title 基础使用
:::
::: demo
<template>
<div>
<div style="margin-bottom: 10px">
<lay-switch v-model="loading" active-text="加载" inactive-text="关闭"></lay-switch>
</div>
<lay-skeleton :rows="4" :loading="loading" animated>
<p style="margin-bottom: 18px">1 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
<p style="margin-bottom: 18px">2 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
<p style="margin-bottom: 18px">3 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
<p style="margin-bottom: 18px">4 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
</lay-skeleton>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const loading = ref(true);
return {
loading,
}
}
}
</script>
:::
::: title 图片
:::
::: demo
<template>
<div>
<div style="margin-bottom: 10px">
<lay-switch v-model="loading" active-text="加载" inactive-text="关闭"></lay-switch>
</div>
<lay-skeleton :loading="loading" animated>
<template #skeleton>
<lay-skeleton-item type="image"/>
<lay-skeleton-item type="p" style="width: 240px"/>
</template>
<div class="img-content">
<img src="https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png" />
<p style="margin-top: 18px">layui-vue 发展史....</p>
</div>
</lay-skeleton>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const loading = ref(true);
return {
loading,
}
}
}
</script>
<style>
.img-content {
width: 240px;
height: 240px;
}
</style>
:::
::: title 骨架屏属性
:::
::: table
| 属性 | 描述 | 可选值 |
| ----- | ---- | ------ |
| loading | 是否显示 | `true` `false` |
| rows | 显示行数 | -- |
| animated | 是否动画 | `true` `false` |
| type | 展示类型 | `p` `image` |
:::
::: title 骨架屏插槽
:::
::: table
| 插槽 | 描述 | 可选值 |
| ------ | -------- | ------ |
| default| 默认插槽 | -- |
| skeleton | 自定义插槽 | -- |
:::
::: comment
:::

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

@@ -1,95 +1,95 @@
::: title 横向
:::
::: demo
<template>
<lay-slider v-model="value1" :disabled="false"></lay-slider>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const value1 = ref(50)
return {
value1
}
}
}
</script>
:::
::: title 纵向
:::
::: demo
<template>
<lay-slider v-model="value2" :vertical="true" :disabled="true"></lay-slider>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const value2 = ref(10)
return {
value2
}
}
}
</script>
:::
::: title 区间
:::
::: demo
<template>
<lay-slider v-model="value3" :range="true"></lay-slider>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const value3 = ref([20,50])
return {
value3
}
}
}
</script>
:::
::: title 纵向区间
:::
::: demo
<template>
<lay-slider v-model:verticalrange="value4" :range="true" :vertical="true"></lay-slider>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const value4 = ref([23,56])
return {
value4
}
}
}
</script>
:::
::: comment
:::
::: title 横向
:::
::: demo
<template>
<lay-slider v-model="value1" :disabled="false"></lay-slider>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const value1 = ref(50)
return {
value1
}
}
}
</script>
:::
::: title 纵向
:::
::: demo
<template>
<lay-slider v-model="value2" :vertical="true" :disabled="true"></lay-slider>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const value2 = ref(10)
return {
value2
}
}
}
</script>
:::
::: title 区间
:::
::: demo
<template>
<lay-slider v-model="value3" :range="true"></lay-slider>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const value3 = ref([20,50])
return {
value3
}
}
}
</script>
:::
::: title 纵向区间
:::
::: demo
<template>
<lay-slider v-model:verticalrange="value4" :range="true" :vertical="true"></lay-slider>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const value4 = ref([23,56])
return {
value4
}
}
}
</script>
:::
::: comment
:::

384
example/docs/zh-CN/components/step.md Normal file
View File

@@ -0,0 +1,384 @@
::: anchor
:::
::: title 基础使用
:::
::: demo
<template>
<div>
<lay-step :active="active">
<lay-step-item></lay-step-item>
<lay-step-item></lay-step-item>
<lay-step-item></lay-step-item>
<lay-step-item></lay-step-item>
</lay-step>
<lay-button size="xs" @click="nexts">下一步</lay-button>
<lay-button size="xs" @click="previous">上一步</lay-button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const loading = ref(true);
const active = ref(-1);
const nexts = () => {
if (active.value++ >=3) active.value = 0
};
const previous = () => {
if (active.value-- ===0) active.value = 0
};
return {
loading,
active
}
}
}
</script>
:::
::: title 带标题带描述
:::
::: demo
<template>
<div>
<lay-step :active="active">
<lay-step-item title="First" content="First step"></lay-step-item>
<lay-step-item title="Second" content="Second step"></lay-step-item>
<lay-step-item title="Third" content="Third step"></lay-step-item>
<lay-step-item title="Fourth" content="Fourth step"></lay-step-item>
</lay-step>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const loading = ref(true);
const active = ref(-1);
const nexts = () => {
if (active.value++ >=3) active.value = 0
};
const previous = () => {
if (active.value-- ===0) active.value = 0
};
return {
loading,
active
}
}
}
</script>
:::
::: title 设置当前选中状态
:::
::: demo
<template>
<div>
<lay-step :active="active" current-status="primary">
<lay-step-item title="First" content="First step"></lay-step-item>
<lay-step-item title="Second" content="Second step"></lay-step-item>
<lay-step-item title="Third" content="Third step"></lay-step-item>
</lay-step>
<lay-button size="xs" @click="next">下一步</lay-button>
<lay-button size="xs" @click="previous">上一步</lay-button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const loading = ref(true);
const active = ref(-1);
const next = () => {
if (active.value++ >=2) active.value = 0
};
const previous = () => {
if (active.value-- ===0) active.value = 0
};
return {
loading,
active
}
}
}
</script>
:::
::: title 设置第几步状态
:::
这里设置`status` 会覆盖掉`current-status`
::: demo
<template>
<div>
<lay-step :active="active" current-status="warning">
<lay-step-item title="First" content="First step"></lay-step-item>
<lay-step-item status="fail" title="Second" content="Second step"></lay-step-item>
<lay-step-item title="Third" content="Third step"></lay-step-item>
<lay-step-item title="Fourth" content="Fourth step"></lay-step-item>
</lay-step>
<lay-button size="xs" @click="nexts">下一步</lay-button>
<lay-button size="xs" @click="previous">上一步</lay-button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const loading = ref(true);
const active = ref(-1);
const nexts = () => {
if (active.value++ >=3) active.value = 0
};
const previous = () => {
if (active.value-- ===0) active.value = 0
};
return {
loading,
active
}
}
}
</script>
:::
::: title 自定义宽度
:::
::: demo
<template>
<div>
<lay-step :active="active" space="200px">
<lay-step-item title="First" content="First step"></lay-step-item>
<lay-step-item title="Second" content="Second step"></lay-step-item>
<lay-step-item title="Third" content="Third step"></lay-step-item>
</lay-step>
<lay-button size="xs" @click="next">下一步</lay-button>
<lay-button size="xs" @click="previous">上一步</lay-button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const loading = ref(true);
const active = ref(-1);
const next = () => {
if (active.value++ >=2) active.value = 0
};
const previous = () => {
if (active.value-- ===0) active.value = 0
};
return {
loading,
active
}
}
}
</script>
:::
::: title 自定义图标
:::
::: demo
<template>
<div>
<lay-step :active="active">
<lay-step-item title="First" content="First step" icon="layui-icon-release"></lay-step-item>
<lay-step-item title="Second" content="Second step" icon="layui-icon-tree"></lay-step-item>
<lay-step-item title="Third" content="Third step" icon="layui-icon-share"></lay-step-item>
</lay-step>
<lay-button size="xs" @click="next">下一步</lay-button>
<lay-button size="xs" @click="previous">上一步</lay-button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const loading = ref(true);
const active = ref(-1);
const next = () => {
if (active.value++ >=2) active.value = 0
};
const previous = () => {
if (active.value-- ===0) active.value = 0
};
return {
loading,
active
}
}
}
</script>
:::
::: title 居中
:::
::: demo
<template>
<div>
<lay-step :active="active" center>
<lay-step-item title="First" content="First step">
<template #pace>
<lay-icon type="layui-icon-ok"></lay-icon>
</template>
</lay-step-item>
<lay-step-item title="Second" content="Second step"></lay-step-item>
<lay-step-item title="Third" content="Third step"></lay-step-item>
</lay-step>
<lay-button size="xs" @click="next">下一步</lay-button>
<lay-button size="xs" @click="previous">上一步</lay-button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const loading = ref(true);
const active = ref(-1);
const next = () => {
if (active.value++ >=2) active.value = 0
};
const previous = () => {
if (active.value-- ===0) active.value = 0
};
return {
loading,
active
}
}
}
</script>
:::
::: title 垂直
:::
::: demo
<template>
<div style="height: 300px">
<lay-step :active="active" direction="vertical">
<lay-step-item title="First" content="First step">
<template #pace>
<lay-icon type="layui-icon-ok"></lay-icon>
</template>
</lay-step-item>
<lay-step-item title="Second" content="Second step"></lay-step-item>
<lay-step-item title="Third" content="Third step"></lay-step-item>
</lay-step>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const loading = ref(true);
const active = ref(-1);
const next = () => {
if (active.value++ >=2) active.value = 0
};
const previous = () => {
if (active.value-- ===0) active.value = 0
};
return {
loading,
active
}
}
}
</script>
:::
::: title step步骤条属性
:::
::: table
| 属性 | 描述 | 类型 |可选值 | 默认值|
| ----- | ---- | ------ | ---| ---|
| active | 第几步 | number |-| 0 |
| center | 居中布局 | boolean | `true` `false` | `false` |
| direction | 垂直/平行布局 | string |`horizontal` `vertical` | `horizontal` |
| space | 宽度 | string | - | `auto` |
| currentStatus | 当前状态显示 | string | `primary` `success` `fail` `warning` | `primary` |
:::
::: title stepItem步骤条属性
:::
::: table
| 属性 | 描述 | 类型 |可选值 | 默认值|
| ----- | ---- | ------ | ---| ---|
| title| 标题 | string | - | - |
| content | 内容描述 | string | - | -|
| icon | 图标 | string | - | -|
| status | 状态 | string | `primary` `success` `fail` `warning` | `primary`|
:::
::: title stepItem步骤条slot
:::
::: table
| 属性 | 描述 |
| ----- | ---- |
| pace | 圆圈内容自定义 |
| default | 内容区域自定义 |
:::
::: comment
:::

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

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

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

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

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

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

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

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

49
example/docs/zh-CN/components/timeline.md
View File

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::
@@ -72,7 +75,40 @@ export default {
:::
::: title timeline-item attributes
::: title 节点插槽
:::
::: demo
<template>
<lay-timeline>
<lay-timeline-item title="2021年，layui vue 里程碑版本 1.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="2015年，layui 孵化" simple>
<template #dot>
<lay-icon type="layui-icon-face-smile" color="red"></lay-icon>
</template>
</lay-timeline-item>
</lay-timeline>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::
::: title Timeline Item 属性
:::
::: table
@@ -84,5 +120,16 @@ export default {
:::
::: title Timeline Item 属性
:::
::: table
| | | |
| ------ | -------- | --- |
| dot | 节点 | -- |
:::
::: comment
:::

3
example/docs/zh-CN/components/tooltip.md
View File

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

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

@@ -1,3 +1,6 @@
::: anchor
:::
::: title 基础使用
:::

3
example/docs/zh-CN/components/tree.md
View File

@@ -1,3 +1,6 @@
::: anchor
:::
::: demo
<template>