mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
chore(RollingText): rename text-array prop to text-list (#12008)
* chore(RollingText): rename test-array prop to text-list * docs: update type
This commit is contained in:
neverland
GitHub
parent
46939972f2
commit
f03d5653e8
@ -61,11 +61,11 @@ You can set the order of stopping the animation of each digit through the `stop-
|
||||
|
||||
### Roll Non-numeric Text
|
||||
|
||||
You can set non-numeric content flip using the `text-array` props.
|
||||
You can reverse non-numeric content by using the `text-list` prop. The component will rolling from the first item to the last item in the array. Please make sure that the array length is greater than or equal to 2, and that each item has the same length.
|
||||
|
||||
```html
|
||||
<van-rolling-text
|
||||
:text-array="textArray"
|
||||
:text-list="textList"
|
||||
:duration="1"
|
||||
:auto-start="false"
|
||||
stop-order="rtl"
|
||||
@ -78,7 +78,7 @@ import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const textArray = ref([
|
||||
const textList = ref([
|
||||
'aaaaa',
|
||||
'bbbbb',
|
||||
'ccccc',
|
||||
@ -87,7 +87,7 @@ export default {
|
||||
'fffff',
|
||||
'ggggg',
|
||||
]);
|
||||
return { textArray };
|
||||
return { textList };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -102,18 +102,18 @@ export default {
|
||||
:duration="2"
|
||||
stop-order="rtl"
|
||||
direction="up"
|
||||
:height="70"
|
||||
:height="54"
|
||||
/>
|
||||
```
|
||||
|
||||
```css
|
||||
.my-rolling-text {
|
||||
--van-rolling-text-background: deepskyblue;
|
||||
--van-rolling-text-background: #1989fa;
|
||||
--van-rolling-text-color: white;
|
||||
--van-rolling-text-font-size: 40px;
|
||||
--van-rolling-text-font-size: 24px;
|
||||
--van-rolling-text-gap: 6px;
|
||||
--van-rolling-text-item-border-radius: 5px;
|
||||
--van-rolling-text-item-width: 50px;
|
||||
--van-rolling-text-item-width: 40px;
|
||||
}
|
||||
```
|
||||
|
||||
@ -162,7 +162,7 @@ export default {
|
||||
| --- | --- | --- | --- |
|
||||
| start-num | Start number | _number_ | `0` |
|
||||
| target-num | Target number | _number_ | - |
|
||||
| text-array | Text array | _Array_ | `[]` |
|
||||
| text-list | Text array | _string[]_ | `[]` |
|
||||
| duration | Duration of the animation, in seconds | _number_ | `2` |
|
||||
| direction | Rolling direction of the text, with `down` and `up` as the values | _string_ | `down` |
|
||||
| auto-start | Whether to start the animation | _boolean_ | `true` |
|
||||
|
||||
@ -61,11 +61,11 @@ app.use(RollingText);
|
||||
|
||||
### 翻转非数字内容
|
||||
|
||||
可以通过 `text-array` 属性设置非数字内容的翻转。
|
||||
你可以使用 `text-list` 属性设置非数字内容的翻转。组件会从数组的第一项翻转到最后一项，请确保数组长度大于等于 2，以及每一项的长度一致。
|
||||
|
||||
```html
|
||||
<van-rolling-text
|
||||
:text-array="textArray"
|
||||
:text-list="textList"
|
||||
:duration="1"
|
||||
:auto-start="false"
|
||||
stop-order="rtl"
|
||||
@ -78,7 +78,7 @@ import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const textArray = ref([
|
||||
const textList = ref([
|
||||
'aaaaa',
|
||||
'bbbbb',
|
||||
'ccccc',
|
||||
@ -87,7 +87,7 @@ export default {
|
||||
'fffff',
|
||||
'ggggg',
|
||||
]);
|
||||
return { textArray };
|
||||
return { textList };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -102,18 +102,18 @@ export default {
|
||||
:duration="2"
|
||||
stop-order="rtl"
|
||||
direction="up"
|
||||
:height="70"
|
||||
:height="54"
|
||||
/>
|
||||
```
|
||||
|
||||
```css
|
||||
.my-rolling-text {
|
||||
--van-rolling-text-background: deepskyblue;
|
||||
--van-rolling-text-background: #1989fa;
|
||||
--van-rolling-text-color: white;
|
||||
--van-rolling-text-font-size: 40px;
|
||||
--van-rolling-text-font-size: 24px;
|
||||
--van-rolling-text-gap: 6px;
|
||||
--van-rolling-text-item-border-radius: 5px;
|
||||
--van-rolling-text-item-width: 50px;
|
||||
--van-rolling-text-item-width: 40px;
|
||||
}
|
||||
```
|
||||
|
||||
@ -162,7 +162,7 @@ export default {
|
||||
| --- | --- | --- | --- |
|
||||
| start-num | 开始数值 | _number_ | `0` |
|
||||
| target-num | 目标数值 | _number_ | - |
|
||||
| text-array | 内容数组，翻转非数字内容，需要传此参数 | _Array_ | `[]` |
|
||||
| text-list | 内容数组，用于翻转非数字内容 | _string[]_ | `[]` |
|
||||
| duration | 动画时长，单位为秒 | _number_ | `2` |
|
||||
| direction | 文本翻滚方向，值为 `down` 和 `up` | _string_ | `down` |
|
||||
| auto-start | 是否自动开始动画 | _boolean_ | `true` |
|
||||
|
||||
@ -34,7 +34,7 @@ const [name, bem] = createNamespace('rolling-text');
|
||||
export const rollingTextProps = {
|
||||
startNum: makeNumberProp(0),
|
||||
targetNum: Number,
|
||||
textArray: makeArrayProp<string>(),
|
||||
textList: makeArrayProp<string>(),
|
||||
duration: makeNumberProp(2),
|
||||
autoStart: truthProp,
|
||||
direction: makeStringProp<RollingTextDirection>('down'),
|
||||
@ -53,21 +53,21 @@ export default defineComponent({
|
||||
|
||||
setup(props) {
|
||||
const isCustomType = computed(
|
||||
() => Array.isArray(props.textArray) && props.textArray.length
|
||||
() => Array.isArray(props.textList) && props.textList.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]);
|
||||
for (let i = 0; i < props.textList.length; i++) {
|
||||
result.push(props.textList[i][idx]);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
const targetNumArr = computed(() => {
|
||||
if (isCustomType.value)
|
||||
return props.textArray[props.textArray.length - 1].split('');
|
||||
return props.textList[props.textList.length - 1].split('');
|
||||
return `${props.targetNum}`.split('');
|
||||
});
|
||||
|
||||
|
||||
@ -39,7 +39,7 @@ const isStart3 = ref(false);
|
||||
const isStart4 = ref(false);
|
||||
|
||||
const isStartNoNumberType = ref(false);
|
||||
const textArray = ref([
|
||||
const textList = ref([
|
||||
'aaaaa',
|
||||
'bbbbb',
|
||||
'ccccc',
|
||||
@ -114,7 +114,7 @@ const reset = () => {
|
||||
<demo-block :title="t('noNumberType')">
|
||||
<div>
|
||||
<VanRollingText
|
||||
:text-array="textArray"
|
||||
:text-list="textList"
|
||||
:duration="1"
|
||||
:auto-start="isStartNoNumberType"
|
||||
stop-order="rtl"
|
||||
@ -138,7 +138,7 @@ const reset = () => {
|
||||
:auto-start="isStart4"
|
||||
stop-order="rtl"
|
||||
direction="up"
|
||||
:height="70"
|
||||
:height="54"
|
||||
/>
|
||||
</div>
|
||||
</demo-block>
|
||||
@ -154,9 +154,9 @@ const reset = () => {
|
||||
:auto-start="false"
|
||||
stop-order="rtl"
|
||||
direction="up"
|
||||
:height="70"
|
||||
:height="54"
|
||||
/>
|
||||
<van-grid clickable :column-num="3" style="margin-top: 10px">
|
||||
<van-grid clickable :column-num="2" style="margin-top: 10px">
|
||||
<van-grid-item icon="play-circle-o" :text="t('start')" @click="start" />
|
||||
<van-grid-item icon="replay" :text="t('reset')" @click="reset" />
|
||||
</van-grid>
|
||||
@ -178,11 +178,11 @@ const reset = () => {
|
||||
}
|
||||
|
||||
.my-rolling-text {
|
||||
--van-rolling-text-background: deepskyblue;
|
||||
--van-rolling-text-background: #1989fa;
|
||||
--van-rolling-text-color: white;
|
||||
--van-rolling-text-font-size: 40px;
|
||||
--van-rolling-text-font-size: 24px;
|
||||
--van-rolling-text-gap: 6px;
|
||||
--van-rolling-text-item-border-radius: 5px;
|
||||
--van-rolling-text-item-width: 50px;
|
||||
--van-rolling-text-item-width: 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user