blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

perf(RollingText): enhance compatibility and support dark mode (#11985)

Browse Source
This commit is contained in:
inottn 2023-06-16 21:05:35 +08:00 committed by GitHub
parent c489aa3fa0
commit c5792be650
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 72 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/vant/src/rolling-text/README.md
View File

@ -107,15 +107,12 @@ export default {
```css
.my-rolling-text {
gap: 6px;
}
.my-rolling-text .van-roll-single {
color: white;
background: deepskyblue;
border-radius: 5px;
width: 25px;
font-size: 20px;
--van-rolling-text-background: deepskyblue;
--van-rolling-text-color: white;
--van-rolling-text-font-size: 20px;
--van-rolling-text-gap: 6px;
--van-rolling-text-single-border-radius: 5px;
--van-rolling-text-single-width: 25px;
}
```
@ -211,8 +208,9 @@ The component provides the following CSS variables, which can be used to customi
| 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-background | _inherit_ | Background color of a single digit |
| --van-rolling-text-color | _var(--van-text-color)_ | Color of the number |
| --van-rolling-text-font-size | _var(--van-font-size-md)_ | Font size 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 |
| --van-rolling-text-single-border-radius | _0px_ | Border radius of a single digit |

30
packages/vant/src/rolling-text/README.zh-CN.md
View File

@ -107,15 +107,12 @@ export default {
```css
.my-rolling-text {
gap: 6px;
}
.my-rolling-text .van-roll-single {
color: white;
background: deepskyblue;
border-radius: 5px;
width: 25px;
font-size: 20px;
--van-rolling-text-background: deepskyblue;
--van-rolling-text-color: white;
--van-rolling-text-font-size: 20px;
--van-rolling-text-gap: 6px;
--van-rolling-text-single-border-radius: 5px;
--van-rolling-text-single-width: 25px;
}
```
@ -209,10 +206,11 @@ rollingTextRef.value?.start();
组件提供了下列 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_ | 单个数位边框圆角 |
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-rolling-text-background | _inherit_ | 单个数位背景色 |
| --van-rolling-text-color | _var(--van-text-color)_ | 数字颜色 |
| --van-rolling-text-font-size | _var(--van-font-size-md)_ | 字体大小 |
| --van-rolling-text-gap | _0px_ | 数位之间的间隔 |
| --van-rolling-text-single-width | _15px_ | 单个数位宽度 |
| --van-rolling-text-single-border-radius | _0px_ | 单个数位边框圆角 |

15
packages/vant/src/rolling-text/demo/index.vue
View File

@ -176,14 +176,11 @@ const reset = () => {
}
.my-rolling-text {
gap: 6px;
.van-roll-single {
color: white;
background: deepskyblue;
border-radius: 5px;
width: 25px;
font-size: 20px;
}
--van-rolling-text-background: deepskyblue;
--van-rolling-text-color: white;
--van-rolling-text-font-size: 20px;
--van-rolling-text-gap: 6px;
--van-rolling-text-single-border-radius: 5px;
--van-rolling-text-single-width: 25px;
}
</style>

96
packages/vant/src/rolling-text/index.less
View File

@ -1,68 +1,30 @@
:root {
--van-rolling-text-bg-color: inherit;
--van-rolling-text-color: black;
--van-rolling-text-background: inherit;
--van-rolling-text-color: var(--van-text-color);
--van-rolling-text-font-size: var(--van-font-size-md);
--van-rolling-text-gap: 0px;
--van-rolling-text-single-width: 15px;
--van-rolling-text-single-border-r: 0px;
--van-rolling-text-single-border-radius: 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);
font-size: var(--van-rolling-text-font-size);
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-down,
.van-roll-single-up {
margin-right: var(--van-rolling-text-gap);
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);
border-radius: var(--van-rolling-text-single-border-radius);
background: var(--van-rolling-text-background);
overflow: hidden;
// 如果是向上翻滚，则起始是0，到translate负值
@keyframes van-up {
0% {
transform: translateY(0);
}
100% {
transform: translateY(var(--van-translate));
}
&:last-child {
margin-right: 0;
}
&__box {
@ -73,13 +35,39 @@
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;
}
}
.van-roll-single-down {
&__box {
transform: translateY(var(--van-translate));
}
&__ani {
animation-name: van-down;
}
}
@keyframes van-down {
0% {
transform: translateY(var(--van-translate));
}
100% {
transform: translateY(0);
}
}
@keyframes van-up {
0% {
transform: translateY(0);
}
100% {
transform: translateY(var(--van-translate));
}
}