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: change slot to # (#5858)

Browse Source 
* docs(SwipeCell): change "slot" to "v-slot"

* docs(SwipeCell): change `v-slot` to`#`

* docs(cell): change `slot` to `#`

* docs(checkbox): change `slot` to `v-slot`

* docs(field): change `slot` to `v-slot`

* docs(checkbox): remove wrong comment

* docs(radio): change `slot` to `#`

* docs(search): change `slot` to `#`

* docs(slider): change `slot` to `#`

* docs(switch): change `slot` to `#`

* docs(PullRefresh): change `slot` to `#`

* docs(collapse): change `slot` to `#`

* docs(panel): change `slot` to `#`

* docs(swipe): change `slot` to `#`

* docs(navbar): change `slot` to `#`

* docs(tab): change `slot` to `#`

* docs(tabber): change `slot` to `#`

* docs(TreeSelect): change `slot` to `#`

* docs(card): change `slot` to `#`

* docs(submitBar): change `slot` to `#`

* docs(sku): change `slot` to `#` unsure

* docs(cell): delete waste blank line

* docs(panel): fix indentation

* docs(PullRefresh): change "count" to "Refresh Count"

* docs(radio): delete waste blank line

* docs(search): move props above the event

* docs(submitBar): delete waste `<span>`

* docs(swipCell): delete waste blank line

* docs(tabbar): merge `<img>` into one line
This commit is contained in:
lmx-Hexagram 2020-03-20 14:12:00 +08:00 committed by GitHub
parent ea159a08b3
commit f36961fe29
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
36 changed files with 277 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/card/README.md
View File

@ -49,14 +49,14 @@ Use slot to custom content.
price="2.00" price="2.00"
thumb="https://img.yzcdn.cn/vant/ipad.jpeg" thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
> >
<div slot="tags"> <template #tags>
<van-tag plain type="danger">Tag</van-tag> <van-tag plain type="danger">Tag</van-tag>
<van-tag plain type="danger">Tag</van-tag> <van-tag plain type="danger">Tag</van-tag>
</div> </template>
<div slot="footer"> <template #footer>
<van-button size="mini">Button</van-button> <van-button size="mini">Button</van-button>
<van-button size="mini">Button</van-button> <van-button size="mini">Button</van-button>
</div> </template>
</van-card> </van-card>
``` ```

8
src/card/README.zh-CN.md
View File

@ -51,14 +51,14 @@ Vue.use(Card);
title="商品标题" title="商品标题"
thumb="https://img.yzcdn.cn/vant/ipad.jpeg" thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
> >
<div slot="tags"> <template #tags>
<van-tag plain type="danger">标签</van-tag> <van-tag plain type="danger">标签</van-tag>
<van-tag plain type="danger">标签</van-tag> <van-tag plain type="danger">标签</van-tag>
</div> </template>
<div slot="footer"> <template #footer>
<van-button size="mini">按钮</van-button> <van-button size="mini">按钮</van-button>
<van-button size="mini">按钮</van-button> <van-button size="mini">按钮</van-button>
</div> </template>
</van-card> </van-card>
``` ```

23
src/cell/README.md
View File

@ -79,19 +79,22 @@ Vue.use(CellGroup);
### Use Slots ### Use Slots
```html ```html
<van-cell value="Content" is-link> <van-cell value="内容" is-link>
<template slot="title"> <!-- Use the title slot to customize the title -->
<span class="custom-title">Cell title</span> <template #title>
<van-tag type="danger">Tag</van-tag> <span class="custom-title">单元格</span>
<van-tag type="danger">标签</van-tag>
</template> </template>
</van-cell> </van-cell>
<van-cell title="Cell title" icon="shop-o"> <van-cell title="单元格" icon="shop-o">
<van-icon <!-- Use the right-icon slot to customize the right icon -->
slot="right-icon" <template #right-icon>
name="search" <van-icon
style="line-height: inherit;" name="search"
/> style="line-height: inherit;"
/>
</template>
</van-cell> </van-cell>
``` ```

13
src/cell/README.zh-CN.md
View File

@ -87,7 +87,7 @@ Vue.use(CellGroup);
```html ```html
<van-cell value="内容" is-link> <van-cell value="内容" is-link>
<!-- 使用 title 插槽来自定义标题 --> <!-- 使用 title 插槽来自定义标题 -->
<template slot="title"> <template #title>
<span class="custom-title">单元格</span> <span class="custom-title">单元格</span>
<van-tag type="danger">标签</van-tag> <van-tag type="danger">标签</van-tag>
</template> </template>
@ -95,11 +95,12 @@ Vue.use(CellGroup);
<van-cell title="单元格" icon="shop-o"> <van-cell title="单元格" icon="shop-o">
<!-- 使用 right-icon 插槽来自定义右侧图标 --> <!-- 使用 right-icon 插槽来自定义右侧图标 -->
<van-icon <template #right-icon>
slot="right-icon" <van-icon
name="search" name="search"
style="line-height: inherit;" style="line-height: inherit;"
/> />
</template>
</van-cell> </van-cell>
``` ```

24
src/checkbox/README.md
View File

@ -58,13 +58,21 @@ Use icon slot to custom icon
```html ```html
<van-checkbox v-model="checked"> <van-checkbox v-model="checked">
Custom Icon customize icon
<img <template #icon="props">
slot="icon" <img
slot-scope="props" class="img-icon"
:src="props.checked ? activeIcon : inactiveIcon" :src="props.checked ? activeIcon : inactiveIcon"
> />
</template>
</van-checkbox> </van-checkbox>
<style>
.img-icon {
height: 20px;
}
</style>
``` ```
```js ```js
@ -178,7 +186,9 @@ export default {
:title="`Checkbox ${item}`" :title="`Checkbox ${item}`"
@click="toggle(index)" @click="toggle(index)"
> >
<van-checkbox slot="right-icon" :name="item" ref="checkboxes" /> <template #right-icon>
<van-checkbox :name="item" ref="checkboxes" />
</template>
</van-cell> </van-cell>
</van-cell-group> </van-cell-group>
</van-checkbox-group> </van-checkbox-group>

32
src/checkbox/README.zh-CN.md
View File

@ -69,20 +69,30 @@ export default {
```html ```html
<van-checkbox v-model="checked"> <van-checkbox v-model="checked">
自定义图标 自定义图标
<img <template #icon="props">
slot="icon" <img
slot-scope="props" class="img-icon"
:src="props.checked ? activeIcon : inactiveIcon" :src="props.checked ? activeIcon : inactiveIcon"
> />
</template>
</van-checkbox> </van-checkbox>
<style>
.img-icon {
height: 20px;
}
</style>
``` ```
```js ```js
export default { export default {
data() { data() {
checked: true, return {
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png', checked: true,
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png' activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
}
} }
} }
``` ```
@ -196,7 +206,9 @@ export default {
:title="`复选框 ${item}`" :title="`复选框 ${item}`"
@click="toggle(index)" @click="toggle(index)"
> >
<van-checkbox slot="right-icon" :name="item" ref="checkboxes" /> <template #right-icon>
<van-checkbox :name="item" ref="checkboxes" />
</template>
</van-cell> </van-cell>
</van-cell-group> </van-cell-group>
</van-checkbox-group> </van-checkbox-group>
@ -206,7 +218,7 @@ export default {
export default { export default {
data() { data() {
return { return {
list: ['a', 'b'] list: ['a', 'b'],
result: [] result: []
}; };
}, },

4
src/collapse/README.md
View File

@ -61,7 +61,9 @@ export default {
```html ```html
<van-collapse v-model="activeNames"> <van-collapse v-model="activeNames">
<van-collapse-item name="1"> <van-collapse-item name="1">
<div slot="title">Title1 <van-icon name="question-o" /></div> <template #title>
<div>Title1 <van-icon name="question-o" /></div>
</template>
Content Content
</van-collapse-item> </van-collapse-item>
<van-collapse-item title="Title2" name="2" icon="shop-o"> <van-collapse-item title="Title2" name="2" icon="shop-o">

4
src/collapse/README.zh-CN.md
View File

@ -61,7 +61,9 @@ export default {
```html ```html
<van-collapse v-model="activeNames"> <van-collapse v-model="activeNames">
<van-collapse-item name="1"> <van-collapse-item name="1">
<div slot="title">标题1 <van-icon name="question-o" /></div> <template #title>
<div>标题1 <van-icon name="question-o" /></div>
</template>
内容 内容
</van-collapse-item> </van-collapse-item>
<van-collapse-item title="标题2" name="2" icon="shop-o"> <van-collapse-item title="标题2" name="2" icon="shop-o">

4
src/field/README.md
View File

@ -133,7 +133,9 @@ Use button slot to insert button
label="SMS" label="SMS"
placeholder="SMS" placeholder="SMS"
> >
<van-button slot="button" size="small" type="primary">Send SMS</van-button> <template #button>
<van-button size="small" type="primary">Send SMS</van-button>
</template>
</van-field> </van-field>
``` ```

4
src/field/README.zh-CN.md
View File

@ -149,7 +149,9 @@ export default {
label="短信验证码" label="短信验证码"
placeholder="请输入短信验证码" placeholder="请输入短信验证码"
> >
<van-button slot="button" size="small" type="primary">发送验证码</van-button> <template #button>
<van-button size="small" type="primary">发送验证码</van-button>
</template>
</van-field> </van-field>
``` ```

6
src/nav-bar/README.md
View File

@ -43,7 +43,9 @@ export default {
```html ```html
<van-nav-bar title="Title" left-text="Back" left-arrow> <van-nav-bar title="Title" left-text="Back" left-arrow>
<van-icon name="search" slot="right" /> <template #right>
<van-icon name="search"/>
</template>
</van-nav-bar> </van-nav-bar>
``` ```
@ -74,4 +76,4 @@ export default {
| Event | Description | Arguments | | Event | Description | Arguments |
|------|------|------| |------|------|------|
| click-left | Triggered when click left button | - | | click-left | Triggered when click left button | - |
| click-right | Triggered when click right button | - | | click-right | Triggered when click right button | - |

4
src/nav-bar/README.zh-CN.md
View File

@ -45,7 +45,9 @@ export default {
```html ```html
<van-nav-bar title="标题" left-text="返回" left-arrow> <van-nav-bar title="标题" left-text="返回" left-arrow>
<van-icon name="search" slot="right" /> <template #right>
<van-icon name="search"/>
</template>
</van-nav-bar> </van-nav-bar>
``` ```

4
src/panel/README.md
View File

@ -24,10 +24,10 @@ Vue.use(Panel);
```html ```html
<van-panel title="Title" desc="Description" status="Status"> <van-panel title="Title" desc="Description" status="Status">
<div>Content</div> <div>Content</div>
<div slot="footer"> <template #footer>
<van-button size="small">Button</van-button> <van-button size="small">Button</van-button>
<van-button size="small" type="danger">Button</van-button> <van-button size="small" type="danger">Button</van-button>
</div> </template>
</van-panel> </van-panel>
``` ```

4
src/panel/README.zh-CN.md
View File

@ -28,10 +28,10 @@ Vue.use(Panel);
```html ```html
<van-panel title="标题" desc="描述信息" status="状态"> <van-panel title="标题" desc="描述信息" status="状态">
<div>内容</div> <div>内容</div>
<div slot="footer"> <template #footer>
<van-button size="small">按钮</van-button> <van-button size="small">按钮</van-button>
<van-button size="small" type="danger">按钮</van-button> <van-button size="small" type="danger">按钮</van-button>
</div> </template>
</van-panel> </van-panel>
``` ```

38
src/pull-refresh/README.md
View File

@ -63,23 +63,27 @@ Use slots to custom tips
```html ```html
<van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh"> <van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
<img <template #pulling="props">
class="doge" <img
slot="pulling" class="doge"
slot-scope="props" src="https://img.yzcdn.cn/vant/doge.png"
src="https://img.yzcdn.cn/vant/doge.png" :style="{ transform: `scale(${props.distance / 80})` }"
:style="{ transform: `scale(${props.distance / 80})` }" />
> </template>
<img
class="doge" <template #loosing>
slot="loosing" <img
src="https://img.yzcdn.cn/vant/doge.png" class="doge"
> src="https://img.yzcdn.cn/vant/doge.png"
<img />
class="doge" </template>
slot="loading"
src="https://img.yzcdn.cn/vant/doge-fire.jpg" <template #loading>
> <img
class="doge"
src="https://img.yzcdn.cn/vant/doge-fire.jpg"
/>
</template>
<p>Refresh Count: {{ count }}</p> <p>Refresh Count: {{ count }}</p>
</van-pull-refresh> </van-pull-refresh>

38
src/pull-refresh/README.zh-CN.md
View File

@ -64,25 +64,29 @@ export default {
```html ```html
<van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh"> <van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
<!-- 下拉提示，通过 scale 实现一个缩放效果 --> <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
<img <template #pulling="props">
class="doge" <img
slot="pulling" class="doge"
slot-scope="props" src="https://img.yzcdn.cn/vant/doge.png"
src="https://img.yzcdn.cn/vant/doge.png" :style="{ transform: `scale(${props.distance / 80})` }"
:style="{ transform: `scale(${props.distance / 80})` }" />
> </template>
<!-- 释放提示 --> <!-- 释放提示 -->
<img <template #loosing>
class="doge" <img
slot="loosing" class="doge"
src="https://img.yzcdn.cn/vant/doge.png" src="https://img.yzcdn.cn/vant/doge.png"
> />
</template>
<!-- 加载提示 --> <!-- 加载提示 -->
<img <template #loading>
class="doge" <img
slot="loading" class="doge"
src="https://img.yzcdn.cn/vant/doge-fire.jpg" src="https://img.yzcdn.cn/vant/doge-fire.jpg"
> />
</template>
<p>刷新次数: {{ count }}</p> <p>刷新次数: {{ count }}</p>
</van-pull-refresh> </van-pull-refresh>

36
src/radio/README.md
View File

@ -86,21 +86,29 @@ Use icon slot to custom icon
<van-radio-group v-model="radio"> <van-radio-group v-model="radio">
<van-radio name="1"> <van-radio name="1">
Radio 1 Radio 1
<img <template #icon="props">
slot="icon" <img
slot-scope="props" class="img-icon"
:src="props.checked ? activeIcon : inactiveIcon" :src="props.checked ? activeIcon : inactiveIcon"
> >
</template>
</van-radio> </van-radio>
<van-radio name="2"> <van-radio name="2">
Radio 2 Radio 2
<img <template #icon="props">
slot="icon" <img
slot-scope="props" class="img-icon"
:src="props.checked ? activeIcon : inactiveIcon" :src="props.checked ? activeIcon : inactiveIcon"
> />
</template>
</van-radio> </van-radio>
</van-radio-group> </van-radio-group>
<style>
.img-icon {
height: 20px;
}
</style>>
``` ```
```js ```js
@ -130,10 +138,14 @@ export default {
<van-radio-group v-model="radio"> <van-radio-group v-model="radio">
<van-cell-group> <van-cell-group>
<van-cell title="Radio 1" clickable @click="radio = '1'"> <van-cell title="Radio 1" clickable @click="radio = '1'">
<van-radio slot="right-icon" name="1" /> <template #right-icon>
<van-radio name="1" />
</template>
</van-cell> </van-cell>
<van-cell title="Radio 2" clickable @click="radio = '2'"> <van-cell title="Radio 2" clickable @click="radio = '2'">
<van-radio slot="right-icon" name="2" /> <template #right-icon>
<van-radio name="2" />
</template>
</van-cell> </van-cell>
</van-cell-group> </van-cell-group>
</van-radio-group> </van-radio-group>

44
src/radio/README.zh-CN.md
View File

@ -96,29 +96,39 @@ export default {
<van-radio-group v-model="radio"> <van-radio-group v-model="radio">
<van-radio name="1"> <van-radio name="1">
单选框 1 单选框 1
<img <template #icon="props">
slot="icon" <img
slot-scope="props" class="img-icon"
:src="props.checked ? activeIcon : inactiveIcon" :src="props.checked ? activeIcon : inactiveIcon"
> >
</template>
</van-radio> </van-radio>
<van-radio name="2"> <van-radio name="2">
单选框 2 单选框 2
<img <template #icon="props">
slot="icon" <img
slot-scope="props" class="img-icon"
:src="props.checked ? activeIcon : inactiveIcon" :src="props.checked ? activeIcon : inactiveIcon"
> />
</template>
</van-radio> </van-radio>
</van-radio-group> </van-radio-group>
<style>
.img-icon {
height: 20px;
}
</style>
``` ```
```js ```js
export default { export default {
data() { data() {
radio: '1', return {
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png', radio: '1',
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png' activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
}
} }
} }
``` ```
@ -142,10 +152,14 @@ export default {
<van-radio-group v-model="radio"> <van-radio-group v-model="radio">
<van-cell-group> <van-cell-group>
<van-cell title="单选框 1" clickable @click="radio = '1'"> <van-cell title="单选框 1" clickable @click="radio = '1'">
<van-radio slot="right-icon" name="1" /> <template #right-icon>
<van-radio name="1" />
</template>
</van-cell> </van-cell>
<van-cell title="单选框 2" clickable @click="radio = '2'"> <van-cell title="单选框 2" clickable @click="radio = '2'">
<van-radio slot="right-icon" name="2" /> <template #right-icon>
<van-radio name="2" />
</template>
</van-cell> </van-cell>
</van-cell-group> </van-cell-group>
</van-radio-group> </van-radio-group>

5
src/search/README.md
View File

@ -103,9 +103,12 @@ Use `action` slot to custom right button, `cancel` event will no longer be trigg
v-model="value" v-model="value"
show-action show-action
shape="round" shape="round"
label="Address"
@search="onSearch" @search="onSearch"
> >
<div slot="action" @click="onSearch">Search</div> <template #action>
<div @click="onSearch">Search</div>
</template>
</van-search> </van-search>
``` ```

5
src/search/README.zh-CN.md
View File

@ -103,9 +103,12 @@ export default {
v-model="value" v-model="value"
show-action show-action
placeholder="请输入搜索关键词" placeholder="请输入搜索关键词"
label="地址"
@search="onSearch" @search="onSearch"
> >
<div slot="action" @click="onSearch">搜索</div> <template #action>
<div @click="onSearch">搜索</div>
</template>
</van-search> </van-search>
``` ```

4
src/sku/README.md
View File

@ -81,14 +81,14 @@ export default {
@add-cart="onAddCartClicked" @add-cart="onAddCartClicked"
> >
<!-- custom sku-header-price --> <!-- custom sku-header-price -->
<template slot="sku-header-price" slot-scope="props"> <template #sku-header-price="props">
<div class="van-sku__goods-price"> <div class="van-sku__goods-price">
<span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span> <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span>
</div> </div>
</template> </template>
<!-- custom sku actions --> <!-- custom sku actions -->
<template slot="sku-actions" slot-scope="props"> <template #sku-actions="props">
<div class="van-sku-actions"> <div class="van-sku-actions">
<van-button <van-button
square square

4
src/sku/README.zh-CN.md
View File

@ -83,14 +83,14 @@ export default {
@add-cart="onAddCartClicked" @add-cart="onAddCartClicked"
> >
<!-- 自定义 sku-header-price --> <!-- 自定义 sku-header-price -->
<template slot="sku-header-price" slot-scope="props"> <template #sku-header-price="props">
<div class="van-sku__goods-price"> <div class="van-sku__goods-price">
<span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span> <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span>
</div> </div>
</template> </template>
<!-- 自定义 sku actions --> <!-- 自定义 sku actions -->
<template slot="sku-actions" slot-scope="props"> <template #sku-actions="props">
<div class="van-sku-actions"> <div class="van-sku-actions">
<van-button <van-button
square square

8
src/slider/README.md
View File

@ -66,9 +66,11 @@ export default {
```html ```html
<van-slider v-model="value" active-color="#ee0a24"> <van-slider v-model="value" active-color="#ee0a24">
<div slot="button" class="custom-button"> <template #button>
{{ value }} <div class="custom-button">
</div> {{ value }}
</div>
</template>
</van-slider> </van-slider>
<style> <style>

8
src/slider/README.zh-CN.md
View File

@ -66,9 +66,11 @@ export default {
```html ```html
<van-slider v-model="value" active-color="#ee0a24"> <van-slider v-model="value" active-color="#ee0a24">
<div slot="button" class="custom-button"> <template #button>
{{ value }} <div class="custom-button">
</div> {{ value }}
</div>
</template>
</van-slider> </van-slider>
<style> <style>

6
src/submit-bar/README.md
View File

@ -60,9 +60,9 @@ Use slot to add custom contents.
@submit="onSubmit" @submit="onSubmit"
> >
<van-checkbox v-model="checked">Check</van-checkbox> <van-checkbox v-model="checked">Check</van-checkbox>
<span slot="tip"> <template #tip>
Some tips, <span @click="onClickEditAddress">Link</span> Some tips, <span @click="onClickEditAddress">Link</span>
</span> </template>
</van-submit-bar> </van-submit-bar>
``` ```

6
src/submit-bar/README.zh-CN.md
View File

@ -60,9 +60,9 @@ Vue.use(SubmitBar);
@submit="onSubmit" @submit="onSubmit"
> >
<van-checkbox v-model="checked">全选</van-checkbox> <van-checkbox v-model="checked">全选</van-checkbox>
<span slot="tip"> <template #tip>
你的收货地址不支持同城送, <span>修改地址</span> 你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
</span> </template>
</van-submit-bar> </van-submit-bar>
``` ```

26
src/swipe/README.md
View File

@ -120,11 +120,29 @@ export default {
<van-swipe-item>2</van-swipe-item> <van-swipe-item>2</van-swipe-item>
<van-swipe-item>3</van-swipe-item> <van-swipe-item>3</van-swipe-item>
<van-swipe-item>4</van-swipe-item> <van-swipe-item>4</van-swipe-item>
<template #indicator>
<div class="custom-indicator" slot="indicator"> <div class="custom-indicator">
{{ current + 1 }}/4 {{ current + 1 }}/4
</div> </div>
</template>
</van-swipe> </van-swipe>
<style>
.van-swipe-item {
background-color: #39a9ed;
font-size: 20px;
line-height: 150px;
text-align: center;
}
.custom-indicator {
position: absolute;
right: 5px;
bottom: 5px;
padding: 2px 5px;
font-size: 12px;
background: rgba(0, 0, 0, 0.1);
}
</style>
``` ```
```js ```js

26
src/swipe/README.zh-CN.md
View File

@ -126,11 +126,29 @@ export default {
<van-swipe-item>2</van-swipe-item> <van-swipe-item>2</van-swipe-item>
<van-swipe-item>3</van-swipe-item> <van-swipe-item>3</van-swipe-item>
<van-swipe-item>4</van-swipe-item> <van-swipe-item>4</van-swipe-item>
<template #indicator>
<div class="custom-indicator" slot="indicator"> <div class="custom-indicator">
{{ current + 1 }}/4 {{ current + 1 }}/4
</div> </div>
</template>
</van-swipe> </van-swipe>
<style>
.van-swipe-item {
background-color: #39a9ed;
font-size: 20px;
line-height: 150px;
text-align: center;
}
.custom-indicator {
position: absolute;
right: 5px;
bottom: 5px;
padding: 2px 5px;
font-size: 12px;
background: rgba(0, 0, 0, 0.1);
}
</style>
``` ```
```js ```js

4
src/switch/README.md
View File

@ -81,7 +81,9 @@ export default {
```html ```html
<van-cell center title="Title"> <van-cell center title="Title">
<van-switch v-model="checked" slot="right-icon" size="24" /> <template #right-icon>
<van-switch v-model="checked" size="24" />
</template>
</van-cell> </van-cell>
``` ```

4
src/switch/README.zh-CN.md
View File

@ -93,7 +93,9 @@ export default {
```html ```html
<van-cell center title="标题"> <van-cell center title="标题">
<van-switch v-model="checked" slot="right-icon" size="24" /> <template #right-icon>
<van-switch v-model="checked" size="24" />
</template>
</van-cell> </van-cell>
``` ```

6
src/tab/README.md
View File

@ -142,10 +142,10 @@ Use title slot to custom tab title
```html ```html
<van-tabs v-model="active"> <van-tabs v-model="active">
<van-tab v-for="index in 2"> <van-tab v-for="index in 2" :key="index">
<div slot="title"> <template #title>
<van-icon name="more-o" />tab <van-icon name="more-o" />tab
</div> </template>
content {{ index }} content {{ index }}
</van-tab> </van-tab>
</van-tabs> </van-tabs>

6
src/tab/README.zh-CN.md
View File

@ -146,10 +146,10 @@ export default {
```html ```html
<van-tabs v-model="active"> <van-tabs v-model="active">
<van-tab v-for="index in 2"> <van-tab v-for="index in 2" :key="index">
<div slot="title"> <template #title>
<van-icon name="more-o" />选项 <van-icon name="more-o" />选项
</div> </template>
内容 {{ index }} 内容 {{ index }}
</van-tab> </van-tab>
</van-tabs> </van-tabs>

8
src/tabbar/README.md
View File

@ -73,11 +73,9 @@ Use `icon` slot to custom icon
<van-tabbar v-model="active"> <van-tabbar v-model="active">
<van-tabbar-item badge="3"> <van-tabbar-item badge="3">
<span>Custom</span> <span>Custom</span>
<img <template #icon="props">
slot="icon" <img :src="props.active ? icon.active : icon.inactive"/>
slot-scope="props" </template>
:src="props.active ? icon.active : icon.inactive"
>
</van-tabbar-item> </van-tabbar-item>
<van-tabbar-item icon="search">Tab</van-tabbar-item> <van-tabbar-item icon="search">Tab</van-tabbar-item>
<van-tabbar-item icon="setting-o">Tab</van-tabbar-item> <van-tabbar-item icon="setting-o">Tab</van-tabbar-item>

8
src/tabbar/README.zh-CN.md
View File

@ -79,11 +79,9 @@ export default {
<van-tabbar v-model="active"> <van-tabbar v-model="active">
<van-tabbar-item badge="3"> <van-tabbar-item badge="3">
<span>自定义</span> <span>自定义</span>
<img <template #icon="props">
slot="icon" <img :src="props.active ? icon.active : icon.inactive"/>
slot-scope="props" </template>
:src="props.active ? icon.active : icon.inactive"
>
</van-tabbar-item> </van-tabbar-item>
<van-tabbar-item icon="search">标签</van-tabbar-item> <van-tabbar-item icon="search">标签</van-tabbar-item>
<van-tabbar-item icon="setting-o">标签</van-tabbar-item> <van-tabbar-item icon="setting-o">标签</van-tabbar-item>

2
src/tree-select/README.md
View File

@ -63,7 +63,7 @@ export default {
:items="items" :items="items"
:main-active-index.sync="active" :main-active-index.sync="active"
> >
<template slot="content"> <template #content>
<van-image v-if="active === 0" src="https://img.yzcdn.cn/vant/apple-1.jpg" /> <van-image v-if="active === 0" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
<van-image v-if="active === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" /> <van-image v-if="active === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
</template> </template>

2
src/tree-select/README.zh-CN.md
View File

@ -69,7 +69,7 @@ export default {
:items="items" :items="items"
:main-active-index.sync="active" :main-active-index.sync="active"
> >
<template slot="content"> <template #content>
<van-image v-if="active === 0" src="https://img.yzcdn.cn/vant/apple-1.jpg" /> <van-image v-if="active === 0" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
<van-image v-if="active === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" /> <van-image v-if="active === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
</template> </template>