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: remove legacy slot usage

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@ -14,14 +14,12 @@
<demo-block :title="t('customStyle')">
<van-count-down :time="time">
<template v-slot="currentTime">
<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 #default="currentTime">
<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>
</template>
</van-count-down>
</demo-block>

27
src/form/demo/FieldTypeArea.vue
View File

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

15
src/form/demo/FieldTypeCalendar.vue
View File

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

27
src/form/demo/FieldTypeDatetimePicker.vue
View File

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

29
src/form/demo/FieldTypePicker.vue
View File

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

2
src/grid/test/__snapshots__/index.spec.js.snap
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__content van-grid-item__content--center van-hairline">
<div class="van-grid-item__icon-wrapper">
<div></div>
<div>Custom Icon</div>
<div class="van-info">1</div>
</div>
</div>

4
src/grid/test/index.spec.js
View File

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

8
src/radio/demo/index.vue
View File

@ -82,10 +82,14 @@
<van-radio-group v-model="radio5">
<van-cell-group>
<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 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-group>
</van-radio-group>

4
src/switch/demo/index.vue
View File

@ -30,7 +30,9 @@
<demo-block :title="t('withCell')">
<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>
</demo-block>
</demo-section>

2
src/tree-select/demo/index.vue
View File

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