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

Merge branch 'develop' of gitee.com:layui-vue/layui-vue into develop

Browse Source
This commit is contained in:
鄢鹏权
2021-12-28 03:01:56 +00:00
committed by Gitee
parent e50ef83e83 1c9d63d0d5
commit a2b7828026
15 changed files with 374 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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 | 后缀 | -- |
:::

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

@@ -119,11 +119,9 @@ export default {
}
</script>
:::
::: title 设置每页数量选择范围
::: title 完整分页
:::
::: demo
@@ -269,8 +267,6 @@ export default {
| showLimit | 显示每页数量 | `false` |
| showRefresh | 显示刷新按钮 | `false` |
| showSkip | 显示跳转 | `false` |
| pages | 显示切页按钮数量 | `10` |
| limits | 切换每页数量的选择项 | `[10,20,30,40,50]` |
:::
@@ -282,7 +278,6 @@ export default {
| 事件 | 描述 | 参数 |
| ---- | -------- | --------------------- |
| jump | 切换回调 | { current: 当前页面 } |
| limit | 每页数量变化 | 变化后的值 |
:::