diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts index 4a9434481..f207efa5b 100644 --- a/docs/.vitepress/config.mts +++ b/docs/.vitepress/config.mts @@ -1,7 +1,7 @@ /* * @Author: weisheng * @Date: 2023-07-27 10:26:09 - * @LastEditTime: 2024-07-19 13:29:51 + * @LastEditTime: 2024-08-08 17:38:21 * @LastEditors: weisheng * @Description: * @FilePath: \wot-design-uni\docs\.vitepress\config.mts @@ -366,8 +366,8 @@ export default defineConfig({ link: "/component/count-down", text: "CountDown 倒计时" }, { - link: "/component/statistic", - text: "Statistic 数值显示" + link: "/component/count-up", + text: "CountTo 数字滚动" }, { link: "/component/number-keyboard", text: "NumberKeyboard 数字键盘" diff --git a/docs/component/count-to.md b/docs/component/count-to.md new file mode 100644 index 000000000..4dd0aa554 --- /dev/null +++ b/docs/component/count-to.md @@ -0,0 +1,109 @@ + + +# CountTo 数字滚动$LOWEST_VERSION$ + +## 基本用法 + +设置 `endVal` 属性，表示最终值。 +设置 `startVal` 属性，表示起始值。 +设置 `duration` 属性，表示从起始值到结束值数字变动的时间。 +设置 `autoplay` 属性，表示是否自动播放。 +设置 `decimals` 属性，表示保留的小数位数。 +设置 `decimal` 属性，表示小数点符号。 +设置 `prefix` 属性，表示数字前缀。 +设置 `suffix` 属性，表示数字后缀。 +设置 `fontSize` 属性，表示字体大小。 +设置 `color` 属性，表示文本颜色。 + +```vue + + + + +``` + +## 手动控制 + +通过 `start` 方法开始倒计时，通过 `pause` 方法暂停倒计时，通过 `reset` 方法重置倒计时。 + +```html + + + + + + +``` + +```ts +import type { CountToInstance } from '@/uni_modules/wot-design-uni/components/wd-count-to/types' + +const countTo = ref() + +const start = () => { + countTo.value!.start() +} +const pause = () => { + countTo.value!.pause() +} +const reset = () => { + countTo.value!.reset() +} +``` + +## Attributes + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | +| --------- | ------------------------------ | ------- | -------------- | ------- | ---------------- | +| fontSize | 字体大小 | number | 16 | default | $LOWEST_VERSION$ | +| color | 文本颜色 | string | - | '' | $LOWEST_VERSION$ | +| startVal | 起始值 | number | - | 0 | $LOWEST_VERSION$ | +| endVal | 最终值 | number | - | 2024 | $LOWEST_VERSION$ | +| duration | 从起始值到结束值数字变动的时间 | number | - | 3000 | $LOWEST_VERSION$ | +| autoplay | 是否自动播放 | boolean | - | true | $LOWEST_VERSION$ | +| decimals | 保留的小数位数 | number | (需大于等于 0) | 0 | $LOWEST_VERSION$ | +| decimal | 小数点符号 | string | - | '.' | $LOWEST_VERSION$ | +| separator | 三位三位的隔开效果 | string | - | ',' | $LOWEST_VERSION$ | +| prefix | 前缀 | string | - | - | $LOWEST_VERSION$ | +| suffix | 后缀 | string | - | - | $LOWEST_VERSION$ | +| useEasing | 是否具有连贯性 | boolean | - | true | $LOWEST_VERSION$ | + +## Events + +| 事件名称 | 说明 | 参数 | 最低版本 | +| -------- | -------------------- | ---- | ---------------- | +| finish | 动画完成时触发 | — | $LOWEST_VERSION$ | +| mounted | 组件加载完成时时触发 | - | $LOWEST_VERSION$ | + +## Methods + +| 方法名 | 说明 | 参数 | 最低版本 | +| ------ | ----------------------------------------------------------- | ---- | ---------------- | +| start | 开始动画 | — | $LOWEST_VERSION$ | +| pause | 暂停动画 | — | $LOWEST_VERSION$ | +| reset | 重置动画，若 `auto-start` 为 `true`，重设后会自动开始倒计时 | — | $LOWEST_VERSION$ | + +## Slots + +| 名称 | 说明 | 最低版本 | +| ---- | -------- | -------- | +| default | 默认插槽 | $LOWEST_VERSION$ | +| prefix | 前缀插槽 | $LOWEST_VERSION$ | +| suffix | 后缀插槽 | $LOWEST_VERSION$ | + +## 外部样式类 + +| 类名 | 说明 | 最低版本 | +| ------------ | ---------- | ---------------- | +| custom-class | 根节点样式 | $LOWEST_VERSION$ | +| custom-style | 根节点样式 | $LOWEST_VERSION$ | diff --git a/docs/component/statistic.md b/docs/component/statistic.md deleted file mode 100644 index a854fecaa..000000000 --- a/docs/component/statistic.md +++ /dev/null @@ -1,58 +0,0 @@ - - -# Statistic 数值显示 - -> 1.3.6+ 版本提供 - -## 基本用法 - - -```vue - -``` - -## 插槽 - - -```vue - - - -``` - -## 自定义字体颜色 - -设置 `color` 属性。 - -```html - -``` - - -## Attributes - -| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | -| ---------- | ------------------------------------------------------------------ | ------- | ------------------------------------------------------------------ | ------- | ---------------- | -| fontSize | 字体大小 | number | 16 | default | 1.3.6+ | -|color | 文本颜色 | string | - | '' | $LOWEST_VERSION$| -|startVal | 起始值 | number | - | 0 | $LOWEST_VERSION$ | -|endVal | 最终值 | number | - | 2024 | $LOWEST_VERSION$ | -|duration | 从起始值到结束值数字变动的时间 | number | - | 3000 | $LOWEST_VERSION$ | -|autoplay | 是否自动播放 | boolean | - | true | $LOWEST_VERSION$ | -|decimals | 保留的小数位数 | number | (需大于等于0) | 0 | $LOWEST_VERSION$ | -|decimal | 小数点符号 | string | - | '.' | $LOWEST_VERSION$ | -|separator | 三位三位的隔开效果 | string | - | ',' | $LOWEST_VERSION$ | -|prefix | 前缀 | string | - | - | $LOWEST_VERSION$ | -|suffix | 后缀 | string | - | - | $LOWEST_VERSION$ | -|useEasing | 是否具有连贯性 | boolean | - | true | $LOWEST_VERSION$ | -|isFrequent | 是否隔一段时间数字跳动 | boolean | - | false | $LOWEST_VERSION$ | -|frequentTime | 跳动间隔时间 | number | - | 5000 | $LOWEST_VERSION$ | - - - -## 外部样式类 - -| 类名 | 说明 | 最低版本 | -| ------------ | ---------- | ---------------- | -| custom-class | 根节点样式 | $LOWEST_VERSION$ | -| custom-style | 根节点样式 | $LOWEST_VERSION$ | diff --git a/src/pages.json b/src/pages.json index 6f4acb792..2b205efd9 100644 --- a/src/pages.json +++ b/src/pages.json @@ -753,13 +753,13 @@ } }, { - "path": "pages/statistic/Index", - "name": "statistic", + "path": "pages/countTo/Index", + "name": "countTo", "style": { "mp-alipay": { "allowsBounceVertical": "NO" }, - "navigationBarTitleText": "Statistic 数值显示" + "navigationBarTitleText": "CountTo 数字滚动" } }, { diff --git a/src/pages/countTo/Index.vue b/src/pages/countTo/Index.vue new file mode 100644 index 000000000..500c3e424 --- /dev/null +++ b/src/pages/countTo/Index.vue @@ -0,0 +1,48 @@ + + + diff --git a/src/pages/index/Index.vue b/src/pages/index/Index.vue index 598bdd6f8..7d0593b6f 100644 --- a/src/pages/index/Index.vue +++ b/src/pages/index/Index.vue @@ -287,8 +287,8 @@ const list = ref([ name: 'CountDown 倒计时' }, { - id: 'statistic', - name: 'Statistic 数值显示' + id: 'countTo', + name: 'CountTo 数字滚动' }, { id: 'numberKeyboard', diff --git a/src/pages/statistic/Index.vue b/src/pages/statistic/Index.vue deleted file mode 100644 index 3f063fc2f..000000000 --- a/src/pages/statistic/Index.vue +++ /dev/null @@ -1,48 +0,0 @@ - - - diff --git a/src/uni_modules/wot-design-uni/components/common/util.ts b/src/uni_modules/wot-design-uni/components/common/util.ts index b6c2f5ea3..ac4d7a866 100644 --- a/src/uni_modules/wot-design-uni/components/common/util.ts +++ b/src/uni_modules/wot-design-uni/components/common/util.ts @@ -708,3 +708,15 @@ export function omitBy>(obj: O, predicate: (value: Object.keys(newObj).forEach((key) => predicate(newObj[key], key) && delete newObj[key]) // 遍历对象的键，删除值为不满足predicate的字段 return newObj } + +/** + * 缓动函数，用于在动画或过渡效果中根据时间参数计算当前值 + * @param t 当前时间，通常是从动画开始经过的时间 + * @param b 初始值，动画属性的初始值 + * @param c 变化量，动画属性的目标值与初始值的差值 + * @param d 持续时间，动画持续的总时间长度 + * @returns 计算出的当前值 + */ +export function easingFn(t: number = 0, b: number = 0, c: number = 0, d: number = 0): number { + return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b +} diff --git a/src/uni_modules/wot-design-uni/components/wd-statistic/index.scss b/src/uni_modules/wot-design-uni/components/wd-count-to/index.scss similarity index 87% rename from src/uni_modules/wot-design-uni/components/wd-statistic/index.scss rename to src/uni_modules/wot-design-uni/components/wd-count-to/index.scss index 095d7874e..0a9617840 100644 --- a/src/uni_modules/wot-design-uni/components/wd-statistic/index.scss +++ b/src/uni_modules/wot-design-uni/components/wd-count-to/index.scss @@ -2,6 +2,6 @@ @import '../common/abstracts/mixin'; -.wd-statistic{ +.wd-count-to{ vertical-align: bottom; } diff --git a/src/uni_modules/wot-design-uni/components/wd-statistic/types.ts b/src/uni_modules/wot-design-uni/components/wd-count-to/types.ts similarity index 70% rename from src/uni_modules/wot-design-uni/components/wd-statistic/types.ts rename to src/uni_modules/wot-design-uni/components/wd-count-to/types.ts index 17efbf0f4..f2c8b46bf 100644 --- a/src/uni_modules/wot-design-uni/components/wd-statistic/types.ts +++ b/src/uni_modules/wot-design-uni/components/wd-count-to/types.ts @@ -1,7 +1,7 @@ -import type { ExtractPropTypes } from 'vue' +import type { ComponentPublicInstance, ExtractPropTypes } from 'vue' import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props' -export const textProps = { +export const countToProps = { ...baseProps, // 字体大小 @@ -25,19 +25,17 @@ export const textProps = { endVal: makeNumberProp(2024), /** - * 从起始值到结束值数字变动的时间 + * 从起始值到结束值数字变动的时间，单位毫秒 * 类型：number * 默认值：3000 */ duration: makeNumberProp(3000), - /** - * 是否自动播放 + * 是否自动开始 * 类型：boolean * 默认值：true */ - autoplay: makeBooleanProp(true), - + autoStart: makeBooleanProp(true), /** * 保留的小数位数 * 类型：number @@ -82,28 +80,31 @@ export const textProps = { useEasing: makeBooleanProp(true), /** - * 是否隔一段时间数字跳动，这里的跳动是隔一段时间设置初始值 - * 类型：boolean - * 默认值：false + * 自定义根节点样式 */ - isFrequent: makeBooleanProp(false), + customStyle: makeStringProp(''), /** - * 跳动间隔时间 - * 类型：number - * 默认值：5000 + * 自定义根节点样式类 */ - frequentTime: makeNumberProp(5000), + customClass: makeStringProp('') +} +export type CountDownProps = ExtractPropTypes + +export type CountUpExpose = { /** - * 自定义根节点样式 + * 开始倒计时 */ - customStyle: makeStringProp(''), - + start: () => void /** - * 自定义根节点样式类 + * 暂停倒计时 */ - customClass: makeStringProp('') + pause: () => void + /** + * 重设倒计时，若 auto-start 为 true，重设后会自动开始倒计时 + */ + reset: () => void } -export type TextProps = ExtractPropTypes +export type CountToInstance = ComponentPublicInstance diff --git a/src/uni_modules/wot-design-uni/components/wd-count-to/wd-count-to.vue b/src/uni_modules/wot-design-uni/components/wd-count-to/wd-count-to.vue new file mode 100644 index 000000000..5e3c8814d --- /dev/null +++ b/src/uni_modules/wot-design-uni/components/wd-count-to/wd-count-to.vue @@ -0,0 +1,124 @@ + + + + + + + diff --git a/src/uni_modules/wot-design-uni/components/wd-statistic/requestAnimationFrame.ts b/src/uni_modules/wot-design-uni/components/wd-statistic/requestAnimationFrame.ts deleted file mode 100644 index 2c2ec73c7..000000000 --- a/src/uni_modules/wot-design-uni/components/wd-statistic/requestAnimationFrame.ts +++ /dev/null @@ -1,43 +0,0 @@ -let lastTime = 0 // 上一次调用 requestAnimationFrame 的时间戳 -const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器厂商的前缀 -let requestAnimationFrame = null // 用于请求下一帧的函数 -let cancelAnimationFrame = null // 用于取消下一帧的函数 -let prefix = '' - -// #ifdef H5 -// 尝试获取浏览器原生的 requestAnimationFrame 和 cancelAnimationFrame 方法 -requestAnimationFrame = window.requestAnimationFrame -cancelAnimationFrame = window.cancelAnimationFrame - -// 遍历浏览器前缀，获取兼容的 requestAnimationFrame 和 cancelAnimationFrame 实现 -for (let i = 0; i < prefixes.length; i++) { - if (requestAnimationFrame && cancelAnimationFrame) { - break - } - prefix = prefixes[i] - // 获取兼容的 requestAnimationFrame 方法 - requestAnimationFrame = requestAnimationFrame || window[`${prefix}RequestAnimationFrame`] - // 获取兼容的 cancelAnimationFrame 方法 - cancelAnimationFrame = cancelAnimationFrame || window[`${prefix}CancelAnimationFrame`] || window[`${prefix}CancelRequestAnimationFrame`] -} -// #endif - -// 如果当前浏览器不支持原生的 requestAnimationFrame 和 cancelAnimationFrame，则使用 setTimeout 作为替代方案 -if (!requestAnimationFrame || !cancelAnimationFrame) { - requestAnimationFrame = function (callback) { - const currTime = new Date().getTime() - // 计算到下次调用的时间，尽可能接近每秒60帧的效果 - const timeToCall = Math.max(0, 16 - (currTime - lastTime)) - const id = setTimeout(() => { - callback(currTime + timeToCall) - }, timeToCall) - lastTime = currTime + timeToCall - return id - } - - cancelAnimationFrame = function (id) { - clearTimeout(id) - } -} - -export { requestAnimationFrame, cancelAnimationFrame } diff --git a/src/uni_modules/wot-design-uni/components/wd-statistic/wd-statistic.vue b/src/uni_modules/wot-design-uni/components/wd-statistic/wd-statistic.vue deleted file mode 100644 index 893a1bf1c..000000000 --- a/src/uni_modules/wot-design-uni/components/wd-statistic/wd-statistic.vue +++ /dev/null @@ -1,217 +0,0 @@ - - - - - - - diff --git a/src/uni_modules/wot-design-uni/global.d.ts b/src/uni_modules/wot-design-uni/global.d.ts index 90e6a9590..0a35c62af 100644 --- a/src/uni_modules/wot-design-uni/global.d.ts +++ b/src/uni_modules/wot-design-uni/global.d.ts @@ -1,10 +1,10 @@ /* * @Author: weisheng * @Date: 2023-09-25 17:28:12 - * @LastEditTime: 2024-07-31 23:10:28 + * @LastEditTime: 2024-08-09 13:39:14 * @LastEditors: weisheng * @Description: - * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/global.d.ts + * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\global.d.ts * 记得注释 */ import '@vue/runtime-core' @@ -101,6 +101,7 @@ declare module '@vue/runtime-core' { WdIndexBar: typeof import('./components/wd-index-bar/wd-index-bar.vue')['default'] WdIndexAnchor: typeof import('./components/wd-index-anchor/wd-index-anchor.vue')['default'] WdText: typeof import('./components/wd-text/wd-text.vue')['default'] + WdCountTo: typeof import('./components/wd-count-to/wd-count-to.vue')['default'] } }