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

[Doc] use v-slot in demos (#3573)

Browse Source
This commit is contained in:
neverland 2019-06-20 17:32:00 +08:00 committed by GitHub
parent 729b9dac4b
commit d9f2ad6759
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 141 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
packages/card/demo/index.vue
View File

@ -20,40 +20,39 @@
:title="$t('title')"
:thumb="imageURL"
>
<div
slot="tags"
class="card__tags"
>
<van-tag
plain
type="danger"
>
标签1
</van-tag>
<van-tag
plain
type="danger"
>
标签2
</van-tag>
</div>
<div
slot="footer"
class="card__footer"
>
<van-button
round
size="mini"
>
{{ $t('button') }}
</van-button>
<van-button
round
size="mini"
>
{{ $t('button') }}
</van-button>
</div>
<template v-slot:tags>
<div class="card__tags">
<van-tag
plain
type="danger"
>
标签1
</van-tag>
<van-tag
plain
type="danger"
>
标签2
</van-tag>
</div>
</template>
<template v-slot:footer>
<div class="card__footer">
<van-button
round
size="mini"
>
{{ $t('button') }}
</van-button>
<van-button
round
size="mini"
>
{{ $t('button') }}
</van-button>
</div>
</template>
</van-card>
</demo-block>
</demo-section>
@ -63,7 +62,7 @@
export default {
i18n: {
'zh-CN': {
title: '2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男'
title: '商品名称'
}
},
@ -76,13 +75,13 @@ export default {
</script>
<style lang="less">
.card__footer {
padding-top: 10px;
}
.card__footer {
padding-top: 5px;
}
.card__tags {
.van-tag {
margin-right: 5px;
}
.card__tags {
.van-tag {
margin-right: 5px;
}
}
</style>

20
packages/card/test/__snapshots__/demo.spec.js.snap
View File

@ -11,7 +11,7 @@ exports[`renders demo correctly 1`] = `
</div>
</a>
<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__bottom">
<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>
</a>
<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="card__tags"><span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(255, 68, 68);">
标签1
</span> <span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(255, 68, 68);">
标签2
</span></div>
标签1
</span> <span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(255, 68, 68);">
标签2
</span></div>
<div class="van-card__bottom">
<div class="van-card__price">¥ 2.00</div>
<div class="van-card__origin-price">¥ 10.00</div>
@ -47,10 +47,10 @@ exports[`renders demo correctly 1`] = `
</div>
<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">
按钮
</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> <button class="van-button van-button--default van-button--mini van-button--round"><span class="van-button__text">
按钮
</span></button></div>
</div>
</div>
</div>

4
packages/cell/demo/index.vue
View File

@ -92,7 +92,7 @@
icon="shop-o"
is-link
>
<template slot="title">
<template v-slot:title>
<span class="custom-text">{{ $t('cell') }}</span>
<van-tag type="danger">{{ $t('tag') }}</van-tag>
</template>
@ -104,7 +104,7 @@
/>
<van-cell :title="$t('cell')">
<van-icon
slot="right-icon"
v-slot:right-icon
name="search"
class="custom-icon"
/>

5
packages/cell/test/__snapshots__/demo.spec.js.snap
View File

@ -99,8 +99,9 @@ exports[`renders demo correctly 1`] = `
<!----></i>
</div>
<div class="van-cell">
<div class="van-cell__title"><span>单元格</span></div><i class="custom-icon van-icon van-icon-search">
<!----></i>
<div class="van-cell__title"><span>单元格</span></div>
<div class="van-cell__value"><i class="custom-icon van-icon van-icon-search">
<!----></i></div>
</div>
</div>
</div>

8
packages/checkbox/demo/index.vue
View File

@ -31,11 +31,9 @@
<demo-block :title="$t('customIcon')">
<van-checkbox v-model="checkbox3">
{{ $t('customIcon') }}
<img
slot="icon"
slot-scope="props"
:src="props.checked ? icon.active : icon.inactive"
>
<template v-slot:icon="{ checked }">
<img :src="checked ? icon.active : icon.inactive">
</template>
</van-checkbox>
</demo-block>

4
packages/collapse/demo/index.vue
View File

@ -27,7 +27,9 @@
<demo-block :title="$t('titleSlot')">
<van-collapse v-model="active3">
<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') }}
</van-collapse-item>
<van-collapse-item

15
packages/field/demo/index.vue
View File

@ -81,13 +81,14 @@
:label="$t('sms')"
:placeholder="$t('smsPlaceholder')"
>
<van-button
slot="button"
size="small"
type="primary"
>
{{ $t('sendSMS') }}
</van-button>
<template v-slot:button>
<van-button
size="small"
type="primary"
>
{{ $t('sendSMS') }}
</van-button>
</template>
</van-field>
</van-cell-group>
</demo-block>

4
packages/field/test/__snapshots__/demo.spec.js.snap
View File

@ -76,8 +76,8 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell__value">
<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">
发送验证码
</span></button></div>
发送验证码
</span></button></div>
</div>
</div>
</div>

7
packages/nav-bar/demo/index.vue
View File

@ -17,10 +17,9 @@
:left-text="$t('back')"
left-arrow
>
<van-icon
name="search"
slot="right"
/>
<template v-slot:right>
<van-icon name="search" />
</template>
</van-nav-bar>
</demo-block>
</demo-section>

4
packages/panel/demo/index.vue
View File

@ -17,7 +17,7 @@
:status="$t('status')"
>
<div>{{ $t('content') }}</div>
<div slot="footer">
<template v-slot:footer>
<van-button size="small">{{ $t('button') }}</van-button>
<van-button
size="small"
@ -25,7 +25,7 @@
>
{{ $t('button') }}
</van-button>
</div>
</template>
</van-panel>
</demo-block>
</demo-section>

4
packages/panel/test/__snapshots__/demo.spec.js.snap
View File

@ -26,11 +26,9 @@ exports[`renders demo correctly 1`] = `
<div class="van-panel__content">
<div>内容</div>
</div>
<div class="van-panel__footer van-hairline--top">
<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">
<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">
按钮
</span></button></div>
</div>
</div>
</div>
</div>

16
packages/radio/demo/index.vue
View File

@ -48,19 +48,15 @@
>
<van-radio name="1">
{{ $t('radio') }} 1
<img
slot="icon"
slot-scope="props"
:src="props.checked ? icon.active : icon.inactive"
>
<template v-slot:icon="{ checked }">
<img :src="checked ? icon.active : icon.inactive">
</template>
</van-radio>
<van-radio name="2">
{{ $t('radio') }} 2
<img
slot="icon"
slot-scope="props"
:src="props.checked ? icon.active : icon.inactive"
>
<template v-slot:icon="{ checked }">
<img :src="checked ? icon.active : icon.inactive">
</template>
</van-radio>
</van-radio-group>
</demo-block>

9
packages/search/demo/index.vue
View File

@ -28,12 +28,9 @@
:label="$t('label')"
@search="onSearch"
>
<div
slot="action"
@click="onSearch"
>
{{ $t('search') }}
</div>
<template v-slot:action>
<div @click="onSearch">{{ $t('search') }}</div>
</template>
</van-search>
</demo-block>
</demo-section>

4
packages/search/test/__snapshots__/demo.spec.js.snap
View File

@ -46,9 +46,7 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-search__action">
<div>
搜索
</div>
<div>搜索</div>
</div>
</div>
</div>

12
packages/sku/demo/index.vue
View File

@ -103,18 +103,12 @@
@buy-clicked="onBuyClicked"
@add-cart="onAddCartClicked"
>
<template
slot="sku-header-price"
slot-scope="props"
>
<template v-slot:sku-header-price="{ 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>
</template>
<template
slot="sku-actions"
slot-scope="props"
>
<template v-slot:sku-actions="{ skuEventBus }">
<div class="van-sku-actions">
<van-button
square

9
packages/slider/demo/index.vue
View File

@ -45,12 +45,9 @@
v-model="value6"
active-color="#f44"
>
<div
slot="button"
class="custom-button"
>
{{ value6 }}
</div>
<template v-slot:button>
<div class="custom-button">{{ value6 }}</div>
</template>
</van-slider>
</demo-block>

4
packages/slider/test/__snapshots__/demo.spec.js.snap
View File

@ -51,9 +51,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-slider">
<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 class="custom-button">
50
</div>
<div class="custom-button">50</div>
</div>
</div>
</div>

4
packages/submit-bar/demo/index.vue
View File

@ -35,7 +35,7 @@
@submit="onClickButton"
>
<van-checkbox v-model="checked">{{ $t('check') }}</van-checkbox>
<span slot="tip">
<template v-slot:tip>
{{ $t('tip2') }}
<span
class="edit-address"
@ -43,7 +43,7 @@
>
{{ $t('tip3') }}
</span>
</span>
</template>
</van-submit-bar>
</demo-block>
</demo-section>

6
packages/submit-bar/test/__snapshots__/demo.spec.js.snap
View File

@ -29,11 +29,11 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-submit-bar">
<div class="van-submit-bar__tip"><span>
你的收货地址不支持同城送,
<div class="van-submit-bar__tip">
你的收货地址不支持同城送,
<span class="edit-address">
修改地址
</span></span></div>
</span></div>
<div class="van-submit-bar__bar">
<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">

52
packages/swipe-cell/demo/index.vue
View File

@ -4,45 +4,49 @@
<van-notice-bar>{{ $t('tips') }}</van-notice-bar>
<demo-block :title="$t('basicUsage')">
<van-swipe-cell>
<van-button
square
slot="left"
type="danger"
:text="$t('button1')"
/>
<template v-slot:left>
<van-button
square
type="danger"
:text="$t('button1')"
/>
</template>
<van-cell
:border="false"
:title="$t('title')"
:value="$t('content')"
/>
<van-button
square
slot="right"
type="danger"
:text="$t('button2')"
/>
<template v-slot:right>
<van-button
square
type="danger"
:text="$t('button2')"
/>
</template>
</van-swipe-cell>
</demo-block>
<demo-block :title="$t('title2')">
<van-swipe-cell :on-close="onClose">
<van-button
square
slot="left"
type="danger"
:text="$t('button1')"
/>
<template v-slot:left>
<van-button
square
type="danger"
:text="$t('button1')"
/>
</template>
<van-cell
:border="false"
:title="$t('title')"
:value="$t('content')"
/>
<van-button
square
slot="right"
type="danger"
:text="$t('button2')"
/>
<template v-slot:right>
<van-button
square
type="danger"
:text="$t('button2')"
/>
</template>
</van-swipe-cell>
</demo-block>
</demo-section>

9
packages/swipe/demo/index.vue
View File

@ -70,12 +70,9 @@
<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 v-slot:indicator>
<div class="custom-indicator">{{ current + 1 }}/4</div>
</template>
</van-swipe>
</demo-block>
</demo-section>

4
packages/swipe/test/__snapshots__/demo.spec.js.snap
View File

@ -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);">4</div>
</div>
<div class="custom-indicator">
1/4
</div>
<div class="custom-indicator">1/4</div>
</div>
</div>
</div>

4
packages/tab/demo/index.vue
View File

@ -82,9 +82,9 @@
v-for="index in 2"
:key="index"
>
<div slot="title">
<template v-slot:title>
<van-icon name="more-o" />{{ $t('tab') }}
</div>
</template>
{{ $t('content') }} {{ index }}
</van-tab>
</van-tabs>

12
packages/tab/test/__snapshots__/demo.spec.js.snap
View File

@ -169,17 +169,13 @@ exports[`renders demo correctly 1`] = `
<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 role="tab" aria-selected="true" class="van-tab van-tab--active">
<div>
<div><i class="van-icon van-icon-more-o">
<!----></i>标签
</div>
<div><i class="van-icon van-icon-more-o">
<!----></i>标签
</div>
</div>
<div role="tab" class="van-tab">
<div>
<div><i class="van-icon van-icon-more-o">
<!----></i>标签
</div>
<div><i class="van-icon van-icon-more-o">
<!----></i>标签
</div>
</div>
</div>

8
packages/tabbar/demo/index.vue
View File

@ -66,11 +66,9 @@
<van-tabbar v-model="active3">
<van-tabbar-item info="3">
<span>{{ $t('custom') }}</span>
<img
slot="icon"
slot-scope="props"
:src="props.active ? icon.active : icon.normal"
>
<template v-slot:icon="{ active }">
<img :src="active ? icon.active : icon.normal">
</template>
</van-tabbar-item>
<van-tabbar-item icon="search">{{ $t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="setting-o">{{ $t('tab') }}</van-tabbar-item>