docs(CountDown): update custom style demo

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

View File

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

View File

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

View File

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

View File

@ -351,8 +351,8 @@ exports[`toggle method 1`] = `
</div>
<div>
<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-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2016;" name="van-popup-slide-top"></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: 2018;" name="van-popup-slide-top"></div>
</div>
</div>
</div>
@ -365,7 +365,7 @@ exports[`toggle method 2`] = `
</div>
<div>
<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>