mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs: change slot to # (#5858)
* 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
GitHub
parent
ea159a08b3
commit
f36961fe29
@ -49,14 +49,14 @@ Use slot to custom content.
|
||||
price="2.00"
|
||||
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>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
</template>
|
||||
<template #footer>
|
||||
<van-button size="mini">Button</van-button>
|
||||
<van-button size="mini">Button</van-button>
|
||||
</div>
|
||||
</template>
|
||||
</van-card>
|
||||
```
|
||||
|
||||
|
||||
@ -51,14 +51,14 @@ Vue.use(Card);
|
||||
title="商品标题"
|
||||
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>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
</template>
|
||||
<template #footer>
|
||||
<van-button size="mini">按钮</van-button>
|
||||
<van-button size="mini">按钮</van-button>
|
||||
</div>
|
||||
</template>
|
||||
</van-card>
|
||||
```
|
||||
|
||||
|
||||
@ -79,19 +79,22 @@ Vue.use(CellGroup);
|
||||
### Use Slots
|
||||
|
||||
```html
|
||||
<van-cell value="Content" is-link>
|
||||
<template slot="title">
|
||||
<span class="custom-title">Cell title</span>
|
||||
<van-tag type="danger">Tag</van-tag>
|
||||
<van-cell value="内容" is-link>
|
||||
<!-- Use the title slot to customize the title -->
|
||||
<template #title>
|
||||
<span class="custom-title">单元格</span>
|
||||
<van-tag type="danger">标签</van-tag>
|
||||
</template>
|
||||
</van-cell>
|
||||
|
||||
<van-cell title="Cell title" icon="shop-o">
|
||||
<van-icon
|
||||
slot="right-icon"
|
||||
name="search"
|
||||
style="line-height: inherit;"
|
||||
/>
|
||||
<van-cell title="单元格" icon="shop-o">
|
||||
<!-- Use the right-icon slot to customize the right icon -->
|
||||
<template #right-icon>
|
||||
<van-icon
|
||||
name="search"
|
||||
style="line-height: inherit;"
|
||||
/>
|
||||
</template>
|
||||
</van-cell>
|
||||
```
|
||||
|
||||
|
||||
@ -87,7 +87,7 @@ Vue.use(CellGroup);
|
||||
```html
|
||||
<van-cell value="内容" is-link>
|
||||
<!-- 使用 title 插槽来自定义标题 -->
|
||||
<template slot="title">
|
||||
<template #title>
|
||||
<span class="custom-title">单元格</span>
|
||||
<van-tag type="danger">标签</van-tag>
|
||||
</template>
|
||||
@ -95,11 +95,12 @@ Vue.use(CellGroup);
|
||||
|
||||
<van-cell title="单元格" icon="shop-o">
|
||||
<!-- 使用 right-icon 插槽来自定义右侧图标 -->
|
||||
<van-icon
|
||||
slot="right-icon"
|
||||
name="search"
|
||||
style="line-height: inherit;"
|
||||
/>
|
||||
<template #right-icon>
|
||||
<van-icon
|
||||
name="search"
|
||||
style="line-height: inherit;"
|
||||
/>
|
||||
</template>
|
||||
</van-cell>
|
||||
```
|
||||
|
||||
|
||||
@ -58,13 +58,21 @@ Use icon slot to custom icon
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked">
|
||||
Custom Icon
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? activeIcon : inactiveIcon"
|
||||
>
|
||||
customize icon
|
||||
<template #icon="props">
|
||||
<img
|
||||
class="img-icon"
|
||||
:src="props.checked ? activeIcon : inactiveIcon"
|
||||
/>
|
||||
</template>
|
||||
|
||||
</van-checkbox>
|
||||
|
||||
<style>
|
||||
.img-icon {
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```js
|
||||
@ -178,7 +186,9 @@ export default {
|
||||
:title="`Checkbox ${item}`"
|
||||
@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-group>
|
||||
</van-checkbox-group>
|
||||
|
||||
@ -69,20 +69,30 @@ export default {
|
||||
```html
|
||||
<van-checkbox v-model="checked">
|
||||
自定义图标
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? activeIcon : inactiveIcon"
|
||||
>
|
||||
<template #icon="props">
|
||||
<img
|
||||
class="img-icon"
|
||||
:src="props.checked ? activeIcon : inactiveIcon"
|
||||
/>
|
||||
</template>
|
||||
|
||||
</van-checkbox>
|
||||
|
||||
<style>
|
||||
.img-icon {
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
checked: true,
|
||||
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
|
||||
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
|
||||
return {
|
||||
checked: true,
|
||||
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}`"
|
||||
@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-group>
|
||||
</van-checkbox-group>
|
||||
@ -206,7 +218,7 @@ export default {
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: ['a', 'b']
|
||||
list: ['a', 'b'],
|
||||
result: []
|
||||
};
|
||||
},
|
||||
|
||||
@ -61,7 +61,9 @@ export default {
|
||||
```html
|
||||
<van-collapse v-model="activeNames">
|
||||
<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
|
||||
</van-collapse-item>
|
||||
<van-collapse-item title="Title2" name="2" icon="shop-o">
|
||||
|
||||
@ -61,7 +61,9 @@ export default {
|
||||
```html
|
||||
<van-collapse v-model="activeNames">
|
||||
<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 title="标题2" name="2" icon="shop-o">
|
||||
|
||||
@ -133,7 +133,9 @@ Use button slot to insert button
|
||||
label="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>
|
||||
```
|
||||
|
||||
|
||||
@ -149,7 +149,9 @@ export default {
|
||||
label="短信验证码"
|
||||
placeholder="请输入短信验证码"
|
||||
>
|
||||
<van-button slot="button" size="small" type="primary">发送验证码</van-button>
|
||||
<template #button>
|
||||
<van-button size="small" type="primary">发送验证码</van-button>
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
|
||||
@ -43,7 +43,9 @@ export default {
|
||||
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -74,4 +76,4 @@ export default {
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| click-left | Triggered when click left button | - |
|
||||
| click-right | Triggered when click right button | - |
|
||||
| click-right | Triggered when click right button | - |
|
||||
|
||||
@ -45,7 +45,9 @@ export default {
|
||||
|
||||
```html
|
||||
<van-nav-bar title="标题" left-text="返回" left-arrow>
|
||||
<van-icon name="search" slot="right" />
|
||||
<template #right>
|
||||
<van-icon name="search"/>
|
||||
</template>
|
||||
</van-nav-bar>
|
||||
```
|
||||
|
||||
|
||||
@ -24,10 +24,10 @@ Vue.use(Panel);
|
||||
```html
|
||||
<van-panel title="Title" desc="Description" status="Status">
|
||||
<div>Content</div>
|
||||
<div slot="footer">
|
||||
<template #footer>
|
||||
<van-button size="small">Button</van-button>
|
||||
<van-button size="small" type="danger">Button</van-button>
|
||||
</div>
|
||||
</template>
|
||||
</van-panel>
|
||||
```
|
||||
|
||||
|
||||
@ -28,10 +28,10 @@ Vue.use(Panel);
|
||||
```html
|
||||
<van-panel title="标题" desc="描述信息" status="状态">
|
||||
<div>内容</div>
|
||||
<div slot="footer">
|
||||
<template #footer>
|
||||
<van-button size="small">按钮</van-button>
|
||||
<van-button size="small" type="danger">按钮</van-button>
|
||||
</div>
|
||||
</template>
|
||||
</van-panel>
|
||||
```
|
||||
|
||||
|
||||
@ -63,23 +63,27 @@ Use slots to custom tips
|
||||
|
||||
```html
|
||||
<van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
|
||||
<img
|
||||
class="doge"
|
||||
slot="pulling"
|
||||
slot-scope="props"
|
||||
src="https://img.yzcdn.cn/vant/doge.png"
|
||||
:style="{ transform: `scale(${props.distance / 80})` }"
|
||||
>
|
||||
<img
|
||||
class="doge"
|
||||
slot="loosing"
|
||||
src="https://img.yzcdn.cn/vant/doge.png"
|
||||
>
|
||||
<img
|
||||
class="doge"
|
||||
slot="loading"
|
||||
src="https://img.yzcdn.cn/vant/doge-fire.jpg"
|
||||
>
|
||||
<template #pulling="props">
|
||||
<img
|
||||
class="doge"
|
||||
src="https://img.yzcdn.cn/vant/doge.png"
|
||||
:style="{ transform: `scale(${props.distance / 80})` }"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #loosing>
|
||||
<img
|
||||
class="doge"
|
||||
src="https://img.yzcdn.cn/vant/doge.png"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #loading>
|
||||
<img
|
||||
class="doge"
|
||||
src="https://img.yzcdn.cn/vant/doge-fire.jpg"
|
||||
/>
|
||||
</template>
|
||||
<p>Refresh Count: {{ count }}</p>
|
||||
</van-pull-refresh>
|
||||
|
||||
|
||||
@ -64,25 +64,29 @@ export default {
|
||||
```html
|
||||
<van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
|
||||
<!-- 下拉提示，通过 scale 实现一个缩放效果 -->
|
||||
<img
|
||||
class="doge"
|
||||
slot="pulling"
|
||||
slot-scope="props"
|
||||
src="https://img.yzcdn.cn/vant/doge.png"
|
||||
:style="{ transform: `scale(${props.distance / 80})` }"
|
||||
>
|
||||
<template #pulling="props">
|
||||
<img
|
||||
class="doge"
|
||||
src="https://img.yzcdn.cn/vant/doge.png"
|
||||
:style="{ transform: `scale(${props.distance / 80})` }"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- 释放提示 -->
|
||||
<img
|
||||
class="doge"
|
||||
slot="loosing"
|
||||
src="https://img.yzcdn.cn/vant/doge.png"
|
||||
>
|
||||
<template #loosing>
|
||||
<img
|
||||
class="doge"
|
||||
src="https://img.yzcdn.cn/vant/doge.png"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- 加载提示 -->
|
||||
<img
|
||||
class="doge"
|
||||
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>刷新次数: {{ count }}</p>
|
||||
</van-pull-refresh>
|
||||
|
||||
|
||||
@ -86,21 +86,29 @@ Use icon slot to custom icon
|
||||
<van-radio-group v-model="radio">
|
||||
<van-radio name="1">
|
||||
Radio 1
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? activeIcon : inactiveIcon"
|
||||
>
|
||||
<template #icon="props">
|
||||
<img
|
||||
class="img-icon"
|
||||
:src="props.checked ? activeIcon : inactiveIcon"
|
||||
>
|
||||
</template>
|
||||
</van-radio>
|
||||
<van-radio name="2">
|
||||
Radio 2
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? activeIcon : inactiveIcon"
|
||||
>
|
||||
<template #icon="props">
|
||||
<img
|
||||
class="img-icon"
|
||||
:src="props.checked ? activeIcon : inactiveIcon"
|
||||
/>
|
||||
</template>
|
||||
</van-radio>
|
||||
</van-radio-group>
|
||||
|
||||
<style>
|
||||
.img-icon {
|
||||
height: 20px;
|
||||
}
|
||||
</style>>
|
||||
```
|
||||
|
||||
```js
|
||||
@ -130,10 +138,14 @@ export default {
|
||||
<van-radio-group v-model="radio">
|
||||
<van-cell-group>
|
||||
<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 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-group>
|
||||
</van-radio-group>
|
||||
|
||||
@ -96,29 +96,39 @@ export default {
|
||||
<van-radio-group v-model="radio">
|
||||
<van-radio name="1">
|
||||
单选框 1
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? activeIcon : inactiveIcon"
|
||||
>
|
||||
<template #icon="props">
|
||||
<img
|
||||
class="img-icon"
|
||||
:src="props.checked ? activeIcon : inactiveIcon"
|
||||
>
|
||||
</template>
|
||||
</van-radio>
|
||||
<van-radio name="2">
|
||||
单选框 2
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? activeIcon : inactiveIcon"
|
||||
>
|
||||
<template #icon="props">
|
||||
<img
|
||||
class="img-icon"
|
||||
:src="props.checked ? activeIcon : inactiveIcon"
|
||||
/>
|
||||
</template>
|
||||
</van-radio>
|
||||
</van-radio-group>
|
||||
|
||||
<style>
|
||||
.img-icon {
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
radio: '1',
|
||||
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
|
||||
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
|
||||
return {
|
||||
radio: '1',
|
||||
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-cell-group>
|
||||
<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 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-group>
|
||||
</van-radio-group>
|
||||
|
||||
@ -103,9 +103,12 @@ Use `action` slot to custom right button, `cancel` event will no longer be trigg
|
||||
v-model="value"
|
||||
show-action
|
||||
shape="round"
|
||||
label="Address"
|
||||
@search="onSearch"
|
||||
>
|
||||
<div slot="action" @click="onSearch">Search</div>
|
||||
<template #action>
|
||||
<div @click="onSearch">Search</div>
|
||||
</template>
|
||||
</van-search>
|
||||
```
|
||||
|
||||
|
||||
@ -103,9 +103,12 @@ export default {
|
||||
v-model="value"
|
||||
show-action
|
||||
placeholder="请输入搜索关键词"
|
||||
label="地址"
|
||||
@search="onSearch"
|
||||
>
|
||||
<div slot="action" @click="onSearch">搜索</div>
|
||||
<template #action>
|
||||
<div @click="onSearch">搜索</div>
|
||||
</template>
|
||||
</van-search>
|
||||
```
|
||||
|
||||
|
||||
@ -81,14 +81,14 @@ export default {
|
||||
@add-cart="onAddCartClicked"
|
||||
>
|
||||
<!-- custom sku-header-price -->
|
||||
<template slot="sku-header-price" slot-scope="props">
|
||||
<template #sku-header-price="props">
|
||||
<div class="van-sku__goods-price">
|
||||
<span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- custom sku actions -->
|
||||
<template slot="sku-actions" slot-scope="props">
|
||||
<template #sku-actions="props">
|
||||
<div class="van-sku-actions">
|
||||
<van-button
|
||||
square
|
||||
|
||||
@ -83,14 +83,14 @@ export default {
|
||||
@add-cart="onAddCartClicked"
|
||||
>
|
||||
<!-- 自定义 sku-header-price -->
|
||||
<template slot="sku-header-price" slot-scope="props">
|
||||
<template #sku-header-price="props">
|
||||
<div class="van-sku__goods-price">
|
||||
<span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 自定义 sku actions -->
|
||||
<template slot="sku-actions" slot-scope="props">
|
||||
<template #sku-actions="props">
|
||||
<div class="van-sku-actions">
|
||||
<van-button
|
||||
square
|
||||
|
||||
@ -66,9 +66,11 @@ export default {
|
||||
|
||||
```html
|
||||
<van-slider v-model="value" active-color="#ee0a24">
|
||||
<div slot="button" class="custom-button">
|
||||
{{ value }}
|
||||
</div>
|
||||
<template #button>
|
||||
<div class="custom-button">
|
||||
{{ value }}
|
||||
</div>
|
||||
</template>
|
||||
</van-slider>
|
||||
|
||||
<style>
|
||||
|
||||
@ -66,9 +66,11 @@ export default {
|
||||
|
||||
```html
|
||||
<van-slider v-model="value" active-color="#ee0a24">
|
||||
<div slot="button" class="custom-button">
|
||||
{{ value }}
|
||||
</div>
|
||||
<template #button>
|
||||
<div class="custom-button">
|
||||
{{ value }}
|
||||
</div>
|
||||
</template>
|
||||
</van-slider>
|
||||
|
||||
<style>
|
||||
|
||||
@ -60,9 +60,9 @@ Use slot to add custom contents.
|
||||
@submit="onSubmit"
|
||||
>
|
||||
<van-checkbox v-model="checked">Check</van-checkbox>
|
||||
<span slot="tip">
|
||||
Some tips, <span @click="onClickEditAddress">Link</span>
|
||||
</span>
|
||||
<template #tip>
|
||||
Some tips, <span @click="onClickEditAddress">Link</span>
|
||||
</template>
|
||||
</van-submit-bar>
|
||||
```
|
||||
|
||||
|
||||
@ -60,9 +60,9 @@ Vue.use(SubmitBar);
|
||||
@submit="onSubmit"
|
||||
>
|
||||
<van-checkbox v-model="checked">全选</van-checkbox>
|
||||
<span slot="tip">
|
||||
你的收货地址不支持同城送, <span>修改地址</span>
|
||||
</span>
|
||||
<template #tip>
|
||||
你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
|
||||
</template>
|
||||
</van-submit-bar>
|
||||
```
|
||||
|
||||
|
||||
@ -120,11 +120,29 @@ export default {
|
||||
<van-swipe-item>2</van-swipe-item>
|
||||
<van-swipe-item>3</van-swipe-item>
|
||||
<van-swipe-item>4</van-swipe-item>
|
||||
|
||||
<div class="custom-indicator" slot="indicator">
|
||||
{{ current + 1 }}/4
|
||||
</div>
|
||||
<template #indicator>
|
||||
<div class="custom-indicator">
|
||||
{{ current + 1 }}/4
|
||||
</div>
|
||||
</template>
|
||||
</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
|
||||
|
||||
@ -126,11 +126,29 @@ export default {
|
||||
<van-swipe-item>2</van-swipe-item>
|
||||
<van-swipe-item>3</van-swipe-item>
|
||||
<van-swipe-item>4</van-swipe-item>
|
||||
|
||||
<div class="custom-indicator" slot="indicator">
|
||||
{{ current + 1 }}/4
|
||||
</div>
|
||||
<template #indicator>
|
||||
<div class="custom-indicator">
|
||||
{{ current + 1 }}/4
|
||||
</div>
|
||||
</template>
|
||||
</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
|
||||
|
||||
@ -81,7 +81,9 @@ export default {
|
||||
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
|
||||
|
||||
@ -93,7 +93,9 @@ export default {
|
||||
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
|
||||
|
||||
@ -142,10 +142,10 @@ Use title slot to custom tab title
|
||||
|
||||
```html
|
||||
<van-tabs v-model="active">
|
||||
<van-tab v-for="index in 2">
|
||||
<div slot="title">
|
||||
<van-tab v-for="index in 2" :key="index">
|
||||
<template #title>
|
||||
<van-icon name="more-o" />tab
|
||||
</div>
|
||||
</template>
|
||||
content {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
@ -146,10 +146,10 @@ export default {
|
||||
|
||||
```html
|
||||
<van-tabs v-model="active">
|
||||
<van-tab v-for="index in 2">
|
||||
<div slot="title">
|
||||
<van-tab v-for="index in 2" :key="index">
|
||||
<template #title>
|
||||
<van-icon name="more-o" />选项
|
||||
</div>
|
||||
</template>
|
||||
内容 {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
@ -73,11 +73,9 @@ Use `icon` slot to custom icon
|
||||
<van-tabbar v-model="active">
|
||||
<van-tabbar-item badge="3">
|
||||
<span>Custom</span>
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.active ? icon.active : icon.inactive"
|
||||
>
|
||||
<template #icon="props">
|
||||
<img :src="props.active ? icon.active : icon.inactive"/>
|
||||
</template>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">Tab</van-tabbar-item>
|
||||
|
||||
@ -79,11 +79,9 @@ export default {
|
||||
<van-tabbar v-model="active">
|
||||
<van-tabbar-item badge="3">
|
||||
<span>自定义</span>
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.active ? icon.active : icon.inactive"
|
||||
>
|
||||
<template #icon="props">
|
||||
<img :src="props.active ? icon.active : icon.inactive"/>
|
||||
</template>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
|
||||
|
||||
@ -63,7 +63,7 @@ export default {
|
||||
:items="items"
|
||||
: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 === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
|
||||
</template>
|
||||
|
||||
@ -69,7 +69,7 @@ export default {
|
||||
:items="items"
|
||||
: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 === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
|
||||
</template>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user