blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs(CountDown): update custom style demo

Browse Source
This commit is contained in:
chenjiahan 2020-04-19 15:51:09 +08:00
parent 5b72e43393
commit 422a0f6402
4 changed files with 42 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/count-down/README.md
View File

@ -44,21 +44,27 @@ export default {
```html ```html
<van-count-down :time="time"> <van-count-down :time="time">
<template v-slot="timeData"> <template v-slot="timeData">
<span class="item">{{ timeData.hours }}</span> <span class="block">{{ timeData.hours }}</span>
<span class="item">{{ timeData.minutes }}</span> <span class="colon">:</span>
<span class="item">{{ timeData.seconds }}</span> <span class="block">{{ timeData.minutes }}</span>
<span class="colon">:</span>
<span class="block">{{ timeData.seconds }}</span>
</template> </template>
</van-count-down> </van-count-down>
<style> <style>
.item { .colon {
display: inline-block;
margin: 0 4px;
color: #ee0a24;
}
.block {
display: inline-block; display: inline-block;
width: 22px; width: 22px;
margin-right: 5px;
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
background-color: #1989fa; background-color: #ee0a24;
} }
</style> </style>
``` ```

16
src/count-down/README.zh-CN.md
View File

@ -52,21 +52,27 @@ export default {
```html ```html
<van-count-down :time="time"> <van-count-down :time="time">
<template v-slot="timeData"> <template v-slot="timeData">
<span class="item">{{ timeData.hours }}</span> <span class="block">{{ timeData.hours }}</span>
<span class="item">{{ timeData.minutes }}</span> <span class="colon">:</span>
<span class="item">{{ timeData.seconds }}</span> <span class="block">{{ timeData.minutes }}</span>
<span class="colon">:</span>
<span class="block">{{ timeData.seconds }}</span>
</template> </template>
</van-count-down> </van-count-down>
<style> <style>
.colon {
display: inline-block;
margin: 0 4px;
color: #ee0a24;
}
.item { .item {
display: inline-block; display: inline-block;
width: 22px; width: 22px;
margin-right: 5px;
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
background-color: #1989fa; background-color: #ee0a24;
} }
</style> </style>
``` ```

23
src/count-down/demo/index.vue
View File

@ -15,9 +15,13 @@
<demo-block :title="t('customStyle')"> <demo-block :title="t('customStyle')">
<van-count-down :time="time"> <van-count-down :time="time">
<template v-slot="currentTime"> <template v-slot="currentTime">
<span class="item">{{ currentTime.hours }}</span> <div>
<span class="item">{{ currentTime.minutes }}</span> <span class="block">{{ currentTime.hours }}</span>
<span class="item">{{ currentTime.seconds }}</span> <span class="colon">:</span>
<span class="block">{{ currentTime.minutes }}</span>
<span class="colon">:</span>
<span class="block">{{ currentTime.seconds }}</span>
</div>
</template> </template>
</van-count-down> </van-count-down>
</demo-block> </demo-block>
@ -103,15 +107,20 @@ export default {
margin-left: @padding-md; margin-left: @padding-md;
} }
.item { .colon {
display: inline-block;
margin: 0 4px;
color: @red;
}
.block {
display: inline-block; display: inline-block;
width: 22px; width: 22px;
margin-right: 5px;
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
background-color: @blue; background-color: @red;
border-radius: 2px; border-radius: 4px;
} }
.van-grid { .van-grid {

6
src/dropdown-menu/test/__snapshots__/index.spec.js.snap
View File

@ -351,8 +351,8 @@ exports[`toggle method 1`] = `
</div> </div>
<div> <div>
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;"> <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
<div class="van-overlay" style="z-index: 2015; animation-duration: 0s; position: absolute;" name="van-fade"></div> <div class="van-overlay" style="z-index: 2017; animation-duration: 0s; position: absolute;" name="van-fade"></div>
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2016;" name="van-popup-slide-top"></div> <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2018;" name="van-popup-slide-top"></div>
</div> </div>
</div> </div>
</div> </div>
@ -365,7 +365,7 @@ exports[`toggle method 2`] = `
</div> </div>
<div> <div>
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;"> <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2016; display: none;" name="van-popup-slide-top"></div> <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2018; display: none;" name="van-popup-slide-top"></div>
</div> </div>
</div> </div>
</div> </div>