mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[Doc] use v-slot in demos (#3573)
This commit is contained in:
neverland
GitHub
parent
729b9dac4b
commit
d9f2ad6759
@ -20,40 +20,39 @@
|
|||||||
:title="$t('title')"
|
:title="$t('title')"
|
||||||
:thumb="imageURL"
|
:thumb="imageURL"
|
||||||
>
|
>
|
||||||
<div
|
<template v-slot:tags>
|
||||||
slot="tags"
|
<div class="card__tags">
|
||||||
class="card__tags"
|
<van-tag
|
||||||
>
|
plain
|
||||||
<van-tag
|
type="danger"
|
||||||
plain
|
>
|
||||||
type="danger"
|
标签1
|
||||||
>
|
</van-tag>
|
||||||
标签1
|
<van-tag
|
||||||
</van-tag>
|
plain
|
||||||
<van-tag
|
type="danger"
|
||||||
plain
|
>
|
||||||
type="danger"
|
标签2
|
||||||
>
|
</van-tag>
|
||||||
标签2
|
</div>
|
||||||
</van-tag>
|
</template>
|
||||||
</div>
|
|
||||||
<div
|
<template v-slot:footer>
|
||||||
slot="footer"
|
<div class="card__footer">
|
||||||
class="card__footer"
|
<van-button
|
||||||
>
|
round
|
||||||
<van-button
|
size="mini"
|
||||||
round
|
>
|
||||||
size="mini"
|
{{ $t('button') }}
|
||||||
>
|
</van-button>
|
||||||
{{ $t('button') }}
|
<van-button
|
||||||
</van-button>
|
round
|
||||||
<van-button
|
size="mini"
|
||||||
round
|
>
|
||||||
size="mini"
|
{{ $t('button') }}
|
||||||
>
|
</van-button>
|
||||||
{{ $t('button') }}
|
</div>
|
||||||
</van-button>
|
</template>
|
||||||
</div>
|
|
||||||
</van-card>
|
</van-card>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
</demo-section>
|
</demo-section>
|
||||||
@ -63,7 +62,7 @@
|
|||||||
export default {
|
export default {
|
||||||
i18n: {
|
i18n: {
|
||||||
'zh-CN': {
|
'zh-CN': {
|
||||||
title: '2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男'
|
title: '商品名称'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -76,13 +75,13 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.card__footer {
|
.card__footer {
|
||||||
padding-top: 10px;
|
padding-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card__tags {
|
.card__tags {
|
||||||
.van-tag {
|
.van-tag {
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -11,7 +11,7 @@ exports[`renders demo correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div class="van-card__content">
|
<div class="van-card__content">
|
||||||
<div class="van-card__title">2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男</div>
|
<div class="van-card__title">商品名称</div>
|
||||||
<div class="van-card__desc van-ellipsis">描述信息</div>
|
<div class="van-card__desc van-ellipsis">描述信息</div>
|
||||||
<div class="van-card__bottom">
|
<div class="van-card__bottom">
|
||||||
<div class="van-card__price">¥ 2.00</div>
|
<div class="van-card__price">¥ 2.00</div>
|
||||||
@ -31,13 +31,13 @@ exports[`renders demo correctly 1`] = `
|
|||||||
<div class="van-card__tag"><span class="van-tag van-tag--mark" style="background-color: rgb(255, 68, 68);">标签</span></div>
|
<div class="van-card__tag"><span class="van-tag van-tag--mark" style="background-color: rgb(255, 68, 68);">标签</span></div>
|
||||||
</a>
|
</a>
|
||||||
<div class="van-card__content">
|
<div class="van-card__content">
|
||||||
<div class="van-card__title">2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男</div>
|
<div class="van-card__title">商品名称</div>
|
||||||
<div class="van-card__desc van-ellipsis">描述信息</div>
|
<div class="van-card__desc van-ellipsis">描述信息</div>
|
||||||
<div class="card__tags"><span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(255, 68, 68);">
|
<div class="card__tags"><span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(255, 68, 68);">
|
||||||
标签1
|
标签1
|
||||||
</span> <span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(255, 68, 68);">
|
</span> <span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(255, 68, 68);">
|
||||||
标签2
|
标签2
|
||||||
</span></div>
|
</span></div>
|
||||||
<div class="van-card__bottom">
|
<div class="van-card__bottom">
|
||||||
<div class="van-card__price">¥ 2.00</div>
|
<div class="van-card__price">¥ 2.00</div>
|
||||||
<div class="van-card__origin-price">¥ 10.00</div>
|
<div class="van-card__origin-price">¥ 10.00</div>
|
||||||
@ -47,10 +47,10 @@ exports[`renders demo correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
<div class="van-card__footer">
|
<div class="van-card__footer">
|
||||||
<div class="card__footer"><button class="van-button van-button--default van-button--mini van-button--round"><span class="van-button__text">
|
<div class="card__footer"><button class="van-button van-button--default van-button--mini van-button--round"><span class="van-button__text">
|
||||||
按钮
|
按钮
|
||||||
</span></button> <button class="van-button van-button--default van-button--mini van-button--round"><span class="van-button__text">
|
</span></button> <button class="van-button van-button--default van-button--mini van-button--round"><span class="van-button__text">
|
||||||
按钮
|
按钮
|
||||||
</span></button></div>
|
</span></button></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -92,7 +92,7 @@
|
|||||||
icon="shop-o"
|
icon="shop-o"
|
||||||
is-link
|
is-link
|
||||||
>
|
>
|
||||||
<template slot="title">
|
<template v-slot:title>
|
||||||
<span class="custom-text">{{ $t('cell') }}</span>
|
<span class="custom-text">{{ $t('cell') }}</span>
|
||||||
<van-tag type="danger">{{ $t('tag') }}</van-tag>
|
<van-tag type="danger">{{ $t('tag') }}</van-tag>
|
||||||
</template>
|
</template>
|
||||||
@ -104,7 +104,7 @@
|
|||||||
/>
|
/>
|
||||||
<van-cell :title="$t('cell')">
|
<van-cell :title="$t('cell')">
|
||||||
<van-icon
|
<van-icon
|
||||||
slot="right-icon"
|
v-slot:right-icon
|
||||||
name="search"
|
name="search"
|
||||||
class="custom-icon"
|
class="custom-icon"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -99,8 +99,9 @@ exports[`renders demo correctly 1`] = `
|
|||||||
<!----></i>
|
<!----></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-cell">
|
<div class="van-cell">
|
||||||
<div class="van-cell__title"><span>单元格</span></div><i class="custom-icon van-icon van-icon-search">
|
<div class="van-cell__title"><span>单元格</span></div>
|
||||||
<!----></i>
|
<div class="van-cell__value"><i class="custom-icon van-icon van-icon-search">
|
||||||
|
<!----></i></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -31,11 +31,9 @@
|
|||||||
<demo-block :title="$t('customIcon')">
|
<demo-block :title="$t('customIcon')">
|
||||||
<van-checkbox v-model="checkbox3">
|
<van-checkbox v-model="checkbox3">
|
||||||
{{ $t('customIcon') }}
|
{{ $t('customIcon') }}
|
||||||
<img
|
<template v-slot:icon="{ checked }">
|
||||||
slot="icon"
|
<img :src="checked ? icon.active : icon.inactive">
|
||||||
slot-scope="props"
|
</template>
|
||||||
:src="props.checked ? icon.active : icon.inactive"
|
|
||||||
>
|
|
||||||
</van-checkbox>
|
</van-checkbox>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
|
|
||||||
|
|||||||
@ -27,7 +27,9 @@
|
|||||||
<demo-block :title="$t('titleSlot')">
|
<demo-block :title="$t('titleSlot')">
|
||||||
<van-collapse v-model="active3">
|
<van-collapse v-model="active3">
|
||||||
<van-collapse-item>
|
<van-collapse-item>
|
||||||
<div slot="title">{{ $t('title') + 1 }}<van-icon name="question-o" /></div>
|
<template v-slot:title>
|
||||||
|
<div>{{ $t('title') + 1 }}<van-icon name="question-o" /></div>
|
||||||
|
</template>
|
||||||
{{ $t('text') }}
|
{{ $t('text') }}
|
||||||
</van-collapse-item>
|
</van-collapse-item>
|
||||||
<van-collapse-item
|
<van-collapse-item
|
||||||
|
|||||||
@ -81,13 +81,14 @@
|
|||||||
:label="$t('sms')"
|
:label="$t('sms')"
|
||||||
:placeholder="$t('smsPlaceholder')"
|
:placeholder="$t('smsPlaceholder')"
|
||||||
>
|
>
|
||||||
<van-button
|
<template v-slot:button>
|
||||||
slot="button"
|
<van-button
|
||||||
size="small"
|
size="small"
|
||||||
type="primary"
|
type="primary"
|
||||||
>
|
>
|
||||||
{{ $t('sendSMS') }}
|
{{ $t('sendSMS') }}
|
||||||
</van-button>
|
</van-button>
|
||||||
|
</template>
|
||||||
</van-field>
|
</van-field>
|
||||||
</van-cell-group>
|
</van-cell-group>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
|
|||||||
@ -76,8 +76,8 @@ exports[`renders demo correctly 1`] = `
|
|||||||
<div class="van-cell__value">
|
<div class="van-cell__value">
|
||||||
<div class="van-field__body"><input type="text" placeholder="请输入短信验证码" class="van-field__control">
|
<div class="van-field__body"><input type="text" placeholder="请输入短信验证码" class="van-field__control">
|
||||||
<div class="van-field__button"><button class="van-button van-button--primary van-button--small"><span class="van-button__text">
|
<div class="van-field__button"><button class="van-button van-button--primary van-button--small"><span class="van-button__text">
|
||||||
发送验证码
|
发送验证码
|
||||||
</span></button></div>
|
</span></button></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -17,10 +17,9 @@
|
|||||||
:left-text="$t('back')"
|
:left-text="$t('back')"
|
||||||
left-arrow
|
left-arrow
|
||||||
>
|
>
|
||||||
<van-icon
|
<template v-slot:right>
|
||||||
name="search"
|
<van-icon name="search" />
|
||||||
slot="right"
|
</template>
|
||||||
/>
|
|
||||||
</van-nav-bar>
|
</van-nav-bar>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
</demo-section>
|
</demo-section>
|
||||||
|
|||||||
@ -17,7 +17,7 @@
|
|||||||
:status="$t('status')"
|
:status="$t('status')"
|
||||||
>
|
>
|
||||||
<div>{{ $t('content') }}</div>
|
<div>{{ $t('content') }}</div>
|
||||||
<div slot="footer">
|
<template v-slot:footer>
|
||||||
<van-button size="small">{{ $t('button') }}</van-button>
|
<van-button size="small">{{ $t('button') }}</van-button>
|
||||||
<van-button
|
<van-button
|
||||||
size="small"
|
size="small"
|
||||||
@ -25,7 +25,7 @@
|
|||||||
>
|
>
|
||||||
{{ $t('button') }}
|
{{ $t('button') }}
|
||||||
</van-button>
|
</van-button>
|
||||||
</div>
|
</template>
|
||||||
</van-panel>
|
</van-panel>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
</demo-section>
|
</demo-section>
|
||||||
|
|||||||
@ -26,11 +26,9 @@ exports[`renders demo correctly 1`] = `
|
|||||||
<div class="van-panel__content">
|
<div class="van-panel__content">
|
||||||
<div>内容</div>
|
<div>内容</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-panel__footer van-hairline--top">
|
<div class="van-panel__footer van-hairline--top"><button class="van-button van-button--default van-button--small"><span class="van-button__text">按钮</span></button> <button class="van-button van-button--danger van-button--small"><span class="van-button__text">
|
||||||
<div><button class="van-button van-button--default van-button--small"><span class="van-button__text">按钮</span></button> <button class="van-button van-button--danger van-button--small"><span class="van-button__text">
|
|
||||||
按钮
|
按钮
|
||||||
</span></button></div>
|
</span></button></div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -48,19 +48,15 @@
|
|||||||
>
|
>
|
||||||
<van-radio name="1">
|
<van-radio name="1">
|
||||||
{{ $t('radio') }} 1
|
{{ $t('radio') }} 1
|
||||||
<img
|
<template v-slot:icon="{ checked }">
|
||||||
slot="icon"
|
<img :src="checked ? icon.active : icon.inactive">
|
||||||
slot-scope="props"
|
</template>
|
||||||
:src="props.checked ? icon.active : icon.inactive"
|
|
||||||
>
|
|
||||||
</van-radio>
|
</van-radio>
|
||||||
<van-radio name="2">
|
<van-radio name="2">
|
||||||
{{ $t('radio') }} 2
|
{{ $t('radio') }} 2
|
||||||
<img
|
<template v-slot:icon="{ checked }">
|
||||||
slot="icon"
|
<img :src="checked ? icon.active : icon.inactive">
|
||||||
slot-scope="props"
|
</template>
|
||||||
:src="props.checked ? icon.active : icon.inactive"
|
|
||||||
>
|
|
||||||
</van-radio>
|
</van-radio>
|
||||||
</van-radio-group>
|
</van-radio-group>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
|
|||||||
@ -28,12 +28,9 @@
|
|||||||
:label="$t('label')"
|
:label="$t('label')"
|
||||||
@search="onSearch"
|
@search="onSearch"
|
||||||
>
|
>
|
||||||
<div
|
<template v-slot:action>
|
||||||
slot="action"
|
<div @click="onSearch">{{ $t('search') }}</div>
|
||||||
@click="onSearch"
|
</template>
|
||||||
>
|
|
||||||
{{ $t('search') }}
|
|
||||||
</div>
|
|
||||||
</van-search>
|
</van-search>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
</demo-section>
|
</demo-section>
|
||||||
|
|||||||
@ -46,9 +46,7 @@ exports[`renders demo correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-search__action">
|
<div class="van-search__action">
|
||||||
<div>
|
<div>搜索</div>
|
||||||
搜索
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -103,18 +103,12 @@
|
|||||||
@buy-clicked="onBuyClicked"
|
@buy-clicked="onBuyClicked"
|
||||||
@add-cart="onAddCartClicked"
|
@add-cart="onAddCartClicked"
|
||||||
>
|
>
|
||||||
<template
|
<template v-slot:sku-header-price="{ price }">
|
||||||
slot="sku-header-price"
|
|
||||||
slot-scope="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">{{ price }}</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template
|
<template v-slot:sku-actions="{ skuEventBus }">
|
||||||
slot="sku-actions"
|
|
||||||
slot-scope="props"
|
|
||||||
>
|
|
||||||
<div class="van-sku-actions">
|
<div class="van-sku-actions">
|
||||||
<van-button
|
<van-button
|
||||||
square
|
square
|
||||||
|
|||||||
@ -45,12 +45,9 @@
|
|||||||
v-model="value6"
|
v-model="value6"
|
||||||
active-color="#f44"
|
active-color="#f44"
|
||||||
>
|
>
|
||||||
<div
|
<template v-slot:button>
|
||||||
slot="button"
|
<div class="custom-button">{{ value6 }}</div>
|
||||||
class="custom-button"
|
</template>
|
||||||
>
|
|
||||||
{{ value6 }}
|
|
||||||
</div>
|
|
||||||
</van-slider>
|
</van-slider>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
|
|
||||||
|
|||||||
@ -51,9 +51,7 @@ exports[`renders demo correctly 1`] = `
|
|||||||
<div class="van-slider">
|
<div class="van-slider">
|
||||||
<div class="van-slider__bar" style="width: 50%; height: 2px; background: rgb(255, 68, 68);">
|
<div class="van-slider__bar" style="width: 50%; height: 2px; background: rgb(255, 68, 68);">
|
||||||
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
|
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
|
||||||
<div class="custom-button">
|
<div class="custom-button">50</div>
|
||||||
50
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -35,7 +35,7 @@
|
|||||||
@submit="onClickButton"
|
@submit="onClickButton"
|
||||||
>
|
>
|
||||||
<van-checkbox v-model="checked">{{ $t('check') }}</van-checkbox>
|
<van-checkbox v-model="checked">{{ $t('check') }}</van-checkbox>
|
||||||
<span slot="tip">
|
<template v-slot:tip>
|
||||||
{{ $t('tip2') }}
|
{{ $t('tip2') }}
|
||||||
<span
|
<span
|
||||||
class="edit-address"
|
class="edit-address"
|
||||||
@ -43,7 +43,7 @@
|
|||||||
>
|
>
|
||||||
{{ $t('tip3') }}
|
{{ $t('tip3') }}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</template>
|
||||||
</van-submit-bar>
|
</van-submit-bar>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
</demo-section>
|
</demo-section>
|
||||||
|
|||||||
@ -29,11 +29,11 @@ exports[`renders demo correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="van-submit-bar">
|
<div class="van-submit-bar">
|
||||||
<div class="van-submit-bar__tip"><span>
|
<div class="van-submit-bar__tip">
|
||||||
你的收货地址不支持同城送,
|
你的收货地址不支持同城送,
|
||||||
<span class="edit-address">
|
<span class="edit-address">
|
||||||
修改地址
|
修改地址
|
||||||
</span></span></div>
|
</span></div>
|
||||||
<div class="van-submit-bar__bar">
|
<div class="van-submit-bar__bar">
|
||||||
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
|
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
|
||||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
|
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
|
||||||
|
|||||||
@ -4,45 +4,49 @@
|
|||||||
<van-notice-bar>{{ $t('tips') }}</van-notice-bar>
|
<van-notice-bar>{{ $t('tips') }}</van-notice-bar>
|
||||||
<demo-block :title="$t('basicUsage')">
|
<demo-block :title="$t('basicUsage')">
|
||||||
<van-swipe-cell>
|
<van-swipe-cell>
|
||||||
<van-button
|
<template v-slot:left>
|
||||||
square
|
<van-button
|
||||||
slot="left"
|
square
|
||||||
type="danger"
|
type="danger"
|
||||||
:text="$t('button1')"
|
:text="$t('button1')"
|
||||||
/>
|
/>
|
||||||
|
</template>
|
||||||
<van-cell
|
<van-cell
|
||||||
:border="false"
|
:border="false"
|
||||||
:title="$t('title')"
|
:title="$t('title')"
|
||||||
:value="$t('content')"
|
:value="$t('content')"
|
||||||
/>
|
/>
|
||||||
<van-button
|
<template v-slot:right>
|
||||||
square
|
<van-button
|
||||||
slot="right"
|
square
|
||||||
type="danger"
|
type="danger"
|
||||||
:text="$t('button2')"
|
:text="$t('button2')"
|
||||||
/>
|
/>
|
||||||
|
</template>
|
||||||
</van-swipe-cell>
|
</van-swipe-cell>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
|
|
||||||
<demo-block :title="$t('title2')">
|
<demo-block :title="$t('title2')">
|
||||||
<van-swipe-cell :on-close="onClose">
|
<van-swipe-cell :on-close="onClose">
|
||||||
<van-button
|
<template v-slot:left>
|
||||||
square
|
<van-button
|
||||||
slot="left"
|
square
|
||||||
type="danger"
|
type="danger"
|
||||||
:text="$t('button1')"
|
:text="$t('button1')"
|
||||||
/>
|
/>
|
||||||
|
</template>
|
||||||
<van-cell
|
<van-cell
|
||||||
:border="false"
|
:border="false"
|
||||||
:title="$t('title')"
|
:title="$t('title')"
|
||||||
:value="$t('content')"
|
:value="$t('content')"
|
||||||
/>
|
/>
|
||||||
<van-button
|
<template v-slot:right>
|
||||||
square
|
<van-button
|
||||||
slot="right"
|
square
|
||||||
type="danger"
|
type="danger"
|
||||||
:text="$t('button2')"
|
:text="$t('button2')"
|
||||||
/>
|
/>
|
||||||
|
</template>
|
||||||
</van-swipe-cell>
|
</van-swipe-cell>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
</demo-section>
|
</demo-section>
|
||||||
|
|||||||
@ -70,12 +70,9 @@
|
|||||||
<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>
|
||||||
|
|
||||||
<div
|
<template v-slot:indicator>
|
||||||
class="custom-indicator"
|
<div class="custom-indicator">{{ current + 1 }}/4</div>
|
||||||
slot="indicator"
|
</template>
|
||||||
>
|
|
||||||
{{ current + 1 }}/4
|
|
||||||
</div>
|
|
||||||
</van-swipe>
|
</van-swipe>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
</demo-section>
|
</demo-section>
|
||||||
|
|||||||
@ -65,9 +65,7 @@ exports[`renders demo correctly 1`] = `
|
|||||||
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">3</div>
|
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">3</div>
|
||||||
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">4</div>
|
<div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="custom-indicator">
|
<div class="custom-indicator">1/4</div>
|
||||||
1/4
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -82,9 +82,9 @@
|
|||||||
v-for="index in 2"
|
v-for="index in 2"
|
||||||
:key="index"
|
:key="index"
|
||||||
>
|
>
|
||||||
<div slot="title">
|
<template v-slot:title>
|
||||||
<van-icon name="more-o" />{{ $t('tab') }}
|
<van-icon name="more-o" />{{ $t('tab') }}
|
||||||
</div>
|
</template>
|
||||||
{{ $t('content') }} {{ index }}
|
{{ $t('content') }} {{ index }}
|
||||||
</van-tab>
|
</van-tab>
|
||||||
</van-tabs>
|
</van-tabs>
|
||||||
|
|||||||
@ -169,17 +169,13 @@ exports[`renders demo correctly 1`] = `
|
|||||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
||||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active">
|
<div role="tab" aria-selected="true" class="van-tab van-tab--active">
|
||||||
<div>
|
<div><i class="van-icon van-icon-more-o">
|
||||||
<div><i class="van-icon van-icon-more-o">
|
<!----></i>标签
|
||||||
<!----></i>标签
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div role="tab" class="van-tab">
|
<div role="tab" class="van-tab">
|
||||||
<div>
|
<div><i class="van-icon van-icon-more-o">
|
||||||
<div><i class="van-icon van-icon-more-o">
|
<!----></i>标签
|
||||||
<!----></i>标签
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -66,11 +66,9 @@
|
|||||||
<van-tabbar v-model="active3">
|
<van-tabbar v-model="active3">
|
||||||
<van-tabbar-item info="3">
|
<van-tabbar-item info="3">
|
||||||
<span>{{ $t('custom') }}</span>
|
<span>{{ $t('custom') }}</span>
|
||||||
<img
|
<template v-slot:icon="{ active }">
|
||||||
slot="icon"
|
<img :src="active ? icon.active : icon.normal">
|
||||||
slot-scope="props"
|
</template>
|
||||||
:src="props.active ? icon.active : icon.normal"
|
|
||||||
>
|
|
||||||
</van-tabbar-item>
|
</van-tabbar-item>
|
||||||
<van-tabbar-item icon="search">{{ $t('tab') }}</van-tabbar-item>
|
<van-tabbar-item icon="search">{{ $t('tab') }}</van-tabbar-item>
|
||||||
<van-tabbar-item icon="setting-o">{{ $t('tab') }}</van-tabbar-item>
|
<van-tabbar-item icon="setting-o">{{ $t('tab') }}</van-tabbar-item>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user