feat(countUp): 第一版，实现基础功能
This commit is contained in:
sight
parent
941a71838a
commit
6ffc8b67c5
123
example/docs/zh-CN/components/countup.md
Normal file
123
example/docs/zh-CN/components/countup.md
Normal 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%">雷雨 </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 | 后缀 | -- |
|
||||
|
||||
:::
|
||||
@ -333,6 +333,12 @@ export default {
|
||||
subTitle: 'backtop',
|
||||
path: '/zh-CN/components/backtop',
|
||||
},
|
||||
{
|
||||
id: 43,
|
||||
title: '数字滚动',
|
||||
subTitle: 'countup',
|
||||
path: '/zh-CN/components/countup',
|
||||
},
|
||||
]
|
||||
|
||||
const handleClick = function (menu) {
|
||||
|
||||
@ -304,6 +304,11 @@ const zhCN = [
|
||||
component: () => import('../../docs/zh-CN/components/backtop.md'),
|
||||
meta: { title: '返回顶部' },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/countup',
|
||||
component: () => import('../../docs/zh-CN/components/countup.md'),
|
||||
meta: { title: '数字滚动' },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@ -308,6 +308,12 @@ export default {
|
||||
subTitle: 'carousel',
|
||||
path: '/zh-CN/components/carousel',
|
||||
},
|
||||
{
|
||||
id: 43,
|
||||
title: '数字滚动',
|
||||
subTitle: 'countUp',
|
||||
path: '/zh-CN/components/countup',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@ -35,9 +35,10 @@
|
||||
"@layui/icons-vue": "^1.0.2",
|
||||
"@layui/layer-vue": "^1.2.2",
|
||||
"async-validator": "^4.0.7",
|
||||
"vue-router": "^4.0.12",
|
||||
"countup.js": "^2.0.8",
|
||||
"evtd": "^0.2.3",
|
||||
"vue": "^3.2.26"
|
||||
"vue": "^3.2.26",
|
||||
"vue-router": "^4.0.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.15.8",
|
||||
|
||||
@ -37,6 +37,7 @@ import LaySwitch from "./module/switch/index";
|
||||
import LayCollapse from "./module/collapse/index";
|
||||
import LayCollapseItem from "./module/collapseItem/index";
|
||||
import LayContainer from "./module/container/index";
|
||||
import LayCountUp from "./module/countUp/index";
|
||||
import LayMenu from "./module/menu/index";
|
||||
import LayMenuItem from "./module/menuItem/index";
|
||||
import LayMenuChildItem from "./module/menuChildItem/index";
|
||||
@ -128,6 +129,7 @@ const components: Record<string, IDefineComponent> = {
|
||||
LayModal,
|
||||
LayTooltip,
|
||||
LayInputNumber,
|
||||
LayCountUp,
|
||||
};
|
||||
|
||||
const install = (app: App, options?: InstallOptions): void => {
|
||||
|
||||
9
src/module/countUp/index.ts
Normal file
9
src/module/countUp/index.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import type { App } from "vue";
|
||||
import Component from "./index.vue";
|
||||
import type { IDefineComponent } from "../type/index";
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || "LayCountUp", Component);
|
||||
};
|
||||
|
||||
export default Component as IDefineComponent;
|
||||
74
src/module/countUp/index.vue
Normal file
74
src/module/countUp/index.vue
Normal file
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<slot name="prefix"></slot>
|
||||
<span ref="counterRef" style="font-family:sans-serif;" />
|
||||
<slot name="suffix"></slot>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import { CountUp } from 'countup.js'
|
||||
import type { CountUpOptions } from 'countup.js'
|
||||
|
||||
export interface LayCountupProps {
|
||||
endVal?: number; //显示的值
|
||||
decimalPlaces?: number; // 小数位数
|
||||
useGrouping?: boolean; // 是否使用千位分隔符
|
||||
separator?: string; // 千位分隔符
|
||||
useEasing?: boolean; // 使用动画
|
||||
duration?: number; // 动画持续时间
|
||||
prefix?: string; // 前缀
|
||||
suffix?: string; // 后缀
|
||||
option?: CountUpOptions; // 选项
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LayCountupProps>(), {
|
||||
endVal: 0,
|
||||
option: () => {
|
||||
return {}
|
||||
}
|
||||
});
|
||||
|
||||
const counterRef = ref<HTMLDivElement | null>(null);
|
||||
const instance = ref<CountUp | null>(null);
|
||||
const {decimalPlaces,useGrouping,separator,useEasing,duration,prefix,suffix} = props;
|
||||
const defaultOptions: CountUpOptions = {
|
||||
startVal: 0, // 开始数字
|
||||
decimalPlaces: decimalPlaces ? decimalPlaces : 0, // 小数位数
|
||||
useEasing: useEasing ? useEasing : true, // 使用缓动动画
|
||||
duration: duration ? duration : 2, // 动画持续时间
|
||||
useGrouping: useGrouping ? useGrouping : true, // 是否使用千位分隔符
|
||||
separator:separator ? separator : ",", // 千位分隔符
|
||||
decimal:".", // 小数点分隔符
|
||||
prefix: prefix ? prefix : "", // 前缀
|
||||
suffix: suffix ? suffix : "", // 后缀
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.endVal,
|
||||
() => {
|
||||
update(props.endVal)
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
createCounter()
|
||||
})
|
||||
|
||||
const createCounter = () => {
|
||||
if (!counterRef.value) return
|
||||
const opts: CountUpOptions = Object.assign(defaultOptions, props.option)
|
||||
instance.value = new CountUp(counterRef?.value, props.endVal, opts);
|
||||
start();
|
||||
}
|
||||
|
||||
const start = () => {
|
||||
if (!instance.value) return
|
||||
instance?.value.start();
|
||||
}
|
||||
|
||||
const update = (newEndVal: number) => {
|
||||
if (!instance.value) return
|
||||
instance?.value.update(newEndVal);
|
||||
}
|
||||
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user