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

1.骨架屏组件封装

Browse Source
This commit is contained in:
dingyongya
2021-12-29 15:59:15 +08:00
parent 0ea613dbb0 61325cad20
commit 62f5bb6c18
188 changed files with 3550 additions and 4962 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,11 @@
::: title 基础使用
###### 回到顶部组件的默认样式，通过滑动来查看页面右下角的正方形按钮。
###### 回到顶部组件的默认样式，<code>lay-backtop</code> 会自动寻找最近的可滚动祖先元素，也可以使用 `target` 属性指定触发滚动事件的元素，通过滑动来查看页面右下角的正方形按钮。
:::
::: demo
<template>
<lay-backtop target=".layui-body"></lay-backtop>
<lay-backtop></lay-backtop>
</template>
:::
@@ -17,18 +16,17 @@
::: demo
<!-- 使用默认插槽自定义组件内容,也可以使用组件提供的样式属性快速定义常用样式，样式属性能满足大多数场景,lay-backtop组件可搭配 lay-tooltip 组件使用-->
<!-- 使用默认插槽自定义组件内容,也可以使用组件提供的样式属性快速定义常用样式，样式属性能满足大多数场景。lay-backtop组件可搭配 lay-tooltip 组件使用-->
<template>
<!-- 使用默认插槽自定义 -->
<lay-tooltip content="插槽自定义 backtop " position="left">
<lay-backtop target=".layui-body" :showHeight="0" :bottom="160" bgcolor="#5FB878" circular disabled>
<lay-backtop @click="handlerClick" :showHeight="0" :bottom="160" bgcolor="#5FB878" circle disabled>
<lay-icon type="layui-icon-dialogue" size="30px"></lay-icon>
</lay-backtop>
</lay-tooltip>
<!-- 使用样式属性自定义 -->
<lay-tooltip content="属性自定义 backtop " position="left">
<lay-backtop target=".layui-body" :bottom="100" bgcolor="#5FB878" icon="layui-icon-up" circular>
</lay-backtop>
<lay-backtop :bottom="100" bgcolor="#5FB878" icon="layui-icon-up" circle></lay-backtop>
</lay-tooltip>
</template>
@@ -51,20 +49,18 @@ export default {
:::
::: title 滚动容器
::: title 挂载容器
###### 通过设置 <code>target</code> 和 <code>position="absolute"</code>参数 ，可对特定容器进行返回顶部操作
###### 通过设置 <code>target</code> 和 <code>position="absolute"</code>参数，可对特定容器进行返回顶部操作
:::
::: demo
<template>
<!-- 需要用一个 div 包裹触发滚动事件的目标元素和 lay-backtop 组件 -->
<div class="scrollContainer" style="width:700px; height:300px;">
<div id="scrollContent" style="overflow-y:auto; overflow-x:auto; width:700px; height:300px;">
<p v-for="(n,index) in 50" :key="n" style="height:32px;border-bottom:0.5px solid #5FB878;margin-bottom:10px;line-height:35px">
{{index + ". &nbsp;layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式"}}
</p>
<div class="wrapper" style="width:700px; height:300px;">
<div id="scrollContent" style="overflow-y:auto; overflow-x:auto; width:700px; height:300px;background-color:whitesmoke;padding:10px;">
<lay-panel v-for="(n,index) in 50" :key="n" style="margin-top:5px;margin-bottom:5px;padding:10px;">内容</lay-panel>
</div>
<lay-backtop target="#scrollContent" :showHeight="100" :bottom="30" position="absolute"></lay-backtop>
</div>
@@ -80,26 +76,23 @@ export default {
::: table
| 属性 | 说明 | 类型 | 可选值 |
| ------------------------- | --------------------------------------------- | ------- | -------------------------- |
| <strong>通用属性</strong> |
| target | 可选，触发滚动事件的对象 | string | CSS 选择器 \| window(默认) |
| showHeight | 可选，滚动高度达到该值后显示回到顶部按钮 | number | 200(默认) |
| disabled | 可选，禁用点击返回顶部 | boolean | true \| false(默认) |
| <strong>组件样式</strong> |
| position | 可选，定位方式，特定容器内部需设置为 absolute | string | absolute \| fixed(默认) |
| right | 可选，按钮距离页面右边距，单位 px | number | 30(默认) |
| bottom | 可选，按钮距离页面底部位置，单位 px | number | 40(默认) |
| bgcolor | 可选，背景颜色 | string | \#9F9F9F(默认) |
| opacity | 可选，不透明度 | number | 0.0-1.0 |
| color | 可选，前景颜色 | string | #FFFFFF |
| borderRadius | 可选，添加圆角 | string | 2px(默认) |
| circular | 可选, 使用圆形按钮 | boolean | true \| false(默认)
| <strong>图标样式</strong> |
| icon | 可选,图标类型 | string | layui-icon-top(默认) |
| iconSize | 可选,图标大小 | number | 30 |
| iconPrefix | 可选,图标前缀 layui-icon layui-icon-top | string | layui-icon(默认) |
| iconColor | 可选,图标颜色 | string | #FFFFFF(默认) |
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| ------------ | --------------------------------------------- | ---------------- | ---------------- | ------------------------------ |
| target | 可选，触发滚动事件的对象 | string \| Window | `window` | `CSS/Element 选择器` `window` |
| showHeight | 可选，滚动高度达到该值后<br>显示回到顶部按钮 | number | `200` | — |
| disabled | 可选，禁用点击返回顶部 | boolean | `false` | `true` `false` |
| position | 可选，定位方式，特定容器内部<br>需设置为 absolute | string | `fixed` | `absolute` `fixed` |
| right | 可选，按钮距离页面右边距 | number | `30` | — |
| size | 可选，按钮大小 | string | —— | `medium` `small` |
| bottom | 可选，按钮距离页面底部位置 | number | `40` | `40` |
| bgcolor | 可选，背景颜色 | string | `#9F9F9F` | — |
| opacity | 可选，不透明度 | number | `0.95` | `0-1` |
| color | 可选，前景颜色 | string | `#FFFFFF` | — |
| borderRadius | 可选，添加圆角 | number \| string | `2` | e: 2 \| 2px \|50% |
| circle | 可选，使用圆形按钮 | boolean | `false` | `true` `false` |
| icon | 可选，图标类型 | string | `layui-icon-top` | `lay-icon`组件支持的所有类型 |
| iconSize | 可选，图标大小 | number | `30` | `30` |
| iconColor | 可选，图标颜色 | string | `#FFFFFF` | — |
:::
@@ -108,7 +101,7 @@ export default {
::: table
| 事件名 | 说明 | 回调参数 |
| 事件 | 描述 | 参数 |
| ------ | -------------------------- | -------- |
| click | 点击回到顶部按钮的回调函数 | event |
@@ -119,8 +112,8 @@ export default {
::: table
| 插槽名 | 说明 |
| 插槽 | 说明 |
| ------ | ---------- |
| — | 自定义内容 |
| default| 自定义内容 |
:::

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

@@ -1,7 +1,7 @@
::: title 基础使用
:::
::: demo 使用 lay-button 标签, 创建一个按钮
::: demo 使用 `lay-button` 标签, 创建一个按钮
<template>
<lay-button type="primary">原始按钮</lay-button>
@@ -29,7 +29,7 @@ export default {
::: title 简约按钮
:::
::: demo 使用 border 属性设置 主要按钮 边框主题
::: demo 使用 `border` 属性设置边框主题
<template>
<lay-button type="primary">原始按钮</lay-button>
@@ -57,7 +57,7 @@ export default {
::: title 按钮尺寸
:::
::: demo 传入 size 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs`
::: demo 传入 `size` 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs`
<template>
<lay-button type="primary" size="lg">原始按钮</lay-button>
@@ -85,7 +85,7 @@ export default {
::: title 流式按钮
:::
::: demo 传入 fluid 属性, 创建最大化按钮
::: demo 传入 `size` 属性, 创建最大化按钮
<template>
<lay-button type="primary" fluid>最大化按钮</lay-button>
@@ -111,7 +111,7 @@ export default {
::: title 圆角按钮
:::
::: demo 传入 radius 属性，创建圆角按钮
::: demo 传入 `radius` 属性，创建圆角按钮
<template>
<lay-button type="primary" radius>原始按钮</lay-button>
@@ -139,7 +139,7 @@ export default {
::: title 按钮分组
:::
::: demo 使用 lay-button-group 标签, 创建一个按钮组
::: demo 使用 `lay-button-group` 标签, 创建一个按钮组
<template>
<div>
@@ -173,7 +173,7 @@ export default {
::: title 图标按钮
:::
::: demo 结合 lay-icon 组件, 创建图标按钮
::: demo 结合 `lay-icon` 组件, 创建图标按钮
<template>
<lay-button-container>
@@ -199,7 +199,7 @@ export default {
::: title 按钮容器
:::
::: demo 使用 lay-button-container 标签, 创建一个按钮容器
::: demo 使用 `lay-button-container` 标签, 创建一个按钮容器
<template>
<lay-button-container>
@@ -226,7 +226,7 @@ export default {
::: title 加载按钮
:::
::: demo 传入 loading 属性, 控制按钮的加载状态
::: demo 传入 `loading` 属性, 控制按钮的加载状态
<template>
<lay-button-container>
@@ -255,7 +255,7 @@ export default {
::: title 事件处理
:::
::: demo 使用 @click 设置单击回调
::: demo 使用 `@click` 设置单击回调
<template>
<lay-button type="default" @click="clickHandle">单击事件</lay-button>
@@ -280,31 +280,57 @@ export default {
:::
::: title 按钮属性
::: title Button 属性
:::
::: table
| 属性 | 描述 | 可选值 |
| ------ | ------ | --------------------------------------------- |
| type | 主题 | `primary` `normal` `warm` `danger` `disabled` |
| size | 尺寸 | `lg` `sm` `xs` |
| fluid | 最大化 | `true` `false` |
| radius | 圆角 | `true` `false` |
| border | 边框 | `green` `blue` `orange` `red` `black` |
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| ----------- | -------- | ------- | --------- | ----------------------------------|
| type | 主题 | string | `primary` | `primary` `normal` `warm` `danger` |
| size | 尺寸 | string | -- | `lg` `sm` `xs` |
| fluid | 最大化 | boolean | `false` | `true` `false` |
| radius | 圆角 | boolean | `false` | `true` `false` |
| border | 边框 | string | `green` | `green` `blue` `orange` `red` |
| disabled | 禁用 | boolean | `false` | `true` `false` |
| loading | 加载 | boolean | `false` | `true` `false` |
| native-type | 原生类型 | string | `button` | `button` `submit` `reset` |
:::
::: title 按钮事件
::: title Button 插槽
:::
::: table
| 名称 | 描述 | 参数 |
| ----- | -------- | ---- |
| default | 默认内容 | -- |
:::
::: title Button Group 属性
:::
::: table
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| ----------- | -------- | ------- | --------- | ----------------------------------|
| - | - | - | - |
:::
::: title Button Group 插槽
:::
::: table
| 事件 | 描述 | 参数 |
| ----- | -------- | ---- |
| click | 单击事件 | `--` |
| default | 默认内容 | -- |
:::
::: comment
:::
:::

123
example/docs/zh-CN/components/countup.md Normal file
View File

@@ -0,0 +1,123 @@
::: title 基础使用
:::
::: demo
<template>
<h1 style="padding:20px 15px">
<lay-count-up :end-val="countVal" :decimalPlaces="2"></lay-count-up>
</h1>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const countVal = 2862.9888;
return {
}
}
}
</script>
:::
::: title 自定义前缀&后缀
:::
::: demo
<template>
<!-- 属性 -->
<lay-card style="width:200px;height:120px;display:inline-block; border:1px solid #eeeeee;box-shadow: 3px 3px 5px #888888">
<h1 style="padding:20px 15px">
<lay-count-up :end-val="countVal2" prefix="¥" suffix="↑"></lay-count-up>
</h1>
</lay-card>
<!-- 插槽 -->
<lay-card style="width:200px;height:120px;display:inline-block; margin-left:50px; border:1px solid #eeeeee;box-shadow: 3px 3px 5px #888888">
<h1 style="padding:20px 15px">
<lay-count-up :end-val="18" :duration="1">
<template #prefix>
<span style="font-size:75%">雷雨&nbsp</span>
</template>
<template #suffix>
<span style="font-size:75%">
<sub>℃</sub> ⛈
</span>
</template>
</lay-count-up>
</h1>
</lay-card>
<lay-button @click="handlerClick" type="primary" border="blue" size="sm" style="margin:0px 30px;">更新</lay-button>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const countVal2 = ref(98626);
const handlerClick = () => {
countVal2.value += 1000;
}
return {
handlerClick,
}
}
}
</script>
:::
::: title countUp 属性
:::
::: table
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| ------------- | ------------------------------------------------------------ | -------------- | ------ | -------------- |
| endVal | 显示的值 | number | `0` | — |
| decimalPlaces | 小数位数 | number | `0` | — |
| useGrouping | 使用千位分隔符 | boolean | `true` | `true` `false` |
| separator | 分隔符 | string | `,` | — |
| useEasing | 使用动画 | boolean | `true` | `true` `false` |
| duration | 动画持续时间 | number | `2` | — |
| prefix | 前缀 | string | — | — |
| suffix | 后缀 | string | — | — |
| option | 选项，用于多实例的总体设置，<br>props会覆盖option的属性，使用更灵活 | CountUpOptions | — | 参见[CountUpOptions](#opts) |
:::
::: title CountUpOptions 属性
:::
::: table
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| ------------- | ------------------------------------------------------------ | -------------- | ------ | -------------- |
| startVal | 开始值 | number | `0` | — |
| decimalPlaces | 小数位数 | number | `0` | — |
| useGrouping | 使用千位分隔符 | boolean | `true` | `true` `false` |
| separator | 分隔符 | string | `,` | — |
| useEasing | 使用动画 | boolean | `true` | `true` `false` |
| duration | 动画持续时间 | number | `2` | — |
| prefix | 前缀 | string | — | — |
| suffix | 后缀 | string | — | — | |
:::
::: title countUp 插槽
:::
::: table
| 名称 | 描述 | 参数 |
| ----- | -------- | ---- |
| prefix | 前缀 | -- |
| suffix | 后缀 | -- |
:::

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

@@ -1,7 +1,10 @@
::: title 横向
:::
::: demo
<template>
<lay-slider v-model="value1" :disabled="true"></lay-slider>
<lay-slider v-model="value1" :disabled="false"></lay-slider>
</template>
<script>
@@ -19,10 +22,12 @@ export default {
:::
::: title 纵向
:::
::: demo
<template>
<lay-slider v-model="value2" :vertical="vertical" :disabled="true"></lay-slider>
<lay-slider v-model="value2" :vertical="true" :disabled="true"></lay-slider>
</template>
<script>
@@ -31,11 +36,9 @@ import { ref } from 'vue'
export default {
setup() {
const vertical = ref(true)
const value2 = ref(10)
return {
vertical,
value2
}
}
@@ -44,5 +47,49 @@ export default {
:::
::: 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="value3" :range="true" :vertical="true"></lay-slider>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const value4 = ref([20,50])
return {
value4
}
}
}
</script>
:::
::: comment
:::
:::

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

@@ -270,24 +270,24 @@ export default {
:::
::: title 表格属性
::: title Table 属性
:::
::: table
| 属性 | 描述 | 可选值 |
| ------------------------ | ---------- | -------------- |
| columns | 列配置 | -- |
| dataSource | 数据源 | -- |
| checkbox | 开启复现框 | -- |
| id | 主键 | -- |
| selectedKeys ( v-model ) | 选中项 | -- |
| default-toolbar | 开启工具栏 | `lg` `md` `sm` |
| size | 尺寸 | -- |
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| -------------------- | ----------------------------- | ---- | ------ | -------------- |
| columns | 列配置 - [更多](#tableColumn) | -- | -- | -- |
| dataSource | 数据源 | -- | -- | -- |
| checkbox | 开启复选框 | -- | -- | -- |
| id | 主键 | -- | -- | -- |
| v-model:selectedKeys | 选中项 | -- | -- | -- |
| default-toolbar | 工具栏 | -- | -- | -- |
| size | 尺寸 | -- | -- | `lg` `md` `sm` |
:::
::: title 表格事件
::: title Table 事件
:::
::: table
@@ -299,29 +299,32 @@ export default {
:::
::: title 表格插槽
::: title Table 插槽
:::
::: table
| 插槽 | 描述 | 默认 |
| 插槽 | 描述 | 参数 |
| ------- | ------------ | ---- |
| toolbar | 自定义工具栏 | -- |
:::
::: title 列配置
### <div id="tableColumn"></div>
::: title Table Column 属性
:::
::: table
| 插槽 | 描述 | 默认 |
| ------- | ------------ | ---- |
| title | 列标题 | -- |
| key | 数据字段 | -- |
| customSlot | 插槽名称 | -- |
| width | 宽度 | -- |
| 插槽 | 描述 | 默认 |
| ---------- | ---------- | ---- |
| title | 列标题 | -- |
| key | 数据字段 | -- |
| customSlot | 自定义插槽 | -- |
| width | 宽度 | -- |
:::
::: comment
:::
:::