From a0112e3079cc50f6411c5a5f195313a6875fd8cb Mon Sep 17 00:00:00 2001 From: cunzaizhuyi <877824709@qq.com> Date: Thu, 15 Jun 2023 10:03:12 +0800 Subject: [PATCH] feat: add new RollingText component (#11911) --- packages/vant/src/rolling-text/README.md | 192 +++++ .../vant/src/rolling-text/README.zh-CN.md | 192 +++++ .../vant/src/rolling-text/RollingText.tsx | 121 ++++ .../vant/src/rolling-text/RollingTextItem.tsx | 72 ++ packages/vant/src/rolling-text/demo/index.vue | 186 +++++ packages/vant/src/rolling-text/index.less | 85 +++ packages/vant/src/rolling-text/index.ts | 12 + .../test/__snapshots__/index.spec.ts.snap | 669 ++++++++++++++++++ .../vant/src/rolling-text/test/index.spec.ts | 13 + packages/vant/src/rolling-text/types.ts | 0 packages/vant/vant.config.mjs | 8 + 11 files changed, 1550 insertions(+) create mode 100644 packages/vant/src/rolling-text/README.md create mode 100644 packages/vant/src/rolling-text/README.zh-CN.md create mode 100644 packages/vant/src/rolling-text/RollingText.tsx create mode 100644 packages/vant/src/rolling-text/RollingTextItem.tsx create mode 100644 packages/vant/src/rolling-text/demo/index.vue create mode 100644 packages/vant/src/rolling-text/index.less create mode 100644 packages/vant/src/rolling-text/index.ts create mode 100644 packages/vant/src/rolling-text/test/__snapshots__/index.spec.ts.snap create mode 100644 packages/vant/src/rolling-text/test/index.spec.ts create mode 100644 packages/vant/src/rolling-text/types.ts diff --git a/packages/vant/src/rolling-text/README.md b/packages/vant/src/rolling-text/README.md new file mode 100644 index 000000000..463aa5f1c --- /dev/null +++ b/packages/vant/src/rolling-text/README.md @@ -0,0 +1,192 @@ +# RollingText + +### Introduction + +Rolling text animation, which can roll numbers and other types of text. + +### Install + +Register component globally via `app.use`, refer to [Component Registration](#/en-US/advanced-usage#zu-jian-zhu-ce) for more registration ways. + +```js +import { createApp } from 'vue'; +import { RollingText } from 'vant'; + +const app = createApp(); +app.use(RollingText); +``` + +## Usage + +### Basic Usage + +```html + +``` + +### Set Rolling Direction + +You can set the rolling direction of the number by using the `direction` property. `up` represents rolling up. + +```html + +``` + +### Set Stop Order + +You can set the order of stopping the animation of each digit through the `stop-order` prop. By default, it stops from the higher digits. Setting `rtl` can stop from the ones digit. + +```html + +``` + +### Rolling Non-numeric Text + +You can set non-numeric content flip using the `text-array` props. + +```html + +``` + +```js +import { ref } from 'vue'; +export default { + setup() { + const textArray = ref([ + 'aaaaa', + 'bbbbb', + 'ccccc', + 'ddddd', + 'eeeee', + 'fffff', + 'ggggg', + ]); + return { textArray }; + }, +}; +``` + +### Custom Style + +```html + +``` + +```css +.my-rolling-text { + gap: 6px; + + .van-roll-single { + color: white; + background: deepskyblue; + border-radius: 5px; + width: 25px; + font-size: 20px; + } +} +``` + +### Manual Control + +After getting the component instance through `ref`, you can call the `start` and `reset` methods. + +```html + + + + + +``` + +```js +import { ref } from 'vue'; + +export default { + setup() { + const rollTextEl = ref(null); + const start = () => { + rollTextEl.value.start(); + }; + const reset = () => { + rollTextEl.value.reset(); + }; + return { rollTextEl, start, reset }; + }, +}; +``` + +## API + +### Props + +| Attribute | Description | Type | Default | +| --- | --- | --- | --- | +| start-num | Start number | _number_ | 0 | +| target-num | Target number | _number_ | - | +| text-array | Text array | _Array_ | [] | +| duration | Duration of the animation, in seconds | _number_ | 2 | +| direction | Rolling direction of the number, with `down` and `up` as the values | _string_ | `down` | +| auto-start | Whether to start the animation | _boolean_ | true | +| stop-order | Order of stopping the animation of each digit, with `ltr` and `rtl` as the values | _string_ | `ltr` | + +### Type Definition + +The component exports the following type definitions: + +```ts +import type { RollingTextProps } from 'vant'; +``` + +## Theming + +### CSS Variables + +The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). + +| Name | Default Value | Description | +| --- | --- | --- | +| --van-rolling-text-bg-color | _inherit_ | Background color of a single digit | +| --van-rolling-text-color | _white_ | Color of the number | +| --van-rolling-text-gap | _0px_ | Spacing between digits | +| --van-rolling-text-single-width | _15px_ | Width of a single digit | +| --van-rolling-text-single-border-r | _0px_ | Border radius of a single digit | diff --git a/packages/vant/src/rolling-text/README.zh-CN.md b/packages/vant/src/rolling-text/README.zh-CN.md new file mode 100644 index 000000000..17611fa30 --- /dev/null +++ b/packages/vant/src/rolling-text/README.zh-CN.md @@ -0,0 +1,192 @@ +# RollingText 翻滚文本动效 + +### 介绍 + +文本翻滚动效，可以翻滚数字和其他类型文本。 + +### 引入 + +通过以下方式来全局注册组件，更多注册方式请参考[组件注册](#/zh-CN/advanced-usage#zu-jian-zhu-ce)。 + +```js +import { createApp } from 'vue'; +import { RollingText } from 'vant'; + +const app = createApp(); +app.use(RollingText); +``` + +## 代码演示 + +### 基础用法 + +```html + +``` + +### 设置翻滚方向 + +可以通过 `direction` 属性设置数字的翻滚方向。`up` 表示向上翻滚。 + +```html + +``` + +### 设置各数位停止顺序 + +可以通过 `stop-order` 属性设置动画各个数位的停止先后顺序。默认先停止高位。设置 `rtl` 可以先从个位停止。 + +```html + +``` + +### 翻转非数字内容 + +可以通过 `text-array` 属性设置非数字内容的翻转。 + +```html + +``` + +```js +import { ref } from 'vue'; +export default { + setup() { + const textArray = ref([ + 'aaaaa', + 'bbbbb', + 'ccccc', + 'ddddd', + 'eeeee', + 'fffff', + 'ggggg', + ]); + return { textArray }; + }, +}; +``` + +### 自定义样式 + +```html + +``` + +```css +.my-rolling-text { + gap: 6px; + + .van-roll-single { + color: white; + background: deepskyblue; + border-radius: 5px; + width: 25px; + font-size: 20px; + } +} +``` + +### 手动控制 + +通过 ref 获取到组件实例后，可以调用 `start`、`reset` 方法。 + +```html + + + + + +``` + +```js +import { ref } from 'vue'; + +export default { + setup() { + const rollTextEl = ref(null); + const start = () => { + rollTextEl.value.start(); + }; + const reset = () => { + rollTextEl.value.reset(); + }; + return { rollTextEl, start, reset }; + }, +}; +``` + +## API + +### Props + +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| start-num | 开始数值 | _number_ | 0 | +| target-num | 目标数值 | _number_ | - | +| text-array | 内容数组，翻转非数字内容，需要传此参数 | _Array_ | [] | +| duration | 动画时长，单位为秒 | _number_ | 2 | +| direction | 数值翻滚方向，值为 `down` 和 `up` | _string_ | `down` | +| auto-start | 是否自动开始动画 | _boolean_ | true | +| stop-order | 各个数位动画停止先后顺序，值为 `ltr` 和 `rtl` | _string_ | `ltr` | + +### 类型定义 + +组件导出以下类型定义： + +```ts +import type { RollingTextProps } from 'vant'; +``` + +## 主题定制 + +### 样式变量 + +组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 + +| 名称 | 默认值 | 描述 | +| ---------------------------------- | --------- | ---------------- | +| --van-rolling-text-bg-color | _inherit_ | 单个数位背景色 | +| --van-rolling-text-color | _white_ | 数字颜色 | +| --van-rolling-text-gap | _0px_ | 数位之间的间隔 | +| --van-rolling-text-single-width | _15px_ | 单个数位宽度 | +| --van-rolling-text-single-border-r | _0px_ | 单个数位边框圆角 | diff --git a/packages/vant/src/rolling-text/RollingText.tsx b/packages/vant/src/rolling-text/RollingText.tsx new file mode 100644 index 000000000..bcf4eb0c5 --- /dev/null +++ b/packages/vant/src/rolling-text/RollingText.tsx @@ -0,0 +1,121 @@ +import { ref, defineComponent, computed, type ExtractPropTypes } from 'vue'; +import RollingTextItem from './RollingTextItem'; +// Utils +import { + createNamespace, + makeArrayProp, + makeNumberProp, + makeStringProp, + truthProp, +} from '../utils'; +import { useExpose } from '../composables/use-expose'; + +const [name, bem] = createNamespace('rolling-text'); + +export type RollingTextDirection = 'up' | 'down'; +export type RollingTextStopOrder = 'ltr' | 'rtl'; + +export const rollingTextProps = { + startNum: makeNumberProp(0), + targetNum: Number, + textArray: makeArrayProp(), + duration: makeNumberProp(2), + autoStart: truthProp, + direction: makeStringProp('down'), + stopOrder: makeStringProp('ltr'), +}; + +const CIRCLE_NUM = 2; + +export type RollingTextProps = ExtractPropTypes; + +export default defineComponent({ + name, + + props: rollingTextProps, + + setup(props) { + const isCustomType = computed( + () => Array.isArray(props.textArray) && props.textArray.length + ); + + const getTextArrByIdx = (idx: number) => { + if (!isCustomType.value) return []; + const result = []; + for (let i = 0; i < props.textArray.length; i++) { + result.push(props.textArray[i][idx]); + } + return result; + }; + + const targetNumArr = computed(() => { + if (isCustomType.value) + return props.textArray[props.textArray.length - 1].split(''); + return `${props.targetNum}`.split(''); + }); + + const startNumArr = () => { + const arr = `${props.startNum}`.split(''); + while (arr.length < targetNumArr.value.length) { + arr.unshift('0'); + } + return arr; + }; + + const getTwoFigure = (i: number) => [ + startNumArr()[i], + targetNumArr.value[i], + ]; + + const getFigureArr = (i: number) => { + const [start, target] = getTwoFigure(i); + const result = []; + for (let i = +start; i <= 9; i++) { + result.push(i); + } + for (let i = 0; i <= CIRCLE_NUM; i++) { + for (let j = 0; j <= 9; j++) { + result.push(j); + } + } + for (let i = 0; i <= +target; i++) { + result.push(i); + } + return result; + }; + + const getDelay = (i: number, len: number) => { + if (props.stopOrder === 'ltr') return 0.2 * i; + return 0.2 * (len - 1 - i); + }; + + const isStart = ref(false); + const start = () => { + isStart.value = true; + }; + + const reset = () => { + isStart.value = false; + }; + useExpose({ + start, + reset, + }); + + return () => ( +
+ {targetNumArr.value.map((figure, i) => ( + + ))} +
+ ); + }, +}); diff --git a/packages/vant/src/rolling-text/RollingTextItem.tsx b/packages/vant/src/rolling-text/RollingTextItem.tsx new file mode 100644 index 000000000..c42316755 --- /dev/null +++ b/packages/vant/src/rolling-text/RollingTextItem.tsx @@ -0,0 +1,72 @@ +import { defineComponent, computed } from 'vue'; + +// Utils +import { + createNamespace, + makeNumberProp, + makeArrayProp, + addUnit, +} from '../utils'; + +export const props = { + figureArr: makeArrayProp(), + delay: Number, + duration: makeNumberProp(2), + isStart: Boolean, + direction: String, +}; + +const HEIGHT = 40; + +export default defineComponent({ + name: 'RollSingle', + + props, + + setup(props) { + const downConfig = { + classNameSpace: 'roll-single-down', + aniClass: 'van-roll-single-down__ani', + dataHandle: () => props.figureArr.slice().reverse(), + }; + const upConfig = { + classNameSpace: 'roll-single-up', + aniClass: 'van-roll-single-up__ani', + dataHandle: () => props.figureArr, + }; + const directionConfig = props.direction === 'down' ? downConfig : upConfig; + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const [_, bem] = createNamespace(directionConfig.classNameSpace); + + const newFigureArr = computed(directionConfig.dataHandle); + const totalHeight = computed( + () => HEIGHT * props.figureArr.length - HEIGHT + ); + const translateValPx = computed(() => `-${totalHeight.value}px`); + const itemStyleObj = { + lineHeight: addUnit(HEIGHT), + }; + + const getStyle = () => ({ + height: addUnit(HEIGHT), + '--van-translate': translateValPx.value, + '--van-duration': props.duration + 's', + '--van-delay': props.delay + 's', + }); + + return () => ( +
+
+ {Array.isArray(newFigureArr.value) && + newFigureArr.value.map((figure) => ( +
+ {figure} +
+ ))} +
+
+ ); + }, +}); diff --git a/packages/vant/src/rolling-text/demo/index.vue b/packages/vant/src/rolling-text/demo/index.vue new file mode 100644 index 000000000..d2070064c --- /dev/null +++ b/packages/vant/src/rolling-text/demo/index.vue @@ -0,0 +1,186 @@ + + + + + diff --git a/packages/vant/src/rolling-text/index.less b/packages/vant/src/rolling-text/index.less new file mode 100644 index 000000000..b02164089 --- /dev/null +++ b/packages/vant/src/rolling-text/index.less @@ -0,0 +1,85 @@ +:root { + --van-rolling-text-bg-color: inherit; + --van-rolling-text-color: black; + --van-rolling-text-gap: 0px; + --van-rolling-text-single-width: 15px; + --van-rolling-text-single-border-r: 0px; +} + +.van-rolling-text { + display: inline-flex; + justify-content: center; + align-items: center; + gap: var(--van-rolling-text-gap); +} + +.van-roll-single-down { + width: var(--van-rolling-text-single-width); + border-radius: var(--van-rolling-text-single-border-r); + background-color: var(--van-rolling-text-bg-color); + color: var(--van-rolling-text-color); + overflow: hidden; + // 如果向下滚动，则起始是translate负值，到0 + @keyframes van-down { + 0% { + transform: translateY(var(--van-translate)); + } + 100% { + transform: translateY(0); + } + } + + &__box { + overflow: hidden; + transform: translateY(var(--van-translate)); + } + + &__ani { + animation: van-down var(--van-duration) ease-in-out var(--van-delay); + animation-name: van-down; + animation-timing-function: ease-in-out; + animation-iteration-count: 1; + animation-duration: var(--van-duration); + animation-fill-mode: both; + animation-delay: var(--van-delay); + } + + &__item { + text-align: center; + } +} + +.van-roll-single-up { + width: var(--van-rolling-text-single-width); + border-radius: var(--van-rolling-text-single-border-r); + background-color: var(--van-rolling-text-bg-color); + color: var(--van-rolling-text-color); + overflow: hidden; + // 如果是向上翻滚，则起始是0，到translate负值 + @keyframes van-up { + 0% { + transform: translateY(0); + } + 100% { + transform: translateY(var(--van-translate)); + } + } + + &__box { + overflow: hidden; + } + + &__ani { + animation: van-up var(--van-duration) ease-in-out var(--van-delay); + animation-iteration-count: 1; + animation-fill-mode: both; + //animation-name: van-up; + //animation-timing-function: ease-in-out; + //animation-duration: var(--van-duration); + //animation-delay: var(--van-delay); + } + + &__item { + text-align: center; + } +} diff --git a/packages/vant/src/rolling-text/index.ts b/packages/vant/src/rolling-text/index.ts new file mode 100644 index 000000000..178c84d55 --- /dev/null +++ b/packages/vant/src/rolling-text/index.ts @@ -0,0 +1,12 @@ +import { withInstall } from '../utils'; +import _RollingText from './RollingText'; + +export const RollingText = withInstall(_RollingText); +export default RollingText; +export type { RollingTextProps } from './RollingText'; + +declare module 'vue' { + export interface GlobalComponents { + Van_RollingText: typeof _RollingText; + } +} diff --git a/packages/vant/src/rolling-text/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/rolling-text/test/__snapshots__/index.spec.ts.snap new file mode 100644 index 000000000..0f0ae9546 --- /dev/null +++ b/packages/vant/src/rolling-text/test/__snapshots__/index.spec.ts.snap @@ -0,0 +1,669 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render comp 1`] = ` +
+
+
+
+ 1 +
+
+ 0 +
+
+ 9 +
+
+ 8 +
+
+ 7 +
+
+ 6 +
+
+ 5 +
+
+ 4 +
+
+ 3 +
+
+ 2 +
+
+ 1 +
+
+ 0 +
+
+ 9 +
+
+ 8 +
+
+ 7 +
+
+ 6 +
+
+ 5 +
+
+ 4 +
+
+ 3 +
+
+ 2 +
+
+ 1 +
+
+ 0 +
+
+ 9 +
+
+ 8 +
+
+ 7 +
+
+ 6 +
+
+ 5 +
+
+ 4 +
+
+ 3 +
+
+ 2 +
+
+ 1 +
+
+ 0 +
+
+ 9 +
+
+ 8 +
+
+ 7 +
+
+ 6 +
+
+ 5 +
+
+ 4 +
+
+ 3 +
+
+ 2 +
+
+ 1 +
+
+ 0 +
+
+
+
+
+
+ 2 +
+
+ 1 +
+
+ 0 +
+
+ 9 +
+
+ 8 +
+
+ 7 +
+
+ 6 +
+
+ 5 +
+
+ 4 +
+
+ 3 +
+
+ 2 +
+
+ 1 +
+
+ 0 +
+
+ 9 +
+
+ 8 +
+
+ 7 +
+
+ 6 +
+
+ 5 +
+
+ 4 +
+
+ 3 +
+
+ 2 +
+
+ 1 +
+
+ 0 +
+
+ 9 +
+
+ 8 +
+
+ 7 +
+
+ 6 +
+
+ 5 +
+
+ 4 +
+
+ 3 +
+
+ 2 +
+
+ 1 +
+
+ 0 +
+
+ 9 +
+
+ 8 +
+
+ 7 +
+
+ 6 +
+
+ 5 +
+
+ 4 +
+
+ 3 +
+
+ 2 +
+
+ 1 +
+
+ 0 +
+
+
+
+
+
+ 3 +
+
+ 2 +
+
+ 1 +
+
+ 0 +
+
+ 9 +
+
+ 8 +
+
+ 7 +
+
+ 6 +
+
+ 5 +
+
+ 4 +
+
+ 3 +
+
+ 2 +
+
+ 1 +
+
+ 0 +
+
+ 9 +
+
+ 8 +
+
+ 7 +
+
+ 6 +
+
+ 5 +
+
+ 4 +
+
+ 3 +
+
+ 2 +
+
+ 1 +
+
+ 0 +
+
+ 9 +
+
+ 8 +
+
+ 7 +
+
+ 6 +
+
+ 5 +
+
+ 4 +
+
+ 3 +
+
+ 2 +
+
+ 1 +
+
+ 0 +
+
+ 9 +
+
+ 8 +
+
+ 7 +
+
+ 6 +
+
+ 5 +
+
+ 4 +
+
+ 3 +
+
+ 2 +
+
+ 1 +
+
+ 0 +
+
+
+
+`; diff --git a/packages/vant/src/rolling-text/test/index.spec.ts b/packages/vant/src/rolling-text/test/index.spec.ts new file mode 100644 index 000000000..594251e78 --- /dev/null +++ b/packages/vant/src/rolling-text/test/index.spec.ts @@ -0,0 +1,13 @@ +import { RollingText } from '..'; +import { mount } from '../../../test'; + +test('should render comp', () => { + const wrapper = mount(RollingText, { + props: { + 'start-num': 0, + 'target-num': 123, + }, + }); + + expect(wrapper.html()).toMatchSnapshot(); +}); diff --git a/packages/vant/src/rolling-text/types.ts b/packages/vant/src/rolling-text/types.ts new file mode 100644 index 000000000..e69de29bb diff --git a/packages/vant/vant.config.mjs b/packages/vant/vant.config.mjs index be1609708..33fdca2bd 100644 --- a/packages/vant/vant.config.mjs +++ b/packages/vant/vant.config.mjs @@ -332,6 +332,10 @@ location.href = location.href.replace('youzan.github.io', 'vant-ui.github.io'); path: 'progress', title: 'Progress 进度条', }, + { + path: 'rolling-text', + title: 'RollingText 翻滚文本', + }, { path: 'skeleton', title: 'Skeleton 骨架屏', @@ -788,6 +792,10 @@ location.href = location.href.replace('youzan.github.io', 'vant-ui.github.io'); path: 'progress', title: 'Progress', }, + { + path: 'rolling-text', + title: 'RollingText', + }, { path: 'skeleton', title: 'Skeleton',