diff --git a/packages/devui-vue/devui/statistic/src/statistic-types.ts b/packages/devui-vue/devui/statistic/src/statistic-types.ts index db27965c2a..b70d8d5dc4 100644 --- a/packages/devui-vue/devui/statistic/src/statistic-types.ts +++ b/packages/devui-vue/devui/statistic/src/statistic-types.ts @@ -19,11 +19,11 @@ export const statisticProps = { }, groupSeparator: { type: String, - default: ',' + default: '' }, showGroupSeparator: { type: Boolean, - default: false + default: true }, titleStyle: { type: Object as PropType diff --git a/packages/devui-vue/devui/statistic/src/statistic.scss b/packages/devui-vue/devui/statistic/src/statistic.scss index 229050af10..ec9a59092d 100644 --- a/packages/devui-vue/devui/statistic/src/statistic.scss +++ b/packages/devui-vue/devui/statistic/src/statistic.scss @@ -21,11 +21,13 @@ &-prefix { margin-right: 6px; display: flex; + align-items: center; } &-suffix { margin-left: 6px; display: flex; + align-items: center; } &--value { diff --git a/packages/devui-vue/devui/statistic/src/utils/animation.ts b/packages/devui-vue/devui/statistic/src/utils/animation.ts index 778f51d51b..3b3eb192fa 100644 --- a/packages/devui-vue/devui/statistic/src/utils/animation.ts +++ b/packages/devui-vue/devui/statistic/src/utils/animation.ts @@ -72,7 +72,7 @@ export class Tween { this.keys = {} } - update() { + update(): void { this.time = Date.now() // delay some time if (this.time < this.startTime) { @@ -107,7 +107,7 @@ export class Tween { } // 递归 重绘 - start() { + start(): void { this.startTime = Date.now() + this.delay const tick = () => { this.update() @@ -122,7 +122,7 @@ export class Tween { tick() } - stop() { + stop(): void { cancelAnimationFrame(this.timer) this.timer = null } diff --git a/packages/devui-vue/devui/statistic/src/utils/easing.ts b/packages/devui-vue/devui/statistic/src/utils/easing.ts index 6dfa4ca2f8..4b0fb02fdc 100644 --- a/packages/devui-vue/devui/statistic/src/utils/easing.ts +++ b/packages/devui-vue/devui/statistic/src/utils/easing.ts @@ -2,15 +2,15 @@ const pow = Math.pow const sqrt = Math.sqrt -export const easeOutCubic = function (x: number) { +export const easeOutCubic = function (x: number): number { return 1 - pow(1 - x, 3) } -export const linear = (x) => x -export const easeOutExpo = function (x: number) { +export const linear = (x: number): number => x +export const easeOutExpo = function (x: number): number { return x === 1 ? 1 : 1 - pow(2, -10 * x) } -export const easeInOutExpo = function (x: number) { +export const easeInOutExpo = function (x: number): number { return x === 0 ? 0 : x === 1 @@ -19,9 +19,9 @@ export const easeInOutExpo = function (x: number) { ? pow(2, 20 * x - 10) / 2 : (2 - pow(2, -20 * x + 10)) / 2 } -export const easeInExpo = function (x: number) { +export const easeInExpo = function (x: number): number { return x === 0 ? 0 : pow(2, 10 * x - 10) } -export const easeInOutCirc = function (x: number) { +export const easeInOutCirc = function (x: number): number { return x < 0.5 ? (1 - sqrt(1 - pow(2 * x, 2))) / 2 : (sqrt(1 - pow(-2 * x + 2, 2)) + 1) / 2 } diff --git a/packages/devui-vue/docs/components/statistic/index.md b/packages/devui-vue/docs/components/statistic/index.md index 1fa5cbc798..4ae329547d 100644 --- a/packages/devui-vue/docs/components/statistic/index.md +++ b/packages/devui-vue/docs/components/statistic/index.md @@ -14,14 +14,14 @@ - - + group-separator="," + :value="5201314" /> - + @@ -39,13 +39,7 @@ - + @@ -54,13 +48,7 @@ - + @@ -87,30 +75,28 @@ title="Animation Growth Rate" :value="88.265" suffix="%" - :content-style="{ color: '#3f8600' }" :value-from="0" :start="start" :animation-duration="5000" animation - > - + > + - Start @@ -120,10 +106,10 @@ export default { data() { return { start: true, - controlStart: false, - }; - }, -}; + controlStart: false + } + } +} ``` @@ -144,9 +130,7 @@ export default { :showGroupSeparator="true" style="margin-right: 50px" > - + @@ -162,23 +146,57 @@ export default { ::: +### 自定义样式 + +提供自定义属性方便添加样式 +:::demo + +```vue + +``` + +::: + ### d-statistic -| 参数 | 类型 | 默认 | 说明 | -| :---: | :---: | :---: | :---: | -| title | `string \| v-slot` | - | 数值的标题 | -| extra | `string \| v-slot` | - | 额外内容 | -| value | `number \| string` | - | 数值内容 | -| group-separator | `string` | - | 设置千分位标识符 | -| precision | `number` | - | 设置数值精度 | -| suffix | `string \| v-slot` | - | 设置数值的后缀 | -| prefix | `string \| v-slot` | - | 设置数值的前缀 | -| title-style | `style` | - | 标题样式 | -| content-style | `style` | - | 内容样式 | -| animation-duration | `number` | 2000 | 动画持续时间 | -| delay | `number` | 0 | 延迟进行动画时间 | -| value-from | `number` | 0 | 动画初始值 | -| animation | `boolean` | false | 是否开启动画 | -| easing | `string` | quartOut | 数字动画效果 | -| start | `boolean` | false | 是否开始动画 | +| 参数 | 类型 | 默认 | 说明 | +| :----------------: | :----------------: | :------: | :--------------: | +| title | `string \| v-slot` | - | 数值的标题 | +| extra | `string \| v-slot` | - | 额外内容 | +| value | `number \| string` | - | 数值内容 | +| group-separator | `string` | - | 设置千分位标识符 | +| precision | `number` | - | 设置数值精度 | +| suffix | `string \| v-slot` | - | 设置数值的后缀 | +| prefix | `string \| v-slot` | - | 设置数值的前缀 | +| title-style | `style` | - | 标题样式 | +| content-style | `style` | - | 内容样式 | +| animation-duration | `number` | 2000 | 动画持续时间 | +| delay | `number` | 0 | 延迟进行动画时间 | +| value-from | `number` | 0 | 动画初始值 | +| animation | `boolean` | false | 是否开启动画 | +| easing | `string` | quartOut | 数字动画效果 | +| start | `boolean` | false | 是否开始动画 | diff --git a/packages/devui-vue/docs/en-US/components/statistic/index.md b/packages/devui-vue/docs/en-US/components/statistic/index.md index ba256b4143..5dbd83d870 100644 --- a/packages/devui-vue/docs/en-US/components/statistic/index.md +++ b/packages/devui-vue/docs/en-US/components/statistic/index.md @@ -44,7 +44,6 @@ Display statistics in cards. :value="68.28" :precision="3" suffix="%" - :content-style="{ color: '#3f8600' }" >