docs: remove legacy slot usage

This commit is contained in:
chenjiahan 2020-08-15 07:27:35 +08:00
parent b6e42d2344
commit 272a89423e
12 changed files with 78 additions and 68 deletions

View File

@ -43,7 +43,7 @@ export default {
```html ```html
<van-count-down :time="time"> <van-count-down :time="time">
<template v-slot="timeData"> <template #default="timeData">
<span class="block">{{ timeData.hours }}</span> <span class="block">{{ timeData.hours }}</span>
<span class="colon">:</span> <span class="colon">:</span>
<span class="block">{{ timeData.minutes }}</span> <span class="block">{{ timeData.minutes }}</span>

View File

@ -13,7 +13,7 @@ Vue.use(CountDown);
### 基础用法 ### 基础用法
`time`属性表示倒计时总时长,单位为毫秒 `time` 属性表示倒计时总时长,单位为毫秒
```html ```html
<van-count-down :time="time" /> <van-count-down :time="time" />
@ -31,7 +31,7 @@ export default {
### 自定义格式 ### 自定义格式
通过`format`属性设置倒计时文本的内容 通过 `format` 属性设置倒计时文本的内容
```html ```html
<van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" /> <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
@ -39,7 +39,7 @@ export default {
### 毫秒级渲染 ### 毫秒级渲染
倒计时默认每秒渲染一次,设置`millisecond`属性可以开启毫秒级渲染 倒计时默认每秒渲染一次,设置 `millisecond` 属性可以开启毫秒级渲染
```html ```html
<van-count-down millisecond :time="time" format="HH:mm:ss:SS" /> <van-count-down millisecond :time="time" format="HH:mm:ss:SS" />
@ -47,11 +47,11 @@ export default {
### 自定义样式 ### 自定义样式
通过插槽自定义倒计时的样式,`timeData`对象格式见下方表格 通过插槽自定义倒计时的样式,`timeData` 对象格式见下方表格
```html ```html
<van-count-down :time="time"> <van-count-down :time="time">
<template v-slot="timeData"> <template #default="timeData">
<span class="block">{{ timeData.hours }}</span> <span class="block">{{ timeData.hours }}</span>
<span class="colon">:</span> <span class="colon">:</span>
<span class="block">{{ timeData.minutes }}</span> <span class="block">{{ timeData.minutes }}</span>
@ -79,7 +79,7 @@ export default {
### 手动控制 ### 手动控制
通过 ref 获取到组件实例后,可以调用`start``pause``reset`方法 通过 ref 获取到组件实例后,可以调用 `start``pause``reset` 方法
```html ```html
<van-count-down <van-count-down

View File

@ -14,14 +14,12 @@
<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 #default="currentTime">
<div> <span class="block">{{ currentTime.hours }}</span>
<span class="block">{{ currentTime.hours }}</span> <span class="colon">:</span>
<span class="colon">:</span> <span class="block">{{ currentTime.minutes }}</span>
<span class="block">{{ currentTime.minutes }}</span> <span class="colon">:</span>
<span class="colon">:</span> <span class="block">{{ currentTime.seconds }}</span>
<span class="block">{{ currentTime.seconds }}</span>
</div>
</template> </template>
</van-count-down> </van-count-down>
</demo-block> </demo-block>

View File

@ -8,19 +8,20 @@
:placeholder="t('placeholder')" :placeholder="t('placeholder')"
@click="showArea = true" @click="showArea = true"
> >
<van-popup <template #extra>
v-model="showArea" <van-popup
round v-model="showArea"
slot="extra" round
position="bottom" position="bottom"
get-container="body" get-container="body"
> >
<van-area <van-area
:area-list="t('areaList')" :area-list="t('areaList')"
@confirm="onConfirm" @confirm="onConfirm"
@cancel="onCancel" @cancel="onCancel"
/> />
</van-popup> </van-popup>
</template>
</van-field> </van-field>
</template> </template>

View File

@ -8,13 +8,14 @@
:placeholder="t('placeholder')" :placeholder="t('placeholder')"
@click="showCalendar = true" @click="showCalendar = true"
> >
<van-calendar <template #extra>
v-model="showCalendar" <van-calendar
round v-model="showCalendar"
slot="extra" round
get-container="body" get-container="body"
@confirm="onConfirm" @confirm="onConfirm"
/> />
</template>
</van-field> </van-field>
</template> </template>

View File

@ -8,19 +8,20 @@
:placeholder="t('placeholder')" :placeholder="t('placeholder')"
@click="showPicker = true" @click="showPicker = true"
> >
<van-popup <template #extra>
v-model="showPicker" <van-popup
round v-model="showPicker"
slot="extra" round
position="bottom" position="bottom"
get-container="body" get-container="body"
> >
<van-datetime-picker <van-datetime-picker
type="time" type="time"
@confirm="onConfirm" @confirm="onConfirm"
@cancel="onCancel" @cancel="onCancel"
/> />
</van-popup> </van-popup>
</template>
</van-field> </van-field>
</template> </template>

View File

@ -8,20 +8,21 @@
:placeholder="t('placeholder')" :placeholder="t('placeholder')"
@click="showPicker = true" @click="showPicker = true"
> >
<van-popup <template #extra>
v-model="showPicker" <van-popup
round v-model="showPicker"
slot="extra" round
position="bottom" position="bottom"
get-container="body" get-container="body"
> >
<van-picker <van-picker
show-toolbar show-toolbar
:columns="t('textColumns')" :columns="t('textColumns')"
@confirm="onConfirm" @confirm="onConfirm"
@cancel="onCancel" @cancel="onCancel"
/> />
</van-popup> </van-popup>
</template>
</van-field> </van-field>
</template> </template>

View File

@ -14,7 +14,7 @@ exports[`render icon-slot 1`] = `
<div class="van-grid-item" style="flex-basis: 25%;"> <div class="van-grid-item" style="flex-basis: 25%;">
<div class="van-grid-item__content van-grid-item__content--center van-hairline"> <div class="van-grid-item__content van-grid-item__content--center van-hairline">
<div class="van-grid-item__icon-wrapper"> <div class="van-grid-item__icon-wrapper">
<div></div> <div>Custom Icon</div>
<div class="van-info">1</div> <div class="van-info">1</div>
</div> </div>
</div> </div>

View File

@ -50,7 +50,9 @@ test('render icon-slot', () => {
template: ` template: `
<van-grid icon-size="10"> <van-grid icon-size="10">
<van-grid-item info="1"> <van-grid-item info="1">
<div slot="icon" /> <template #icon>
<div>Custom Icon</div>
</template>
</van-grid-item> </van-grid-item>
</van-grid> </van-grid>
`, `,

View File

@ -82,10 +82,14 @@
<van-radio-group v-model="radio5"> <van-radio-group v-model="radio5">
<van-cell-group> <van-cell-group>
<van-cell clickable :title="t('radio') + 1" @click="radio5 = '1'"> <van-cell clickable :title="t('radio') + 1" @click="radio5 = '1'">
<van-radio name="1" slot="right-icon" /> <template #right-icon>
<van-radio name="1" />
</template>
</van-cell> </van-cell>
<van-cell clickable :title="t('radio') + 2" @click="radio5 = '2'"> <van-cell clickable :title="t('radio') + 2" @click="radio5 = '2'">
<van-radio name="2" slot="right-icon" /> <template #right-icon>
<van-radio name="2" />
</template>
</van-cell> </van-cell>
</van-cell-group> </van-cell-group>
</van-radio-group> </van-radio-group>

View File

@ -30,7 +30,9 @@
<demo-block :title="t('withCell')"> <demo-block :title="t('withCell')">
<van-cell center :title="t('title')"> <van-cell center :title="t('title')">
<van-switch v-model="checked5" slot="right-icon" size="24" /> <template #right-icon>
<van-switch v-model="checked5" size="24" />
</template>
</van-cell> </van-cell>
</demo-block> </demo-block>
</demo-section> </demo-section>

View File

@ -22,7 +22,7 @@
:items="simpleItems" :items="simpleItems"
:main-active-index.sync="activeIndex3" :main-active-index.sync="activeIndex3"
> >
<template slot="content"> <template #content>
<van-image <van-image
v-if="activeIndex3 === 0" v-if="activeIndex3 === 0"
:show-loading="false" :show-loading="false"