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 demo-section

Browse Source
This commit is contained in:
chenjiahan 2020-10-22 16:44:19 +08:00
parent 862c3ec1a4
commit e8244c44e1
69 changed files with 2732 additions and 2980 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/create-vant-cli-app/generators/templates/src/demo-button/demo/index.vue
View File

@ -1,11 +1,9 @@
<template>
<demo-section>
<demo-block title="基础用法">
<demo-button type="primary" style="margin-left: 15px;">按钮</demo-button>
</demo-block>
<demo-block title="基础用法">
<demo-button type="primary" style="margin-left: 15px;">按钮</demo-button>
</demo-block>
<demo-block title="自定义颜色">
<demo-button color="#03a9f4" style="margin-left: 15px;">按钮</demo-button>
</demo-block>
</demo-section>
<demo-block title="自定义颜色">
<demo-button color="#03a9f4" style="margin-left: 15px;">按钮</demo-button>
</demo-block>
</template>

122
src/action-bar/demo/index.vue
View File

@ -1,71 +1,65 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-action-bar>
<van-action-bar-icon
icon="chat-o"
:text="t('icon1')"
@click="onClickIcon"
/>
<van-action-bar-icon
icon="cart-o"
:text="t('icon2')"
@click="onClickIcon"
/>
<van-action-bar-icon
icon="shop-o"
:text="t('icon3')"
@click="onClickIcon"
/>
<van-action-bar-button
type="danger"
:text="t('button2')"
@click="onClickButton"
/>
</van-action-bar>
</demo-block>
<demo-block :title="t('basicUsage')">
<van-action-bar>
<van-action-bar-icon
icon="chat-o"
:text="t('icon1')"
@click="onClickIcon"
/>
<van-action-bar-icon
icon="cart-o"
:text="t('icon2')"
@click="onClickIcon"
/>
<van-action-bar-icon
icon="shop-o"
:text="t('icon3')"
@click="onClickIcon"
/>
<van-action-bar-button
type="danger"
:text="t('button2')"
@click="onClickButton"
/>
</van-action-bar>
</demo-block>
<demo-block :title="t('iconBadge')">
<van-action-bar>
<van-action-bar-icon icon="chat-o" dot :text="t('icon1')" />
<van-action-bar-icon icon="cart-o" badge="5" :text="t('icon2')" />
<van-action-bar-icon icon="shop-o" badge="12" :text="t('icon3')" />
<van-action-bar-button type="warning" :text="t('button1')" />
<van-action-bar-button type="danger" :text="t('button2')" />
</van-action-bar>
</demo-block>
<demo-block :title="t('iconBadge')">
<van-action-bar>
<van-action-bar-icon icon="chat-o" dot :text="t('icon1')" />
<van-action-bar-icon icon="cart-o" badge="5" :text="t('icon2')" />
<van-action-bar-icon icon="shop-o" badge="12" :text="t('icon3')" />
<van-action-bar-button type="warning" :text="t('button1')" />
<van-action-bar-button type="danger" :text="t('button2')" />
</van-action-bar>
</demo-block>
<demo-block v-if="!isWeapp" :title="t('customIconColor')">
<van-action-bar>
<van-action-bar-icon icon="chat-o" :text="t('icon1')" color="#07c160" />
<van-action-bar-icon icon="cart-o" :text="t('icon2')" />
<van-action-bar-icon
icon="star"
:text="t('collected')"
color="#ff5000"
/>
<van-action-bar-button type="warning" :text="t('button1')" />
<van-action-bar-button type="danger" :text="t('button2')" />
</van-action-bar>
</demo-block>
<demo-block v-if="!isWeapp" :title="t('customIconColor')">
<van-action-bar>
<van-action-bar-icon icon="chat-o" :text="t('icon1')" color="#07c160" />
<van-action-bar-icon icon="cart-o" :text="t('icon2')" />
<van-action-bar-icon icon="star" :text="t('collected')" color="#ff5000" />
<van-action-bar-button type="warning" :text="t('button1')" />
<van-action-bar-button type="danger" :text="t('button2')" />
</van-action-bar>
</demo-block>
<demo-block :title="t('customButtonColor')">
<van-action-bar>
<van-action-bar-icon icon="chat-o" :text="t('icon1')" />
<van-action-bar-icon icon="cart-o" :text="t('icon2')" />
<van-action-bar-button
color="#be99ff"
type="warning"
:text="t('button1')"
/>
<van-action-bar-button
color="#7232dd"
type="danger"
:text="t('button2')"
/>
</van-action-bar>
</demo-block>
</demo-section>
<demo-block :title="t('customButtonColor')">
<van-action-bar>
<van-action-bar-icon icon="chat-o" :text="t('icon1')" />
<van-action-bar-icon icon="cart-o" :text="t('icon2')" />
<van-action-bar-button
color="#be99ff"
type="warning"
:text="t('button1')"
/>
<van-action-bar-button
color="#7232dd"
type="danger"
:text="t('button2')"
/>
</van-action-bar>
</demo-block>
</template>
<script>

96
src/action-sheet/demo/index.vue
View File

@ -1,60 +1,54 @@
<template>
<demo-section>
<demo-block card :title="t('basicUsage')">
<van-cell is-link :title="t('basicUsage')" @click="show.basic = true" />
<van-cell is-link :title="t('showCancel')" @click="show.cancel = true" />
<van-cell
is-link
:title="t('showDescription')"
@click="show.description = true"
/>
</demo-block>
<demo-block card :title="t('optionStatus')">
<van-cell
is-link
:title="t('optionStatus')"
@click="show.status = true"
/>
</demo-block>
<demo-block card :title="t('customPanel')">
<van-cell is-link :title="t('customPanel')" @click="show.title = true" />
</demo-block>
<van-action-sheet
v-model:show="show.basic"
:actions="simpleActions"
@select="onSelect"
<demo-block card :title="t('basicUsage')">
<van-cell is-link :title="t('basicUsage')" @click="show.basic = true" />
<van-cell is-link :title="t('showCancel')" @click="show.cancel = true" />
<van-cell
is-link
:title="t('showDescription')"
@click="show.description = true"
/>
</demo-block>
<van-action-sheet
v-model:show="show.cancel"
:actions="simpleActions"
close-on-click-action
:cancel-text="t('cancel')"
@cancel="onCancel"
/>
<demo-block card :title="t('optionStatus')">
<van-cell is-link :title="t('optionStatus')" @click="show.status = true" />
</demo-block>
<van-action-sheet
v-model:show="show.description"
:actions="actionsWithDescription"
close-on-click-action
:cancel-text="t('cancel')"
:description="t('description')"
/>
<demo-block card :title="t('customPanel')">
<van-cell is-link :title="t('customPanel')" @click="show.title = true" />
</demo-block>
<van-action-sheet
v-model:show="show.status"
close-on-click-action
:actions="statusActions"
:cancel-text="t('cancel')"
/>
<van-action-sheet
v-model:show="show.basic"
:actions="simpleActions"
@select="onSelect"
/>
<van-action-sheet v-model:show="show.title" :title="t('title')">
<div class="demo-action-sheet-content">{{ t('content') }}</div>
</van-action-sheet>
</demo-section>
<van-action-sheet
v-model:show="show.cancel"
:actions="simpleActions"
close-on-click-action
:cancel-text="t('cancel')"
@cancel="onCancel"
/>
<van-action-sheet
v-model:show="show.description"
:actions="actionsWithDescription"
close-on-click-action
:cancel-text="t('cancel')"
:description="t('description')"
/>
<van-action-sheet
v-model:show="show.status"
close-on-click-action
:actions="statusActions"
:cancel-text="t('cancel')"
/>
<van-action-sheet v-model:show="show.title" :title="t('title')">
<div class="demo-action-sheet-content">{{ t('content') }}</div>
</van-action-sheet>
</template>
<script>

30
src/address-edit/demo/index.vue
View File

@ -1,20 +1,18 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-address-edit
:area-list="areaList"
show-postal
show-delete
show-set-default
show-search-result
:search-result="searchResult"
:area-columns-placeholder="t('areaColumnsPlaceholder')"
@save="onSave"
@delete="onDelete"
@change-detail="onChangeDetail"
/>
</demo-block>
</demo-section>
<demo-block :title="t('basicUsage')">
<van-address-edit
:area-list="areaList"
show-postal
show-delete
show-set-default
show-search-result
:search-result="searchResult"
:area-columns-placeholder="t('areaColumnsPlaceholder')"
@save="onSave"
@delete="onDelete"
@change-detail="onChangeDetail"
/>
</demo-block>
</template>
<script>

24
src/address-list/demo/index.vue
View File

@ -1,17 +1,15 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-address-list
v-model="chosenAddressId"
:list="t('list')"
:disabled-list="t('disabledList')"
:disabled-text="t('disabledText')"
:default-tag-text="t('defaultTagText')"
@add="onAdd"
@edit="onEdit"
/>
</demo-block>
</demo-section>
<demo-block :title="t('basicUsage')">
<van-address-list
v-model="chosenAddressId"
:list="t('list')"
:disabled-list="t('disabledList')"
:disabled-text="t('disabledText')"
:default-tag-text="t('defaultTagText')"
@add="onAdd"
@edit="onEdit"
/>
</demo-block>
</template>
<script>

38
src/area/demo/index.vue
View File

@ -1,29 +1,23 @@
<template>
<demo-section>
<demo-block card :title="t('basicUsage')">
<van-area :title="t('title')" :area-list="t('areaList')" />
</demo-block>
<demo-block card :title="t('basicUsage')">
<van-area :title="t('title')" :area-list="t('areaList')" />
</demo-block>
<demo-block card :title="t('title2')">
<van-area :title="t('title')" :area-list="t('areaList')" :value="value" />
</demo-block>
<demo-block card :title="t('title2')">
<van-area :title="t('title')" :area-list="t('areaList')" :value="value" />
</demo-block>
<demo-block card :title="t('title3')">
<van-area
:title="t('title')"
:area-list="t('areaList')"
:columns-num="2"
/>
</demo-block>
<demo-block card :title="t('title3')">
<van-area :title="t('title')" :area-list="t('areaList')" :columns-num="2" />
</demo-block>
<demo-block card :title="t('title4')">
<van-area
:title="t('title')"
:area-list="t('areaList')"
:columns-placeholder="t('columnsPlaceholder')"
/>
</demo-block>
</demo-section>
<demo-block card :title="t('title4')">
<van-area
:title="t('title')"
:area-list="t('areaList')"
:columns-placeholder="t('columnsPlaceholder')"
/>
</demo-block>
</template>
<script>

56
src/badge/demo/index.vue
View File

@ -1,36 +1,34 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-badge content="5">
<div class="child" />
</van-badge>
<van-badge dot>
<div class="child" />
</van-badge>
</demo-block>
<demo-block :title="t('basicUsage')">
<van-badge content="5">
<div class="child" />
</van-badge>
<van-badge dot>
<div class="child" />
</van-badge>
</demo-block>
<demo-block :title="t('max')">
<van-badge content="20" max="9">
<div class="child" />
</van-badge>
<van-badge content="200" max="99">
<div class="child" />
</van-badge>
</demo-block>
<demo-block :title="t('max')">
<van-badge content="20" max="9">
<div class="child" />
</van-badge>
<van-badge content="200" max="99">
<div class="child" />
</van-badge>
</demo-block>
<demo-block :title="t('customColor')">
<van-badge content="5" :color="BLUE">
<div class="child" />
</van-badge>
<van-badge dot :color="BLUE">
<div class="child" />
</van-badge>
</demo-block>
<demo-block :title="t('customColor')">
<van-badge content="5" :color="BLUE">
<div class="child" />
</van-badge>
<van-badge dot :color="BLUE">
<div class="child" />
</van-badge>
</demo-block>
<demo-block :title="t('standalone')">
<van-badge content="200" max="99" style="margin-left: 16px;" />
</demo-block>
</demo-section>
<demo-block :title="t('standalone')">
<van-badge content="200" max="99" style="margin-left: 16px;" />
</demo-block>
</template>
<script>

128
src/button/demo/index.vue
View File

@ -1,81 +1,75 @@
<template>
<demo-section>
<demo-block :title="t('type')">
<div class="demo-button-row">
<van-button type="primary">{{ t('primary') }}</van-button>
<van-button type="success">{{ t('success') }}</van-button>
<van-button type="default">{{ t('default') }}</van-button>
</div>
<van-button type="danger">{{ t('danger') }}</van-button>
<van-button type="warning">{{ t('warning') }}</van-button>
</demo-block>
<demo-block :title="t('type')">
<div class="demo-button-row">
<van-button type="primary">{{ t('primary') }}</van-button>
<van-button type="success">{{ t('success') }}</van-button>
<van-button type="default">{{ t('default') }}</van-button>
</div>
<van-button type="danger">{{ t('danger') }}</van-button>
<van-button type="warning">{{ t('warning') }}</van-button>
</demo-block>
<demo-block :title="t('plain')">
<van-button plain type="primary" :text="t('plain')" />
<van-button plain type="success" :text="t('plain')" />
</demo-block>
<demo-block :title="t('plain')">
<van-button plain type="primary" :text="t('plain')" />
<van-button plain type="success" :text="t('plain')" />
</demo-block>
<demo-block :title="t('hairline')">
<van-button plain hairline type="primary" :text="t('hairlineButton')" />
<van-button plain hairline type="success" :text="t('hairlineButton')" />
</demo-block>
<demo-block :title="t('hairline')">
<van-button plain hairline type="primary" :text="t('hairlineButton')" />
<van-button plain hairline type="success" :text="t('hairlineButton')" />
</demo-block>
<demo-block :title="t('disabled')">
<van-button disabled type="primary" :text="t('disabled')" />
<van-button disabled type="success" :text="t('disabled')" />
</demo-block>
<demo-block :title="t('disabled')">
<van-button disabled type="primary" :text="t('disabled')" />
<van-button disabled type="success" :text="t('disabled')" />
</demo-block>
<demo-block :title="t('loadingStatus')">
<van-button loading type="primary" />
<van-button loading type="primary" loading-type="spinner" />
<van-button loading :loading-text="t('loadingText')" type="success" />
</demo-block>
<demo-block :title="t('loadingStatus')">
<van-button loading type="primary" />
<van-button loading type="primary" loading-type="spinner" />
<van-button loading :loading-text="t('loadingText')" type="success" />
</demo-block>
<demo-block :title="t('shape')">
<van-button type="primary" square :text="t('square')" />
<van-button type="success" round :text="t('round')" />
</demo-block>
<demo-block :title="t('shape')">
<van-button type="primary" square :text="t('square')" />
<van-button type="success" round :text="t('round')" />
</demo-block>
<demo-block :title="t('icon')">
<van-button type="primary" icon="plus" />
<van-button type="primary" icon="plus" :text="t('button')" />
<van-button
plain
type="primary"
icon="https://img.yzcdn.cn/vant/user-active.png"
:text="t('button')"
/>
</demo-block>
<demo-block :title="t('icon')">
<van-button type="primary" icon="plus" />
<van-button type="primary" icon="plus" :text="t('button')" />
<van-button
plain
type="primary"
icon="https://img.yzcdn.cn/vant/user-active.png"
:text="t('button')"
/>
</demo-block>
<demo-block :title="t('size')">
<van-button type="primary" size="large">{{ t('large') }}</van-button>
<van-button type="primary" size="normal">{{ t('normal') }}</van-button>
<van-button type="primary" size="small">{{ t('small') }}</van-button>
<van-button type="primary" size="mini">{{ t('mini') }}</van-button>
</demo-block>
<demo-block :title="t('size')">
<van-button type="primary" size="large">{{ t('large') }}</van-button>
<van-button type="primary" size="normal">{{ t('normal') }}</van-button>
<van-button type="primary" size="small">{{ t('small') }}</van-button>
<van-button type="primary" size="mini">{{ t('mini') }}</van-button>
</demo-block>
<demo-block :title="t('blockElement')">
<van-button type="primary" block>{{ t('blockElement') }}</van-button>
</demo-block>
<demo-block :title="t('blockElement')">
<van-button type="primary" block>{{ t('blockElement') }}</van-button>
</demo-block>
<demo-block v-if="!isWeapp" :title="t('router')">
<van-button
:text="t('urlRoute')"
type="primary"
url="/vant/mobile.html"
/>
<van-button :text="t('vueRoute')" type="primary" to="index" />
</demo-block>
<demo-block v-if="!isWeapp" :title="t('router')">
<van-button :text="t('urlRoute')" type="primary" url="/vant/mobile.html" />
<van-button :text="t('vueRoute')" type="primary" to="index" />
</demo-block>
<demo-block :title="t('customColor')">
<van-button color="#7232dd" :text="t('pure')" />
<van-button plain color="#7232dd" :text="t('pure')" />
<van-button
color="linear-gradient(to right, #ff6034, #ee0a24)"
:text="t('gradient')"
/>
</demo-block>
</demo-section>
<demo-block :title="t('customColor')">
<van-button color="#7232dd" :text="t('pure')" />
<van-button plain color="#7232dd" :text="t('pure')" />
<van-button
color="linear-gradient(to right, #ff6034, #ee0a24)"
:text="t('gradient')"
/>
</demo-block>
</template>
<script>

234
src/calendar/demo/index.vue
View File

@ -1,123 +1,121 @@
<template>
<demo-section>
<demo-block card :title="t('basicUsage')">
<van-cell
is-link
:title="t('selectSingle')"
:value="formatFullDate(date.selectSingle)"
@click="show('single', 'selectSingle')"
/>
<van-cell
is-link
:title="t('selectMultiple')"
:value="formatMultiple(date.selectMultiple)"
@click="show('multiple', 'selectMultiple')"
/>
<van-cell
is-link
:title="t('selectRange')"
:value="formatRange(date.selectRange)"
@click="show('range', 'selectRange')"
/>
</demo-block>
<demo-block card :title="t('quickSelect')">
<van-cell
is-link
:title="t('selectSingle')"
:value="formatFullDate(date.quickSelect1)"
@click="show('single', 'quickSelect1')"
/>
<van-cell
is-link
:title="t('selectRange')"
:value="formatRange(date.quickSelect2)"
@click="show('range', 'quickSelect2')"
/>
</demo-block>
<demo-block card :title="t('customCalendar')">
<van-cell
is-link
:title="t('customColor')"
:value="formatRange(date.customColor)"
@click="show('range', 'customColor')"
/>
<van-cell
is-link
:title="t('customRange')"
:value="formatFullDate(date.customRange)"
@click="show('single', 'customRange')"
/>
<van-cell
is-link
:title="t('customConfirm')"
:value="formatRange(date.customConfirm)"
@click="show('range', 'customConfirm')"
/>
<van-cell
is-link
:title="t('customDayText')"
:value="formatRange(date.customDayText)"
@click="show('range', 'customDayText')"
/>
<van-cell
is-link
:title="t('customPosition')"
:value="formatFullDate(date.customPosition)"
@click="show('single', 'customPosition')"
/>
<van-cell
is-link
:title="t('maxRange')"
:value="formatRange(date.maxRange)"
@click="show('range', 'maxRange')"
/>
<van-cell
is-link
:title="t('firstDayOfWeek')"
@click="show('single', 'firstDayOfWeek')"
/>
</demo-block>
<demo-block card :title="t('tiledDisplay')">
<van-calendar
:title="t('calendar')"
:poppable="false"
:show-confirm="false"
:min-date="tiledMinDate"
:max-date="tiledMaxDate"
:default-date="tiledMinDate"
:style="{ height: '500px' }"
/>
</demo-block>
<van-calendar
v-model:show="showCalendar"
:type="type"
:color="color"
:round="round"
:position="position"
:min-date="minDate"
:max-date="maxDate"
:max-range="maxRange"
:formatter="formatter"
:show-confirm="showConfirm"
:confirm-text="confirmText"
:confirm-disabled-text="confirmDisabledText"
:first-day-of-week="firstDayOfWeek"
@confirm="onConfirm"
<demo-block card :title="t('basicUsage')">
<van-cell
is-link
:title="t('selectSingle')"
:value="formatFullDate(date.selectSingle)"
@click="show('single', 'selectSingle')"
/>
</demo-section>
<van-cell
is-link
:title="t('selectMultiple')"
:value="formatMultiple(date.selectMultiple)"
@click="show('multiple', 'selectMultiple')"
/>
<van-cell
is-link
:title="t('selectRange')"
:value="formatRange(date.selectRange)"
@click="show('range', 'selectRange')"
/>
</demo-block>
<demo-block card :title="t('quickSelect')">
<van-cell
is-link
:title="t('selectSingle')"
:value="formatFullDate(date.quickSelect1)"
@click="show('single', 'quickSelect1')"
/>
<van-cell
is-link
:title="t('selectRange')"
:value="formatRange(date.quickSelect2)"
@click="show('range', 'quickSelect2')"
/>
</demo-block>
<demo-block card :title="t('customCalendar')">
<van-cell
is-link
:title="t('customColor')"
:value="formatRange(date.customColor)"
@click="show('range', 'customColor')"
/>
<van-cell
is-link
:title="t('customRange')"
:value="formatFullDate(date.customRange)"
@click="show('single', 'customRange')"
/>
<van-cell
is-link
:title="t('customConfirm')"
:value="formatRange(date.customConfirm)"
@click="show('range', 'customConfirm')"
/>
<van-cell
is-link
:title="t('customDayText')"
:value="formatRange(date.customDayText)"
@click="show('range', 'customDayText')"
/>
<van-cell
is-link
:title="t('customPosition')"
:value="formatFullDate(date.customPosition)"
@click="show('single', 'customPosition')"
/>
<van-cell
is-link
:title="t('maxRange')"
:value="formatRange(date.maxRange)"
@click="show('range', 'maxRange')"
/>
<van-cell
is-link
:title="t('firstDayOfWeek')"
@click="show('single', 'firstDayOfWeek')"
/>
</demo-block>
<demo-block card :title="t('tiledDisplay')">
<van-calendar
:title="t('calendar')"
:poppable="false"
:show-confirm="false"
:min-date="tiledMinDate"
:max-date="tiledMaxDate"
:default-date="tiledMinDate"
:style="{ height: '500px' }"
/>
</demo-block>
<van-calendar
v-model:show="showCalendar"
:type="type"
:color="color"
:round="round"
:position="position"
:min-date="minDate"
:max-date="maxDate"
:max-range="maxRange"
:formatter="formatter"
:show-confirm="showConfirm"
:confirm-text="confirmText"
:confirm-disabled-text="confirmDisabledText"
:first-day-of-week="firstDayOfWeek"
@confirm="onConfirm"
/>
</template>
<script>

102
src/card/demo/index.vue
View File

@ -1,59 +1,57 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-card
num="2"
price="2.00"
:desc="t('desc')"
:title="t('title')"
:thumb="imageURL"
/>
</demo-block>
<demo-block :title="t('basicUsage')">
<van-card
num="2"
price="2.00"
:desc="t('desc')"
:title="t('title')"
:thumb="imageURL"
/>
</demo-block>
<demo-block :title="t('discountInfo')">
<van-card
num="2"
price="2.00"
origin-price="10.00"
:tag="t('tag')"
:desc="t('desc')"
:title="t('title')"
:thumb="imageURL"
/>
</demo-block>
<demo-block :title="t('discountInfo')">
<van-card
num="2"
price="2.00"
origin-price="10.00"
:tag="t('tag')"
:desc="t('desc')"
:title="t('title')"
:thumb="imageURL"
/>
</demo-block>
<demo-block :title="t('customContent')">
<van-card
num="2"
price="2.00"
:desc="t('desc')"
:title="t('title')"
:thumb="imageURL"
>
<template #tags>
<div>
<van-tag plain type="danger" style="margin-right: 5px;">
标签
</van-tag>
<van-tag plain type="danger">
标签
</van-tag>
</div>
</template>
<demo-block :title="t('customContent')">
<van-card
num="2"
price="2.00"
:desc="t('desc')"
:title="t('title')"
:thumb="imageURL"
>
<template #tags>
<div>
<van-tag plain type="danger" style="margin-right: 5px;">
标签
</van-tag>
<van-tag plain type="danger">
标签
</van-tag>
</div>
</template>
<template #footer>
<div>
<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>
<template #footer>
<div>
<van-button round size="mini">
{{ t('button') }}
</van-button>
<van-button round size="mini">
{{ t('button') }}
</van-button>
</div>
</template>
</van-card>
</demo-block>
</template>
<script>

130
src/cell/demo/index.vue
View File

@ -1,79 +1,77 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-cell-group>
<van-cell :title="t('cell')" :value="t('content')" />
<van-cell :title="t('cell')" :value="t('content')" :label="t('desc')" />
</van-cell-group>
</demo-block>
<demo-block :title="t('basicUsage')">
<van-cell-group>
<van-cell :title="t('cell')" :value="t('content')" />
<van-cell :title="t('cell')" :value="t('content')" :label="t('desc')" />
</van-cell-group>
</demo-block>
<demo-block :title="t('largeSize')">
<van-cell :title="t('cell')" :value="t('content')" size="large" />
<van-cell
:title="t('cell')"
:value="t('content')"
size="large"
:label="t('desc')"
/>
</demo-block>
<demo-block :title="t('largeSize')">
<van-cell :title="t('cell')" :value="t('content')" size="large" />
<van-cell
:title="t('cell')"
:value="t('content')"
size="large"
:label="t('desc')"
/>
</demo-block>
<demo-block :title="t('showIcon')">
<van-cell :title="t('cell')" :value="t('content')" icon="location-o" />
</demo-block>
<demo-block :title="t('showIcon')">
<van-cell :title="t('cell')" :value="t('content')" icon="location-o" />
</demo-block>
<demo-block v-if="!isWeapp" :title="t('valueOnly')">
<van-cell :value="t('content')" />
</demo-block>
<demo-block v-if="!isWeapp" :title="t('valueOnly')">
<van-cell :value="t('content')" />
</demo-block>
<demo-block :title="t('showArrow')">
<van-cell :title="t('cell')" is-link />
<van-cell :title="t('cell')" is-link :value="t('content')" />
<van-cell
:title="t('cell')"
is-link
arrow-direction="down"
:value="t('content')"
/>
</demo-block>
<demo-block :title="t('showArrow')">
<van-cell :title="t('cell')" is-link />
<van-cell :title="t('cell')" is-link :value="t('content')" />
<van-cell
:title="t('cell')"
is-link
arrow-direction="down"
:value="t('content')"
/>
</demo-block>
<demo-block :title="t('router')">
<van-cell :title="t('urlRoute')" is-link url="/vant/mobile.html" />
<van-cell :title="t('vueRoute')" is-link to="index" />
</demo-block>
<demo-block :title="t('router')">
<van-cell :title="t('urlRoute')" is-link url="/vant/mobile.html" />
<van-cell :title="t('vueRoute')" is-link to="index" />
</demo-block>
<demo-block :title="t('groupTitle')">
<van-cell-group :title="`${t('group')} 1`">
<van-cell :title="t('cell')" :value="t('content')" />
</van-cell-group>
<van-cell-group :title="`${t('group')} 2`">
<van-cell :title="t('cell')" :value="t('content')" />
</van-cell-group>
</demo-block>
<demo-block :title="t('groupTitle')">
<van-cell-group :title="`${t('group')} 1`">
<van-cell :title="t('cell')" :value="t('content')" />
</van-cell-group>
<van-cell-group :title="`${t('group')} 2`">
<van-cell :title="t('cell')" :value="t('content')" />
</van-cell-group>
</demo-block>
<demo-block :title="t('useSlots')">
<van-cell :value="t('content')" is-link>
<template #title>
<span class="custom-title">{{ t('cell') }}</span>
<van-tag type="danger">{{ t('tag') }}</van-tag>
</template>
</van-cell>
<demo-block :title="t('useSlots')">
<van-cell :value="t('content')" is-link>
<template #title>
<span class="custom-title">{{ t('cell') }}</span>
<van-tag type="danger">{{ t('tag') }}</van-tag>
</template>
</van-cell>
<van-cell icon="shop-o" :title="t('cell')">
<template #right-icon>
<van-icon name="search" class="search-icon" />
</template>
</van-cell>
</demo-block>
<van-cell icon="shop-o" :title="t('cell')">
<template #right-icon>
<van-icon name="search" class="search-icon" />
</template>
</van-cell>
</demo-block>
<demo-block :title="t('verticalCenter')">
<van-cell
center
:title="t('cell')"
:value="t('content')"
:label="t('desc')"
/>
</demo-block>
</demo-section>
<demo-block :title="t('verticalCenter')">
<van-cell
center
:title="t('cell')"
:value="t('content')"
:label="t('desc')"
/>
</demo-block>
</template>
<script>

182
src/checkbox/demo/index.vue
View File

@ -1,108 +1,106 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-checkbox v-model="checkbox1">{{ t('checkbox') }}</van-checkbox>
</demo-block>
<demo-block :title="t('basicUsage')">
<van-checkbox v-model="checkbox1">{{ t('checkbox') }}</van-checkbox>
</demo-block>
<demo-block :title="t('disabled')">
<van-checkbox :model-value="false" disabled>
{{ t('checkbox') }}
</van-checkbox>
<van-checkbox :model-value="true" disabled>
{{ t('checkbox') }}
</van-checkbox>
</demo-block>
<demo-block :title="t('disabled')">
<van-checkbox :model-value="false" disabled>
{{ t('checkbox') }}
</van-checkbox>
<van-checkbox :model-value="true" disabled>
{{ t('checkbox') }}
</van-checkbox>
</demo-block>
<demo-block :title="t('customShape')">
<van-checkbox v-model="checkboxShape" shape="square">
{{ t('customColor') }}
</van-checkbox>
</demo-block>
<demo-block :title="t('customShape')">
<van-checkbox v-model="checkboxShape" shape="square">
{{ t('customColor') }}
</van-checkbox>
</demo-block>
<demo-block :title="t('customColor')">
<van-checkbox v-model="checkbox2" checked-color="#07c160">
{{ t('customColor') }}
</van-checkbox>
</demo-block>
<demo-block :title="t('customColor')">
<van-checkbox v-model="checkbox2" checked-color="#07c160">
{{ t('customColor') }}
</van-checkbox>
</demo-block>
<demo-block :title="t('customIconSize')">
<van-checkbox v-model="checboxIcon" icon-size="24px">
{{ t('customIconSize') }}
</van-checkbox>
</demo-block>
<demo-block :title="t('customIconSize')">
<van-checkbox v-model="checboxIcon" icon-size="24px">
{{ t('customIconSize') }}
</van-checkbox>
</demo-block>
<demo-block :title="t('customIcon')">
<van-checkbox v-model="checkbox3">
{{ t('customIcon') }}
<template #icon="{ checked }">
<img :src="checked ? activeIcon : inactiveIcon" />
</template>
</van-checkbox>
</demo-block>
<demo-block :title="t('customIcon')">
<van-checkbox v-model="checkbox3">
{{ t('customIcon') }}
<template #icon="{ checked }">
<img :src="checked ? activeIcon : inactiveIcon" />
</template>
</van-checkbox>
</demo-block>
<demo-block :title="t('disableLabel')">
<van-checkbox v-model="checkboxLabel" label-disabled>
{{ t('checkbox') }}
</van-checkbox>
</demo-block>
<demo-block :title="t('disableLabel')">
<van-checkbox v-model="checkboxLabel" label-disabled>
{{ t('checkbox') }}
</van-checkbox>
</demo-block>
<demo-block :title="t('title3')">
<van-checkbox-group v-model="result">
<van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
<van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
</van-checkbox-group>
</demo-block>
<demo-block :title="t('title3')">
<van-checkbox-group v-model="result">
<van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
<van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
</van-checkbox-group>
</demo-block>
<demo-block v-if="!isWeapp" :title="t('horizontal')">
<van-checkbox-group v-model="horizontalResult" direction="horizontal">
<van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
<van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
</van-checkbox-group>
</demo-block>
<demo-block v-if="!isWeapp" :title="t('horizontal')">
<van-checkbox-group v-model="horizontalResult" direction="horizontal">
<van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
<van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
</van-checkbox-group>
</demo-block>
<demo-block :title="t('title4')">
<van-checkbox-group v-model="result2" :max="2">
<van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
<van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
<van-checkbox name="c">{{ t('checkbox') }} c</van-checkbox>
</van-checkbox-group>
</demo-block>
<demo-block :title="t('title4')">
<van-checkbox-group v-model="result2" :max="2">
<van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
<van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
<van-checkbox name="c">{{ t('checkbox') }} c</van-checkbox>
</van-checkbox-group>
</demo-block>
<demo-block v-if="!isWeapp" :title="t('toggleAll')">
<van-checkbox-group v-model="checkAllResult" ref="group">
<van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
<van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
<van-checkbox name="c">{{ t('checkbox') }} c</van-checkbox>
</van-checkbox-group>
<demo-block v-if="!isWeapp" :title="t('toggleAll')">
<van-checkbox-group v-model="checkAllResult" ref="group">
<van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
<van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
<van-checkbox name="c">{{ t('checkbox') }} c</van-checkbox>
</van-checkbox-group>
<div class="demo-checkbox-buttons">
<van-button type="primary" @click="checkAll">
{{ t('checkAll') }}
</van-button>
<van-button type="primary" @click="toggleAll">
{{ t('inverse') }}
</van-button>
</div>
</demo-block>
<div class="demo-checkbox-buttons">
<van-button type="primary" @click="checkAll">
{{ t('checkAll') }}
</van-button>
<van-button type="primary" @click="toggleAll">
{{ t('inverse') }}
</van-button>
</div>
</demo-block>
<demo-block :title="t('title5')">
<van-checkbox-group v-model="result3">
<van-cell-group>
<van-cell
v-for="(item, index) in list"
clickable
:key="index"
:title="`${t('checkbox')} ${item}`"
@click="toggle(index)"
>
<template #right-icon>
<van-checkbox :ref="setRefs(index)" :name="item" @click.stop />
</template>
</van-cell>
</van-cell-group>
</van-checkbox-group>
</demo-block>
</demo-section>
<demo-block :title="t('title5')">
<van-checkbox-group v-model="result3">
<van-cell-group>
<van-cell
v-for="(item, index) in list"
clickable
:key="index"
:title="`${t('checkbox')} ${item}`"
@click="toggle(index)"
>
<template #right-icon>
<van-checkbox :ref="setRefs(index)" :name="item" @click.stop />
</template>
</van-cell>
</van-cell-group>
</van-checkbox-group>
</demo-block>
</template>
<script>

122
src/circle/demo/index.vue
View File

@ -1,72 +1,70 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-circle
v-model:current-rate="currentRate1"
:rate="rate"
:speed="100"
:text="currentRate1.toFixed(0) + '%'"
/>
</demo-block>
<demo-block :title="t('basicUsage')">
<van-circle
v-model:current-rate="currentRate1"
:rate="rate"
:speed="100"
:text="currentRate1.toFixed(0) + '%'"
/>
</demo-block>
<demo-block :title="t('customStyle')">
<van-circle
v-model:current-rate="currentRate3"
:rate="rate"
:speed="100"
:stroke-width="60"
:text="t('customWidth')"
/>
<demo-block :title="t('customStyle')">
<van-circle
v-model:current-rate="currentRate3"
:rate="rate"
:speed="100"
:stroke-width="60"
:text="t('customWidth')"
/>
<van-circle
v-model:current-rate="currentRate3"
color="#ee0a24"
:rate="rate"
layer-color="#ebedf0"
:speed="100"
:text="t('customColor')"
/>
<van-circle
v-model:current-rate="currentRate3"
color="#ee0a24"
:rate="rate"
layer-color="#ebedf0"
:speed="100"
:text="t('customColor')"
/>
<van-circle
v-model:current-rate="currentRate2"
:rate="rate"
:speed="100"
:color="gradientColor"
:text="t('gradient')"
/>
<van-circle
v-model:current-rate="currentRate2"
:rate="rate"
:speed="100"
:color="gradientColor"
:text="t('gradient')"
/>
<van-circle
v-model:current-rate="currentRate4"
color="#07c160"
:rate="rate"
:speed="100"
:clockwise="false"
:text="t('counterClockwise')"
style="margin-top: 15px;"
/>
<van-circle
v-model:current-rate="currentRate4"
color="#07c160"
:rate="rate"
:speed="100"
:clockwise="false"
:text="t('counterClockwise')"
style="margin-top: 15px;"
/>
<van-circle
v-model:current-rate="currentRate4"
color="#7232dd"
:rate="rate"
:speed="100"
size="120px"
:clockwise="false"
:text="t('customSize')"
style="margin-top: 15px;"
/>
</demo-block>
<van-circle
v-model:current-rate="currentRate4"
color="#7232dd"
:rate="rate"
:speed="100"
size="120px"
:clockwise="false"
:text="t('customSize')"
style="margin-top: 15px;"
/>
</demo-block>
<div style="margin-top: 15px;">
<van-button :text="t('add')" type="primary" size="small" @click="add" />
<van-button
:text="t('decrease')"
type="danger"
size="small"
@click="reduce"
/>
</div>
</demo-section>
<div style="margin-top: 15px;">
<van-button :text="t('add')" type="primary" size="small" @click="add" />
<van-button
:text="t('decrease')"
type="danger"
size="small"
@click="reduce"
/>
</div>
</template>
<script>

96
src/col/demo/index.vue
View File

@ -1,60 +1,58 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-row>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
</van-row>
<demo-block :title="t('basicUsage')">
<van-row>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
</van-row>
<van-row>
<van-col span="4">span: 4</van-col>
<van-col span="10" offset="4">
offset: 4, span: 10
</van-col>
</van-row>
<van-row>
<van-col span="4">span: 4</van-col>
<van-col span="10" offset="4">
offset: 4, span: 10
</van-col>
</van-row>
<van-row>
<van-col offset="12" span="12">
offset: 12, span: 12
</van-col>
</van-row>
</demo-block>
<van-row>
<van-col offset="12" span="12">
offset: 12, span: 12
</van-col>
</van-row>
</demo-block>
<demo-block :title="t('title2')">
<van-row gutter="20">
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
</van-row>
</demo-block>
<demo-block :title="t('title2')">
<van-row gutter="20">
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
</van-row>
</demo-block>
<demo-block v-if="!isWeapp" :title="t('justify')">
<van-row justify="center">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<demo-block v-if="!isWeapp" :title="t('justify')">
<van-row justify="center">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row justify="end">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row justify="end">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row justify="space-between">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row justify="space-between">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row justify="space-around">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
</demo-block>
</demo-section>
<van-row justify="space-around">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
</demo-block>
</template>
<script>

114
src/collapse/demo/index.vue
View File

@ -1,65 +1,63 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-collapse v-model="active1">
<van-collapse-item :title="t('title') + 1">
{{ t('text') }}
</van-collapse-item>
<van-collapse-item :title="t('title') + 2">
{{ t('text') }}
</van-collapse-item>
<van-collapse-item :title="t('title') + 3">
{{ t('text') }}
</van-collapse-item>
</van-collapse>
</demo-block>
<demo-block :title="t('basicUsage')">
<van-collapse v-model="active1">
<van-collapse-item :title="t('title') + 1">
{{ t('text') }}
</van-collapse-item>
<van-collapse-item :title="t('title') + 2">
{{ t('text') }}
</van-collapse-item>
<van-collapse-item :title="t('title') + 3">
{{ t('text') }}
</van-collapse-item>
</van-collapse>
</demo-block>
<demo-block :title="t('accordion')">
<van-collapse v-model="active2" accordion>
<van-collapse-item :title="t('title') + 1">
{{ t('text') }}
</van-collapse-item>
<van-collapse-item :title="t('title') + 2">
{{ t('text') }}
</van-collapse-item>
<van-collapse-item :title="t('title') + 3">
{{ t('text') }}
</van-collapse-item>
</van-collapse>
</demo-block>
<demo-block :title="t('accordion')">
<van-collapse v-model="active2" accordion>
<van-collapse-item :title="t('title') + 1">
{{ t('text') }}
</van-collapse-item>
<van-collapse-item :title="t('title') + 2">
{{ t('text') }}
</van-collapse-item>
<van-collapse-item :title="t('title') + 3">
{{ t('text') }}
</van-collapse-item>
</van-collapse>
</demo-block>
<demo-block :title="t('disabled')">
<van-collapse v-model="active3">
<van-collapse-item :title="t('title') + 1">
{{ t('text') }}
</van-collapse-item>
<van-collapse-item :title="t('title') + 2" disabled>
{{ t('text') }}
</van-collapse-item>
<van-collapse-item :title="t('title') + 3" disabled>
{{ t('text') }}
</van-collapse-item>
</van-collapse>
</demo-block>
<demo-block :title="t('disabled')">
<van-collapse v-model="active3">
<van-collapse-item :title="t('title') + 1">
{{ t('text') }}
</van-collapse-item>
<van-collapse-item :title="t('title') + 2" disabled>
{{ t('text') }}
</van-collapse-item>
<van-collapse-item :title="t('title') + 3" disabled>
{{ t('text') }}
</van-collapse-item>
</van-collapse>
</demo-block>
<demo-block :title="t('titleSlot')">
<van-collapse v-model="active4">
<van-collapse-item>
<template #title>
{{ t('title') + 1 }}<van-icon name="question-o" />
</template>
{{ t('text') }}
</van-collapse-item>
<van-collapse-item
:title="t('title') + 2"
:value="t('content')"
icon="shop-o"
>
{{ t('text') }}
</van-collapse-item>
</van-collapse>
</demo-block>
</demo-section>
<demo-block :title="t('titleSlot')">
<van-collapse v-model="active4">
<van-collapse-item>
<template #title>
{{ t('title') + 1 }}<van-icon name="question-o" />
</template>
{{ t('text') }}
</van-collapse-item>
<van-collapse-item
:title="t('title') + 2"
:value="t('content')"
icon="shop-o"
>
{{ t('text') }}
</van-collapse-item>
</van-collapse>
</demo-block>
</template>
<script>

74
src/contact-card/demo/index.vue
View File

@ -1,45 +1,43 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-contact-card
:type="cardType"
:name="currentContact.name"
:tel="currentContact.tel"
@click="showList = true"
<demo-block :title="t('basicUsage')">
<van-contact-card
:type="cardType"
:name="currentContact.name"
:tel="currentContact.tel"
@click="showList = true"
/>
<van-popup v-model:show="showList" position="bottom" :lazy-render="false">
<van-contact-list
v-model="chosenContactId"
:list="list"
:default-tag-text="t('defaultTagText')"
@add="onAdd"
@edit="onEdit"
@select="onSelect"
/>
</van-popup>
<van-popup v-model:show="showList" position="bottom" :lazy-render="false">
<van-contact-list
v-model="chosenContactId"
:list="list"
:default-tag-text="t('defaultTagText')"
@add="onAdd"
@edit="onEdit"
@select="onSelect"
/>
</van-popup>
<van-popup v-model:show="showEdit" position="bottom" :lazy-render="false">
<van-contact-edit
show-set-default
:set-default-label="t('defaultLabel')"
:contact-info="editingContact"
:is-edit="isEdit"
@save="onSave"
@delete="onDelete"
/>
</van-popup>
</demo-block>
<demo-block :title="t('uneditable')">
<van-contact-card
type="edit"
:name="mockContact.name"
:tel="mockContact.tel"
:editable="false"
<van-popup v-model:show="showEdit" position="bottom" :lazy-render="false">
<van-contact-edit
show-set-default
:set-default-label="t('defaultLabel')"
:contact-info="editingContact"
:is-edit="isEdit"
@save="onSave"
@delete="onDelete"
/>
</demo-block>
</demo-section>
</van-popup>
</demo-block>
<demo-block :title="t('uneditable')">
<van-contact-card
type="edit"
:name="mockContact.name"
:tel="mockContact.tel"
:editable="false"
/>
</demo-block>
</template>
<script>

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

@ -1,49 +1,43 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-count-down :time="time" />
</demo-block>
<demo-block :title="t('basicUsage')">
<van-count-down :time="time" />
</demo-block>
<demo-block :title="t('customFormat')">
<van-count-down :time="time" :format="t('formatWithDay')" />
</demo-block>
<demo-block :title="t('customFormat')">
<van-count-down :time="time" :format="t('formatWithDay')" />
</demo-block>
<demo-block :title="t('millisecond')">
<van-count-down millisecond :time="time" format="HH:mm:ss:SS" />
</demo-block>
<demo-block :title="t('millisecond')">
<van-count-down millisecond :time="time" format="HH:mm:ss:SS" />
</demo-block>
<demo-block :title="t('customStyle')">
<van-count-down :time="time">
<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>
<demo-block :title="t('customStyle')">
<van-count-down :time="time">
<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>
<demo-block :title="t('manualControl')">
<van-count-down
ref="countDown"
millisecond
:time="3000"
:auto-start="false"
format="ss:SSS"
@finish="$toast(t('finished'))"
/>
<van-grid clickable :column-num="3">
<van-grid-item icon="play-circle-o" :text="t('start')" @click="start" />
<van-grid-item
icon="pause-circle-o"
:text="t('pause')"
@click="pause"
/>
<van-grid-item icon="replay" :text="t('reset')" @click="reset" />
</van-grid>
</demo-block>
</demo-section>
<demo-block :title="t('manualControl')">
<van-count-down
ref="countDown"
millisecond
:time="3000"
:auto-start="false"
format="ss:SSS"
@finish="$toast(t('finished'))"
/>
<van-grid clickable :column-num="3">
<van-grid-item icon="play-circle-o" :text="t('start')" @click="start" />
<van-grid-item icon="pause-circle-o" :text="t('pause')" @click="pause" />
<van-grid-item icon="replay" :text="t('reset')" @click="reset" />
</van-grid>
</demo-block>
</template>
<script>

40
src/coupon-list/demo/index.vue
View File

@ -1,28 +1,26 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-coupon-cell
<demo-block :title="t('basicUsage')">
<van-coupon-cell
:coupons="coupons"
:chosen-coupon="chosenCoupon"
@click="showList = true"
/>
<van-popup
v-model:show="showList"
round
position="bottom"
style="height: 90%; padding-top: 4px;"
>
<van-coupon-list
:coupons="coupons"
:chosen-coupon="chosenCoupon"
@click="showList = true"
:disabled-coupons="disabledCoupons"
:show-count="false"
@change="onChange"
@exchange="onExchange"
/>
<van-popup
v-model:show="showList"
round
position="bottom"
style="height: 90%; padding-top: 4px;"
>
<van-coupon-list
:coupons="coupons"
:chosen-coupon="chosenCoupon"
:disabled-coupons="disabledCoupons"
:show-count="false"
@change="onChange"
@exchange="onExchange"
/>
</van-popup>
</demo-block>
</demo-section>
</van-popup>
</demo-block>
</template>
<script>

152
src/datetime-picker/demo/index.vue
View File

@ -1,88 +1,86 @@
<template>
<demo-section>
<demo-block card :title="t('dateType')">
<van-datetime-picker
v-model="value.date"
type="date"
:title="t('dateType')"
:min-date="minDate"
:max-date="maxDate"
/>
</demo-block>
<demo-block card :title="t('dateType')">
<van-datetime-picker
v-model="value.date"
type="date"
:title="t('dateType')"
:min-date="minDate"
:max-date="maxDate"
/>
</demo-block>
<demo-block card :title="t('yearMonthType')">
<van-datetime-picker
v-model="value.yearMonth"
type="year-month"
:title="t('yearMonthType')"
:min-date="minDate"
:max-date="maxDate"
:formatter="formatter"
/>
</demo-block>
<demo-block card :title="t('yearMonthType')">
<van-datetime-picker
v-model="value.yearMonth"
type="year-month"
:title="t('yearMonthType')"
:min-date="minDate"
:max-date="maxDate"
:formatter="formatter"
/>
</demo-block>
<demo-block v-if="!isWeapp" card :title="t('monthDayType')">
<van-datetime-picker
v-model="value.monthDayType"
type="month-day"
:title="t('monthDayType')"
:min-date="minDate"
:max-date="maxDate"
:formatter="formatter"
/>
</demo-block>
<demo-block v-if="!isWeapp" card :title="t('monthDayType')">
<van-datetime-picker
v-model="value.monthDayType"
type="month-day"
:title="t('monthDayType')"
:min-date="minDate"
:max-date="maxDate"
:formatter="formatter"
/>
</demo-block>
<demo-block card :title="t('timeType')">
<van-datetime-picker
v-model="value.time"
type="time"
:title="t('timeType')"
:min-hour="10"
:max-hour="20"
/>
</demo-block>
<demo-block card :title="t('timeType')">
<van-datetime-picker
v-model="value.time"
type="time"
:title="t('timeType')"
:min-hour="10"
:max-hour="20"
/>
</demo-block>
<demo-block card :title="t('datetimeType')">
<van-datetime-picker
v-model="value.datetime"
type="datetime"
:title="t('datetimeType')"
:min-date="minDate"
:max-date="maxDate"
/>
</demo-block>
<demo-block card :title="t('datetimeType')">
<van-datetime-picker
v-model="value.datetime"
type="datetime"
:title="t('datetimeType')"
:min-date="minDate"
:max-date="maxDate"
/>
</demo-block>
<demo-block v-if="!isWeapp" card :title="t('datehourType')">
<van-datetime-picker
v-model="value.datehour"
type="datehour"
:title="t('datehourType')"
:min-date="minDate"
:max-date="maxDate"
/>
</demo-block>
<demo-block v-if="!isWeapp" card :title="t('datehourType')">
<van-datetime-picker
v-model="value.datehour"
type="datehour"
:title="t('datehourType')"
:min-date="minDate"
:max-date="maxDate"
/>
</demo-block>
<demo-block card :title="t('optionFilter')">
<van-datetime-picker
v-model="value.optionFilter"
type="time"
:title="t('optionFilter')"
:filter="filter"
/>
</demo-block>
<demo-block card :title="t('optionFilter')">
<van-datetime-picker
v-model="value.optionFilter"
type="time"
:title="t('optionFilter')"
:filter="filter"
/>
</demo-block>
<demo-block v-if="!isWeapp" card :title="t('sortColumns')">
<van-datetime-picker
v-model="value.sortColumnsDate"
type="date"
:title="t('sortColumns')"
:columns-order="['month', 'day', 'year']"
:min-date="minDate"
:max-date="maxDate"
:formatter="formatter"
/>
</demo-block>
</demo-section>
<demo-block v-if="!isWeapp" card :title="t('sortColumns')">
<van-datetime-picker
v-model="value.sortColumnsDate"
type="date"
:title="t('sortColumns')"
:columns-order="['month', 'day', 'year']"
:min-date="minDate"
:max-date="maxDate"
:formatter="formatter"
/>
</demo-block>
</template>
<script>

48
src/dialog/demo/index.vue
View File

@ -1,32 +1,30 @@
<template>
<demo-section>
<demo-block card :title="t('basicUsage')">
<van-cell is-link :title="t('alert1')" @click="onClickAlert" />
<van-cell is-link :title="t('alert2')" @click="onClickAlert2" />
<van-cell is-link :title="t('confirm')" @click="onClickConfirm" />
</demo-block>
<demo-block card :title="t('basicUsage')">
<van-cell is-link :title="t('alert1')" @click="onClickAlert" />
<van-cell is-link :title="t('alert2')" @click="onClickAlert2" />
<van-cell is-link :title="t('confirm')" @click="onClickConfirm" />
</demo-block>
<demo-block card :title="t('roundButton')">
<van-cell is-link :title="t('alert1')" @click="onClickRound" />
<van-cell is-link :title="t('alert2')" @click="onClickRound2" />
</demo-block>
<demo-block card :title="t('roundButton')">
<van-cell is-link :title="t('alert1')" @click="onClickRound" />
<van-cell is-link :title="t('alert2')" @click="onClickRound2" />
</demo-block>
<demo-block card :title="t('beforeClose')">
<van-cell is-link :title="t('beforeClose')" @click="onClickBeforeClose" />
</demo-block>
<demo-block card :title="t('beforeClose')">
<van-cell is-link :title="t('beforeClose')" @click="onClickBeforeClose" />
</demo-block>
<demo-block card :title="t('componentCall')">
<van-cell is-link :title="t('componentCall')" @click="show = true" />
<van-dialog
v-model:show="show"
:title="t('title')"
show-cancel-button
:lazy-render="false"
>
<img :src="image" />
</van-dialog>
</demo-block>
</demo-section>
<demo-block card :title="t('componentCall')">
<van-cell is-link :title="t('componentCall')" @click="show = true" />
<van-dialog
v-model:show="show"
:title="t('title')"
show-cancel-button
:lazy-render="false"
>
<img :src="image" />
</van-dialog>
</demo-block>
</template>
<script>

56
src/divider/demo/index.vue
View File

@ -1,39 +1,35 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-divider />
</demo-block>
<demo-block :title="t('basicUsage')">
<van-divider />
</demo-block>
<demo-block :title="t('withText')">
<van-divider>
{{ t('text') }}
</van-divider>
</demo-block>
<demo-block :title="t('withText')">
<van-divider>
{{ t('text') }}
</van-divider>
</demo-block>
<demo-block :title="t('contentPosition')">
<van-divider content-position="left">
{{ t('text') }}
</van-divider>
<demo-block :title="t('contentPosition')">
<van-divider content-position="left">
{{ t('text') }}
</van-divider>
<van-divider content-position="right">
{{ t('text') }}
</van-divider>
</demo-block>
<van-divider content-position="right">
{{ t('text') }}
</van-divider>
</demo-block>
<demo-block :title="t('dashed')">
<van-divider dashed :hairline="false">
{{ t('text') }}
</van-divider>
</demo-block>
<demo-block :title="t('dashed')">
<van-divider dashed :hairline="false">
{{ t('text') }}
</van-divider>
</demo-block>
<demo-block :title="t('customStyle')">
<van-divider
:style="{ borderColor: BLUE, color: BLUE, padding: '0 16px' }"
>
{{ t('text') }}
</van-divider>
</demo-block>
</demo-section>
<demo-block :title="t('customStyle')">
<van-divider :style="{ borderColor: BLUE, color: BLUE, padding: '0 16px' }">
{{ t('text') }}
</van-divider>
</demo-block>
</template>
<script>

106
src/dropdown-menu/demo/index.vue
View File

@ -1,62 +1,60 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-dropdown-menu>
<van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>
</demo-block>
<demo-block :title="t('basicUsage')">
<van-dropdown-menu>
<van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>
</demo-block>
<demo-block :title="t('customContent')">
<van-dropdown-menu>
<van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item :title="t('itemTitle')" ref="item">
<van-cell center :title="t('switchTitle1')">
<template #right-icon>
<van-switch v-model="switch1" size="24" :active-color="RED" />
</template>
</van-cell>
<van-cell center :title="t('switchTitle2')">
<template #right-icon>
<van-switch v-model="switch2" size="24" :active-color="RED" />
</template>
</van-cell>
<div style="padding: 5px 16px;">
<van-button
type="danger"
block
round
style="height: 40px;"
@click="onConfirm"
>
{{ t('confirm') }}
</van-button>
</div>
</van-dropdown-item>
</van-dropdown-menu>
</demo-block>
<demo-block :title="t('customContent')">
<van-dropdown-menu>
<van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item :title="t('itemTitle')" ref="item">
<van-cell center :title="t('switchTitle1')">
<template #right-icon>
<van-switch v-model="switch1" size="24" :active-color="RED" />
</template>
</van-cell>
<van-cell center :title="t('switchTitle2')">
<template #right-icon>
<van-switch v-model="switch2" size="24" :active-color="RED" />
</template>
</van-cell>
<div style="padding: 5px 16px;">
<van-button
type="danger"
block
round
style="height: 40px;"
@click="onConfirm"
>
{{ t('confirm') }}
</van-button>
</div>
</van-dropdown-item>
</van-dropdown-menu>
</demo-block>
<demo-block :title="t('customActiveColor')">
<van-dropdown-menu :active-color="BLUE">
<van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>
</demo-block>
<demo-block :title="t('customActiveColor')">
<van-dropdown-menu :active-color="BLUE">
<van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>
</demo-block>
<demo-block :title="t('expandDirection')">
<van-dropdown-menu direction="up">
<van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>
</demo-block>
<demo-block :title="t('expandDirection')">
<van-dropdown-menu direction="up">
<van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>
</demo-block>
<demo-block :title="t('disableMenu')">
<van-dropdown-menu>
<van-dropdown-item v-model="value1" disabled :options="option1" />
<van-dropdown-item v-model="value2" disabled :options="option2" />
</van-dropdown-menu>
</demo-block>
</demo-section>
<demo-block :title="t('disableMenu')">
<van-dropdown-menu>
<van-dropdown-item v-model="value1" disabled :options="option1" />
<van-dropdown-item v-model="value2" disabled :options="option2" />
</van-dropdown-menu>
</demo-block>
</template>
<script>

62
src/empty/demo/index.vue
View File

@ -1,39 +1,37 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-empty :description="t('description')" />
</demo-block>
<demo-block :title="t('basicUsage')">
<van-empty :description="t('description')" />
</demo-block>
<demo-block :title="t('imageType')">
<van-tabs v-model="active">
<van-tab name="error" :title="t('error')">
<van-empty image="error" :description="t('description')" />
</van-tab>
<van-tab name="network" :title="t('network')">
<van-empty image="network" :description="t('description')" />
</van-tab>
<van-tab name="search" :title="t('search')">
<van-empty image="search" :description="t('description')" />
</van-tab>
</van-tabs>
</demo-block>
<demo-block :title="t('imageType')">
<van-tabs v-model="active">
<van-tab name="error" :title="t('error')">
<van-empty image="error" :description="t('description')" />
</van-tab>
<van-tab name="network" :title="t('network')">
<van-empty image="network" :description="t('description')" />
</van-tab>
<van-tab name="search" :title="t('search')">
<van-empty image="search" :description="t('description')" />
</van-tab>
</van-tabs>
</demo-block>
<demo-block :title="t('customImage')">
<van-empty
class="custom-image"
image="https://img.yzcdn.cn/vant/custom-empty-image.png"
:description="t('description')"
/>
</demo-block>
<demo-block :title="t('customImage')">
<van-empty
class="custom-image"
image="https://img.yzcdn.cn/vant/custom-empty-image.png"
:description="t('description')"
/>
</demo-block>
<demo-block :title="t('bottomContent')">
<van-empty :description="t('description')">
<van-button round type="danger" class="bottom-button">
{{ t('button') }}
</van-button>
</van-empty>
</demo-block>
</demo-section>
<demo-block :title="t('bottomContent')">
<van-empty :description="t('description')">
<van-button round type="danger" class="bottom-button">
{{ t('button') }}
</van-button>
</van-empty>
</demo-block>
</template>
<script>

22
src/field/demo/index.vue
View File

@ -1,16 +1,14 @@
<template>
<demo-section>
<basic-usage />
<custom-type />
<disabled />
<show-icon />
<error-info />
<insert-button />
<format-value />
<autosize />
<show-word-limit />
<input-align />
</demo-section>
<basic-usage />
<custom-type />
<disabled />
<show-icon />
<error-info />
<insert-button />
<format-value />
<autosize />
<show-word-limit />
<input-align />
</template>
<script>

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

@ -7,22 +7,14 @@
:model-value="value"
:placeholder="t('placeholder')"
@click="showArea = true"
>
<template #extra>
<van-popup
v-model:show="showArea"
round
position="bottom"
teleport="body"
>
<van-area
:area-list="t('areaList')"
@confirm="onConfirm"
@cancel="onCancel"
/>
</van-popup>
</template>
</van-field>
/>
<van-popup v-model:show="showArea" round position="bottom" teleport="body">
<van-area
:area-list="t('areaList')"
@confirm="onConfirm"
@cancel="onCancel"
/>
</van-popup>
</template>
<script>

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

@ -7,16 +7,13 @@
:model-value="value"
:placeholder="t('placeholder')"
@click="showCalendar = true"
>
<template #extra>
<van-calendar
v-model:show="showCalendar"
round
teleport="body"
@confirm="onConfirm"
/>
</template>
</van-field>
/>
<van-calendar
v-model:show="showCalendar"
round
teleport="body"
@confirm="onConfirm"
/>
</template>
<script>

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

@ -7,22 +7,10 @@
:model-value="value"
:placeholder="t('placeholder')"
@click="showPicker = true"
>
<template #extra>
<van-popup
v-model:show="showPicker"
round
position="bottom"
teleport="body"
>
<van-datetime-picker
type="time"
@confirm="onConfirm"
@cancel="onCancel"
/>
</van-popup>
</template>
</van-field>
/>
<van-popup v-model:show="showPicker" round position="bottom" teleport="body">
<van-datetime-picker type="time" @confirm="onConfirm" @cancel="onCancel" />
</van-popup>
</template>
<script>

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

@ -7,22 +7,14 @@
:model-value="value"
:placeholder="t('placeholder')"
@click="showPicker = true"
>
<template #extra>
<van-popup
v-model:show="showPicker"
round
position="bottom"
teleport="body"
>
<van-picker
:columns="t('textColumns')"
@confirm="onConfirm"
@cancel="onCancel"
/>
</van-popup>
</template>
</van-field>
/>
<van-popup v-model:show="showPicker" round position="bottom" teleport="body">
<van-picker
:columns="t('textColumns')"
@confirm="onConfirm"
@cancel="onCancel"
/>
</van-popup>
</template>
<script>

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

@ -1,9 +1,7 @@
<template>
<demo-section>
<basic-usage />
<validate-rules />
<field-type />
</demo-section>
<basic-usage />
<validate-rules />
<field-type />
</template>
<script>

143
src/grid/demo/index.vue
View File

@ -1,98 +1,67 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-grid>
<van-grid-item
v-for="i in 4"
:key="i"
icon="photo-o"
:text="t('text')"
/>
</van-grid>
</demo-block>
<demo-block :title="t('basicUsage')">
<van-grid>
<van-grid-item v-for="i in 4" :key="i" icon="photo-o" :text="t('text')" />
</van-grid>
</demo-block>
<demo-block :title="t('columnNum')">
<van-grid :column-num="3">
<van-grid-item
v-for="i in 6"
:key="i"
icon="photo-o"
:text="t('text')"
/>
</van-grid>
</demo-block>
<demo-block :title="t('columnNum')">
<van-grid :column-num="3">
<van-grid-item v-for="i in 6" :key="i" icon="photo-o" :text="t('text')" />
</van-grid>
</demo-block>
<demo-block :title="t('customContent')">
<van-grid :border="false" :column-num="3">
<van-grid-item>
<van-image
fit="contain"
src="https://img.yzcdn.cn/vant/apple-1.jpg"
/>
</van-grid-item>
<van-grid-item>
<van-image
fit="contain"
src="https://img.yzcdn.cn/vant/apple-2.jpg"
/>
</van-grid-item>
<van-grid-item>
<van-image
fit="contain"
src="https://img.yzcdn.cn/vant/apple-3.jpg"
/>
</van-grid-item>
</van-grid>
</demo-block>
<demo-block :title="t('customContent')">
<van-grid :border="false" :column-num="3">
<van-grid-item>
<van-image fit="contain" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
</van-grid-item>
<van-grid-item>
<van-image fit="contain" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
</van-grid-item>
<van-grid-item>
<van-image fit="contain" src="https://img.yzcdn.cn/vant/apple-3.jpg" />
</van-grid-item>
</van-grid>
</demo-block>
<demo-block :title="t('square')">
<van-grid square>
<van-grid-item
v-for="i in 8"
:key="i"
icon="photo-o"
:text="t('text')"
/>
</van-grid>
</demo-block>
<demo-block :title="t('square')">
<van-grid square>
<van-grid-item v-for="i in 8" :key="i" icon="photo-o" :text="t('text')" />
</van-grid>
</demo-block>
<demo-block :title="t('gutter')">
<van-grid :gutter="10">
<van-grid-item
v-for="i in 8"
:key="i"
icon="photo-o"
:text="t('text')"
/>
</van-grid>
</demo-block>
<demo-block :title="t('gutter')">
<van-grid :gutter="10">
<van-grid-item v-for="i in 8" :key="i" icon="photo-o" :text="t('text')" />
</van-grid>
</demo-block>
<demo-block :title="t('horizontal')">
<van-grid direction="horizontal" :column-num="3">
<van-grid-item icon="photo-o" :text="t('text')" />
<van-grid-item icon="photo-o" :text="t('text')" />
<van-grid-item icon="photo-o" :text="t('text')" />
</van-grid>
</demo-block>
<demo-block :title="t('horizontal')">
<van-grid direction="horizontal" :column-num="3">
<van-grid-item icon="photo-o" :text="t('text')" />
<van-grid-item icon="photo-o" :text="t('text')" />
<van-grid-item icon="photo-o" :text="t('text')" />
</van-grid>
</demo-block>
<demo-block :title="t('route')">
<van-grid clickable :column-num="2">
<van-grid-item icon="home-o" :text="t('vueRoute')" to="/" />
<van-grid-item
icon="search"
:text="t('urlRoute')"
url="/vant/mobile.html"
/>
</van-grid>
</demo-block>
<demo-block :title="t('route')">
<van-grid clickable :column-num="2">
<van-grid-item icon="home-o" :text="t('vueRoute')" to="/" />
<van-grid-item
icon="search"
:text="t('urlRoute')"
url="/vant/mobile.html"
/>
</van-grid>
</demo-block>
<demo-block :title="t('showBadge')">
<van-grid :column-num="2">
<van-grid-item icon="home-o" :text="t('text')" dot />
<van-grid-item icon="search" :text="t('text')" badge="99+" />
</van-grid>
</demo-block>
</demo-section>
<demo-block :title="t('showBadge')">
<van-grid :column-num="2">
<van-grid-item icon="home-o" :text="t('text')" dot />
<van-grid-item icon="search" :text="t('text')" badge="99+" />
</van-grid>
</demo-block>
</template>
<script>

164
src/icon/demo/index.vue
View File

@ -1,98 +1,96 @@
<template>
<demo-section>
<van-tabs v-model="tab" sticky>
<van-tab :title="t('demo')">
<demo-block :title="t('basicUsage')">
<van-row>
<van-col span="6" @click="copy(demoIcon)">
<van-icon :name="demoIcon" />
</van-col>
<van-col span="6" @click="copy(demoImage)">
<van-icon :name="demoImage" />
</van-col>
</van-row>
</demo-block>
<demo-block :title="t('badge')">
<van-row>
<van-col span="6" @click="copy(demoIcon, { dot: true })">
<van-icon :name="demoIcon" dot />
</van-col>
<van-col span="6" @click="copy(demoIcon, { badge: '9' })">
<van-icon :name="demoIcon" badge="9" />
</van-col>
<van-col span="6" @click="copy(demoIcon, { badge: '99+' })">
<van-icon :name="demoIcon" badge="99+" />
</van-col>
</van-row>
</demo-block>
<demo-block :title="t('color')">
<van-row>
<van-col span="6" @click="copy(demoIcon, { color: BLUE })">
<van-icon :name="demoIcon" :color="BLUE" />
</van-col>
<van-col span="6" @click="copy(demoIcon, { color: GREEN })">
<van-icon :name="demoIcon" :color="GREEN" />
</van-col>
</van-row>
</demo-block>
<demo-block :title="t('size')">
<van-row>
<van-col span="6" @click="copy(demoIcon, { size: '40' })">
<van-icon :name="demoIcon" size="40" />
</van-col>
<van-col span="6" @click="copy(demoIcon, { size: '3rem' })">
<van-icon :name="demoIcon" size="3rem" />
</van-col>
</van-row>
</demo-block>
</van-tab>
<van-tab :title="t('basic')">
<van-tabs v-model="tab" sticky>
<van-tab :title="t('demo')">
<demo-block :title="t('basicUsage')">
<van-row>
<van-col
v-for="icon in icons.basic"
:key="icon"
span="6"
@click="copy(icon)"
>
<van-icon :name="icon" />
<span>{{ icon }}</span>
<van-col span="6" @click="copy(demoIcon)">
<van-icon :name="demoIcon" />
</van-col>
<van-col span="6" @click="copy(demoImage)">
<van-icon :name="demoImage" />
</van-col>
</van-row>
</van-tab>
</demo-block>
<van-tab :title="t('outline')">
<demo-block :title="t('badge')">
<van-row>
<van-col
v-for="icon in icons.outline"
:key="icon"
span="6"
@click="copy(icon)"
>
<van-icon :name="icon" />
<span>{{ icon }}</span>
<van-col span="6" @click="copy(demoIcon, { dot: true })">
<van-icon :name="demoIcon" dot />
</van-col>
<van-col span="6" @click="copy(demoIcon, { badge: '9' })">
<van-icon :name="demoIcon" badge="9" />
</van-col>
<van-col span="6" @click="copy(demoIcon, { badge: '99+' })">
<van-icon :name="demoIcon" badge="99+" />
</van-col>
</van-row>
</van-tab>
</demo-block>
<van-tab :title="t('filled')">
<demo-block :title="t('color')">
<van-row>
<van-col
v-for="icon in icons.filled"
:key="icon"
span="6"
@click="copy(icon)"
>
<van-icon :name="icon" />
<span>{{ icon }}</span>
<van-col span="6" @click="copy(demoIcon, { color: BLUE })">
<van-icon :name="demoIcon" :color="BLUE" />
</van-col>
<van-col span="6" @click="copy(demoIcon, { color: GREEN })">
<van-icon :name="demoIcon" :color="GREEN" />
</van-col>
</van-row>
</van-tab>
</van-tabs>
</demo-section>
</demo-block>
<demo-block :title="t('size')">
<van-row>
<van-col span="6" @click="copy(demoIcon, { size: '40' })">
<van-icon :name="demoIcon" size="40" />
</van-col>
<van-col span="6" @click="copy(demoIcon, { size: '3rem' })">
<van-icon :name="demoIcon" size="3rem" />
</van-col>
</van-row>
</demo-block>
</van-tab>
<van-tab :title="t('basic')">
<van-row>
<van-col
v-for="icon in icons.basic"
:key="icon"
span="6"
@click="copy(icon)"
>
<van-icon :name="icon" />
<span>{{ icon }}</span>
</van-col>
</van-row>
</van-tab>
<van-tab :title="t('outline')">
<van-row>
<van-col
v-for="icon in icons.outline"
:key="icon"
span="6"
@click="copy(icon)"
>
<van-icon :name="icon" />
<span>{{ icon }}</span>
</van-col>
</van-row>
</van-tab>
<van-tab :title="t('filled')">
<van-row>
<van-col
v-for="icon in icons.filled"
:key="icon"
span="6"
@click="copy(icon)"
>
<van-icon :name="icon" />
<span>{{ icon }}</span>
</van-col>
</van-row>
</van-tab>
</van-tabs>
</template>
<script>

64
src/image-preview/demo/index.vue
View File

@ -1,42 +1,36 @@
<template>
<demo-section>
<demo-block card :title="t('basicUsage')">
<van-cell is-link @click="showImagePreview()">
{{ t('showImages') }}
</van-cell>
</demo-block>
<demo-block card :title="t('basicUsage')">
<van-cell is-link @click="showImagePreview()">
{{ t('showImages') }}
</van-cell>
</demo-block>
<demo-block card :title="t('customConfig')">
<van-cell is-link @click="showImagePreview({ startPosition: 1 })">
{{ t('startPosition') }}
</van-cell>
<van-cell is-link @click="showImagePreview({ closeable: true })">
{{ t('showClose') }}
</van-cell>
<van-cell is-link @click="showImagePreview({ onClose })">
{{ t('closeEvent') }}
</van-cell>
</demo-block>
<demo-block card :title="t('customConfig')">
<van-cell is-link @click="showImagePreview({ startPosition: 1 })">
{{ t('startPosition') }}
</van-cell>
<van-cell is-link @click="showImagePreview({ closeable: true })">
{{ t('showClose') }}
</van-cell>
<van-cell is-link @click="showImagePreview({ onClose })">
{{ t('closeEvent') }}
</van-cell>
</demo-block>
<demo-block card :title="t('beforeClose')">
<van-cell is-link @click="showImagePreview({ beforeClose })">
{{ t('beforeClose') }}
</van-cell>
</demo-block>
<demo-block card :title="t('beforeClose')">
<van-cell is-link @click="showImagePreview({ beforeClose })">
{{ t('beforeClose') }}
</van-cell>
</demo-block>
<demo-block card :title="t('componentCall')">
<van-cell is-link @click="componentCall">
{{ t('componentCall') }}
</van-cell>
<van-image-preview
v-model:show="show"
:images="images"
@change="onChange"
>
<template #index>{{ t('index', index) }}</template>
</van-image-preview>
</demo-block>
</demo-section>
<demo-block card :title="t('componentCall')">
<van-cell is-link @click="componentCall">
{{ t('componentCall') }}
</van-cell>
<van-image-preview v-model:show="show" :images="images" @change="onChange">
<template #index>{{ t('index', index) }}</template>
</van-image-preview>
</demo-block>
</template>
<script>

104
src/image/demo/index.vue
View File

@ -1,63 +1,61 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-row>
<van-image width="100" height="100" :src="image" />
</van-row>
</demo-block>
<demo-block :title="t('basicUsage')">
<van-row>
<van-image width="100" height="100" :src="image" />
</van-row>
</demo-block>
<demo-block :title="t('fitMode')">
<van-row gutter="20">
<van-col v-for="fit in fits" span="8" :key="fit">
<van-image :fit="fit" width="100%" height="27vw" :src="image" />
<div class="text">{{ fit }}</div>
</van-col>
</van-row>
</demo-block>
<demo-block :title="t('fitMode')">
<van-row gutter="20">
<van-col v-for="fit in fits" span="8" :key="fit">
<van-image :fit="fit" width="100%" height="27vw" :src="image" />
<div class="text">{{ fit }}</div>
</van-col>
</van-row>
</demo-block>
<demo-block :title="t('round')">
<van-row gutter="20">
<van-col v-for="fit in fits" span="8" :key="fit">
<van-image round :fit="fit" width="100%" height="27vw" :src="image" />
<div class="text">{{ fit }}</div>
</van-col>
</van-row>
</demo-block>
<demo-block :title="t('round')">
<van-row gutter="20">
<van-col v-for="fit in fits" span="8" :key="fit">
<van-image round :fit="fit" width="100%" height="27vw" :src="image" />
<div class="text">{{ fit }}</div>
</van-col>
</van-row>
</demo-block>
<demo-block :title="t('loading')">
<van-row gutter="20">
<van-col span="8">
<van-image width="100%" height="27vw" />
<div class="text">{{ t('defaultTip') }}</div>
</van-col>
<demo-block :title="t('loading')">
<van-row gutter="20">
<van-col span="8">
<van-image width="100%" height="27vw" />
<div class="text">{{ t('defaultTip') }}</div>
</van-col>
<van-col span="8">
<van-image width="100%" height="27vw">
<template #loading>
<van-loading type="spinner" size="20" />
</template>
</van-image>
<div class="text">{{ t('customTip') }}</div>
</van-col>
</van-row>
</demo-block>
<van-col span="8">
<van-image width="100%" height="27vw">
<template #loading>
<van-loading type="spinner" size="20" />
</template>
</van-image>
<div class="text">{{ t('customTip') }}</div>
</van-col>
</van-row>
</demo-block>
<demo-block :title="t('error')">
<van-row gutter="20">
<van-col span="8">
<van-image width="100%" height="27vw" src="x" />
<div class="text">{{ t('defaultTip') }}</div>
</van-col>
<demo-block :title="t('error')">
<van-row gutter="20">
<van-col span="8">
<van-image width="100%" height="27vw" src="x" />
<div class="text">{{ t('defaultTip') }}</div>
</van-col>
<van-col span="8">
<van-image width="100%" height="27vw" src="x">
<template #error>{{ t('loadFail') }}</template>
</van-image>
<div class="text">{{ t('customTip') }}</div>
</van-col>
</van-row>
</demo-block>
</demo-section>
<van-col span="8">
<van-image width="100%" height="27vw" src="x">
<template #error>{{ t('loadFail') }}</template>
</van-image>
<div class="text">{{ t('customTip') }}</div>
</van-col>
</van-row>
</demo-block>
</template>
<script>

50
src/index-bar/demo/index.vue
View File

@ -1,31 +1,29 @@
<template>
<demo-section>
<van-tabs v-model="activeTab">
<van-tab :title="t('basicUsage')">
<van-index-bar>
<div v-for="index in indexList" :key="index">
<van-index-anchor :index="index" />
<van-cell :title="t('text')" />
<van-cell :title="t('text')" />
<van-cell :title="t('text')" />
</div>
</van-index-bar>
</van-tab>
<van-tabs v-model="activeTab">
<van-tab :title="t('basicUsage')">
<van-index-bar>
<div v-for="index in indexList" :key="index">
<van-index-anchor :index="index" />
<van-cell :title="t('text')" />
<van-cell :title="t('text')" />
<van-cell :title="t('text')" />
</div>
</van-index-bar>
</van-tab>
<van-tab :title="t('customIndexList')">
<van-index-bar :index-list="customIndexList">
<div v-for="index in customIndexList" :key="index">
<van-index-anchor :index="index">
{{ t('title') + index }}
</van-index-anchor>
<van-cell :title="t('text')" />
<van-cell :title="t('text')" />
<van-cell :title="t('text')" />
</div>
</van-index-bar>
</van-tab>
</van-tabs>
</demo-section>
<van-tab :title="t('customIndexList')">
<van-index-bar :index-list="customIndexList">
<div v-for="index in customIndexList" :key="index">
<van-index-anchor :index="index">
{{ t('title') + index }}
</van-index-anchor>
<van-cell :title="t('text')" />
<van-cell :title="t('text')" />
<van-cell :title="t('text')" />
</div>
</van-index-bar>
</van-tab>
</van-tabs>
</template>
<script>

32
src/lazyload/demo/index.vue
View File

@ -1,23 +1,21 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<img v-for="img in imageList" :key="img" v-lazy="img" />
</demo-block>
<demo-block :title="t('basicUsage')">
<img v-for="img in imageList" :key="img" v-lazy="img" />
</demo-block>
<demo-block :title="t('title2')">
<div
v-for="img in backgroundImageList"
:key="img"
v-lazy:background-image="img"
/>
</demo-block>
<demo-block :title="t('title2')">
<div
v-for="img in backgroundImageList"
:key="img"
v-lazy:background-image="img"
/>
</demo-block>
<demo-block :title="t('title3')">
<lazy-component>
<img v-for="img in componentImageList" :key="img" v-lazy="img" />
</lazy-component>
</demo-block>
</demo-section>
<demo-block :title="t('title3')">
<lazy-component>
<img v-for="img in componentImageList" :key="img" v-lazy="img" />
</lazy-component>
</demo-block>
</template>
<script>

68
src/list/demo/index.vue
View File

@ -1,43 +1,41 @@
<template>
<demo-section>
<van-tabs>
<van-tab :title="t('basicUsage')">
<van-tabs>
<van-tab :title="t('basicUsage')">
<van-list
v-model:loading="list[0].loading"
:finished="list[0].finished"
:finished-text="t('finishedText')"
@load="onLoad(0)"
>
<van-cell v-for="item in list[0].items" :key="item" :title="item" />
</van-list>
</van-tab>
<van-tab :title="t('errorInfo')">
<van-list
v-model:loading="list[1].loading"
v-model:error="list[1].error"
:finished="list[1].finished"
:error-text="t('errorText')"
@load="onLoad(1)"
>
<van-cell v-for="item in list[1].items" :key="item" :title="item" />
</van-list>
</van-tab>
<van-tab :title="t('pullRefresh')">
<van-pull-refresh v-model="list[2].refreshing" @refresh="onRefresh(2)">
<van-list
v-model:loading="list[0].loading"
:finished="list[0].finished"
v-model:loading="list[2].loading"
:finished="list[2].finished"
:finished-text="t('finishedText')"
@load="onLoad(0)"
@load="onLoad(2)"
>
<van-cell v-for="item in list[0].items" :key="item" :title="item" />
<van-cell v-for="item in list[2].items" :key="item" :title="item" />
</van-list>
</van-tab>
<van-tab :title="t('errorInfo')">
<van-list
v-model:loading="list[1].loading"
v-model:error="list[1].error"
:finished="list[1].finished"
:error-text="t('errorText')"
@load="onLoad(1)"
>
<van-cell v-for="item in list[1].items" :key="item" :title="item" />
</van-list>
</van-tab>
<van-tab :title="t('pullRefresh')">
<van-pull-refresh v-model="list[2].refreshing" @refresh="onRefresh(2)">
<van-list
v-model:loading="list[2].loading"
:finished="list[2].finished"
:finished-text="t('finishedText')"
@load="onLoad(2)"
>
<van-cell v-for="item in list[2].items" :key="item" :title="item" />
</van-list>
</van-pull-refresh>
</van-tab>
</van-tabs>
</demo-section>
</van-pull-refresh>
</van-tab>
</van-tabs>
</template>
<script>

46
src/loading/demo/index.vue
View File

@ -1,32 +1,30 @@
<template>
<demo-section>
<demo-block :title="t('type')">
<van-loading />
<van-loading type="spinner" />
</demo-block>
<demo-block :title="t('type')">
<van-loading />
<van-loading type="spinner" />
</demo-block>
<demo-block :title="t('color')">
<van-loading color="#1989fa" />
<van-loading type="spinner" color="#1989fa" />
</demo-block>
<demo-block :title="t('color')">
<van-loading color="#1989fa" />
<van-loading type="spinner" color="#1989fa" />
</demo-block>
<demo-block :title="t('size')">
<van-loading size="24" />
<van-loading type="spinner" size="24" />
</demo-block>
<demo-block :title="t('size')">
<van-loading size="24" />
<van-loading type="spinner" size="24" />
</demo-block>
<demo-block :title="t('text')">
<van-loading size="24px">
{{ t('loading') }}
</van-loading>
</demo-block>
<demo-block :title="t('text')">
<van-loading size="24px">
{{ t('loading') }}
</van-loading>
</demo-block>
<demo-block :title="t('vertical')">
<van-loading size="24px" vertical>
{{ t('loading') }}
</van-loading>
</demo-block>
</demo-section>
<demo-block :title="t('vertical')">
<van-loading size="24px" vertical>
{{ t('loading') }}
</van-loading>
</demo-block>
</template>
<script>

36
src/nav-bar/demo/index.vue
View File

@ -1,24 +1,22 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-nav-bar
:title="t('title')"
:left-text="t('back')"
:right-text="t('button')"
left-arrow
@click-left="onClickLeft"
@click-right="onClickRight"
/>
</demo-block>
<demo-block :title="t('basicUsage')">
<van-nav-bar
:title="t('title')"
:left-text="t('back')"
:right-text="t('button')"
left-arrow
@click-left="onClickLeft"
@click-right="onClickRight"
/>
</demo-block>
<demo-block :title="t('useSlot')">
<van-nav-bar :title="t('title')" :left-text="t('back')" left-arrow>
<template #right>
<van-icon name="search" size="18" />
</template>
</van-nav-bar>
</demo-block>
</demo-section>
<demo-block :title="t('useSlot')">
<van-nav-bar :title="t('title')" :left-text="t('back')" left-arrow>
<template #right>
<van-icon name="search" size="18" />
</template>
</van-nav-bar>
</demo-block>
</template>
<script>

74
src/notice-bar/demo/index.vue
View File

@ -1,47 +1,45 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-notice-bar :text="t('text')" scrollable left-icon="volume-o" />
</demo-block>
<demo-block :title="t('basicUsage')">
<van-notice-bar :text="t('text')" scrollable left-icon="volume-o" />
</demo-block>
<demo-block :title="t('scrollable')">
<van-notice-bar scrollable :text="t('shortText')" />
<van-notice-bar :scrollable="false" :text="t('text')" />
</demo-block>
<demo-block :title="t('scrollable')">
<van-notice-bar scrollable :text="t('shortText')" />
<van-notice-bar :scrollable="false" :text="t('text')" />
</demo-block>
<demo-block :title="t('wrapable')">
<van-notice-bar wrapable :scrollable="false" :text="t('text')" />
</demo-block>
<demo-block :title="t('wrapable')">
<van-notice-bar wrapable :scrollable="false" :text="t('text')" />
</demo-block>
<demo-block :title="t('mode')">
<van-notice-bar mode="closeable" :text="t('shortText')" />
<van-notice-bar mode="link" :text="t('shortText')" />
</demo-block>
<demo-block :title="t('mode')">
<van-notice-bar mode="closeable" :text="t('shortText')" />
<van-notice-bar mode="link" :text="t('shortText')" />
</demo-block>
<demo-block :title="t('customStyle')">
<van-notice-bar
:text="t('shortText')"
color="#1989fa"
background="#ecf9ff"
left-icon="info-o"
/>
</demo-block>
<demo-block :title="t('customStyle')">
<van-notice-bar
:text="t('shortText')"
color="#1989fa"
background="#ecf9ff"
left-icon="info-o"
/>
</demo-block>
<demo-block v-if="!isWeapp" :title="t('verticalScroll')">
<van-notice-bar left-icon="volume-o" :scrollable="false">
<van-swipe
vertical
class="notice-swipe"
:autoplay="3000"
:show-indicators="false"
>
<van-swipe-item>{{ t('content') }} 1</van-swipe-item>
<van-swipe-item>{{ t('content') }} 2</van-swipe-item>
<van-swipe-item>{{ t('content') }} 3</van-swipe-item>
</van-swipe>
</van-notice-bar>
</demo-block>
</demo-section>
<demo-block v-if="!isWeapp" :title="t('verticalScroll')">
<van-notice-bar left-icon="volume-o" :scrollable="false">
<van-swipe
vertical
class="notice-swipe"
:autoplay="3000"
:show-indicators="false"
>
<van-swipe-item>{{ t('content') }} 1</van-swipe-item>
<van-swipe-item>{{ t('content') }} 2</van-swipe-item>
<van-swipe-item>{{ t('content') }} 3</van-swipe-item>
</van-swipe>
</van-notice-bar>
</demo-block>
</template>
<script>

54
src/notify/demo/index.vue
View File

@ -1,38 +1,32 @@
<template>
<demo-section>
<demo-block card :title="t('basicUsage')">
<van-cell is-link :title="t('basicUsage')" @click="showNotify" />
</demo-block>
<demo-block card :title="t('basicUsage')">
<van-cell is-link :title="t('basicUsage')" @click="showNotify" />
</demo-block>
<demo-block card :title="t('notifyType')">
<van-cell is-link :title="t('primary')" @click="showType('primary')" />
<van-cell is-link :title="t('success')" @click="showType('success')" />
<van-cell is-link :title="t('danger')" @click="showType('danger')" />
<van-cell is-link :title="t('warning')" @click="showType('warning')" />
</demo-block>
<demo-block card :title="t('notifyType')">
<van-cell is-link :title="t('primary')" @click="showType('primary')" />
<van-cell is-link :title="t('success')" @click="showType('success')" />
<van-cell is-link :title="t('danger')" @click="showType('danger')" />
<van-cell is-link :title="t('warning')" @click="showType('warning')" />
</demo-block>
<demo-block card :title="t('customNotify')">
<van-cell is-link :title="t('customColor')" @click="showCustomColor" />
<van-cell
is-link
:title="t('customDuration')"
@click="showCustomDuration"
/>
</demo-block>
<demo-block card :title="t('customNotify')">
<van-cell is-link :title="t('customColor')" @click="showCustomColor" />
<van-cell
is-link
:title="t('customDuration')"
@click="showCustomDuration"
/>
</demo-block>
<demo-block card :title="t('componentCall')">
<van-cell
is-link
:title="t('componentCall')"
@click="showComponentCall"
/>
<demo-block card :title="t('componentCall')">
<van-cell is-link :title="t('componentCall')" @click="showComponentCall" />
<van-notify v-model:show="show" type="success">
<van-icon name="bell" style="margin-right: 4px;" />
<span>{{ t('content') }}</span>
</van-notify>
</demo-block>
</demo-section>
<van-notify v-model:show="show" type="success">
<van-icon name="bell" style="margin-right: 4px;" />
<span>{{ t('content') }}</span>
</van-notify>
</demo-block>
</template>
<script>

142
src/number-keyboard/demo/index.vue
View File

@ -1,82 +1,80 @@
<template>
<demo-section>
<van-cell is-link @touchstart.stop="keyboard = 'default'">
{{ t('button1') }}
</van-cell>
<van-cell is-link @touchstart.stop="keyboard = 'custom'">
{{ t('button2') }}
</van-cell>
<van-cell is-link @touchstart.stop="keyboard = 'extraKey'">
{{ t('button3') }}
</van-cell>
<van-cell is-link @touchstart.stop="keyboard = 'title'">
{{ t('button4') }}
</van-cell>
<van-cell is-link @touchstart.stop="keyboard = 'multiExtraKey'">
{{ t('button5') }}
</van-cell>
<van-field
readonly
clickable
:label="t('bindValue')"
:model-value="value"
:placeholder="t('clickToInput')"
@touchstart.stop="keyboard = 'bindValue'"
/>
<van-cell is-link @touchstart.stop="keyboard = 'default'">
{{ t('button1') }}
</van-cell>
<van-cell is-link @touchstart.stop="keyboard = 'custom'">
{{ t('button2') }}
</van-cell>
<van-cell is-link @touchstart.stop="keyboard = 'extraKey'">
{{ t('button3') }}
</van-cell>
<van-cell is-link @touchstart.stop="keyboard = 'title'">
{{ t('button4') }}
</van-cell>
<van-cell is-link @touchstart.stop="keyboard = 'multiExtraKey'">
{{ t('button5') }}
</van-cell>
<van-field
readonly
clickable
:label="t('bindValue')"
:model-value="value"
:placeholder="t('clickToInput')"
@touchstart.stop="keyboard = 'bindValue'"
/>
<van-number-keyboard
:show="keyboard === 'default'"
@blur="keyboard = ''"
@input="onInput"
@delete="onDelete"
/>
<van-number-keyboard
:show="keyboard === 'default'"
@blur="keyboard = ''"
@input="onInput"
@delete="onDelete"
/>
<van-number-keyboard
:show="keyboard === 'custom'"
:close-button-text="t('close')"
theme="custom"
extra-key="."
@blur="keyboard = ''"
@input="onInput"
@delete="onDelete"
/>
<van-number-keyboard
:show="keyboard === 'custom'"
:close-button-text="t('close')"
theme="custom"
extra-key="."
@blur="keyboard = ''"
@input="onInput"
@delete="onDelete"
/>
<van-number-keyboard
:show="keyboard === 'extraKey'"
:close-button-text="t('close')"
extra-key="X"
@blur="keyboard = ''"
@input="onInput"
@delete="onDelete"
/>
<van-number-keyboard
:show="keyboard === 'extraKey'"
:close-button-text="t('close')"
extra-key="X"
@blur="keyboard = ''"
@input="onInput"
@delete="onDelete"
/>
<van-number-keyboard
:show="keyboard === 'title'"
:close-button-text="t('close')"
:title="t('title')"
extra-key="."
@blur="keyboard = ''"
@input="onInput"
@delete="onDelete"
/>
<van-number-keyboard
:show="keyboard === 'title'"
:close-button-text="t('close')"
:title="t('title')"
extra-key="."
@blur="keyboard = ''"
@input="onInput"
@delete="onDelete"
/>
<van-number-keyboard
:show="keyboard === 'multiExtraKey'"
:close-button-text="t('close')"
theme="custom"
:extra-key="['00', '.']"
@blur="keyboard = ''"
@input="onInput"
@delete="onDelete"
/>
<van-number-keyboard
:show="keyboard === 'multiExtraKey'"
:close-button-text="t('close')"
theme="custom"
:extra-key="['00', '.']"
@blur="keyboard = ''"
@input="onInput"
@delete="onDelete"
/>
<van-number-keyboard
v-model="value"
:show="keyboard === 'bindValue'"
maxlength="6"
@blur="keyboard = ''"
/>
</demo-section>
<van-number-keyboard
v-model="value"
:show="keyboard === 'bindValue'"
maxlength="6"
@blur="keyboard = ''"
/>
</template>
<script>

48
src/overlay/demo/index.vue
View File

@ -1,31 +1,27 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-button
type="primary"
:text="t('showOverlay')"
style="margin-left: 16px;"
@click="show = true"
/>
<demo-block :title="t('basicUsage')">
<van-button
type="primary"
:text="t('showOverlay')"
style="margin-left: 16px;"
@click="show = true"
/>
<van-overlay :show="show" @click="show = false" />
</demo-block>
<van-overlay :show="show" @click="show = false" />
</demo-block>
<demo-block :title="t('embeddedContent')">
<van-button
type="primary"
:text="t('embeddedContent')"
style="margin-left: 16px;"
@click="showEmbedded = true"
/>
<van-overlay :show="showEmbedded" @click="showEmbedded = false">
<div class="wrapper">
<div class="block" />
</div>
</van-overlay>
</demo-block>
</demo-section>
<demo-block :title="t('embeddedContent')">
<van-button
type="primary"
:text="t('embeddedContent')"
style="margin-left: 16px;"
@click="showEmbedded = true"
/>
<van-overlay :show="showEmbedded" @click="showEmbedded = false">
<div class="wrapper">
<div class="block" />
</div>
</van-overlay>
</demo-block>
</template>
<script>

90
src/pagination/demo/index.vue
View File

@ -1,53 +1,51 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-pagination
v-model="currentPage1"
:total-items="24"
:items-per-page="5"
:prev-text="t('prevText')"
:next-text="t('nextText')"
/>
</demo-block>
<demo-block :title="t('basicUsage')">
<van-pagination
v-model="currentPage1"
:total-items="24"
:items-per-page="5"
:prev-text="t('prevText')"
:next-text="t('nextText')"
/>
</demo-block>
<demo-block :title="t('title2')">
<van-pagination
v-model="currentPage2"
:page-count="12"
:prev-text="t('prevText')"
:next-text="t('nextText')"
mode="simple"
size="small"
/>
</demo-block>
<demo-block :title="t('title2')">
<van-pagination
v-model="currentPage2"
:page-count="12"
:prev-text="t('prevText')"
:next-text="t('nextText')"
mode="simple"
size="small"
/>
</demo-block>
<demo-block :title="t('title3')">
<van-pagination
v-model="currentPage3"
force-ellipses
:total-items="125"
:show-page-size="3"
:prev-text="t('prevText')"
:next-text="t('nextText')"
/>
</demo-block>
<demo-block :title="t('title3')">
<van-pagination
v-model="currentPage3"
force-ellipses
:total-items="125"
:show-page-size="3"
:prev-text="t('prevText')"
:next-text="t('nextText')"
/>
</demo-block>
<demo-block :title="t('title4')">
<van-pagination
v-model="currentPage4"
:total-items="125"
:show-page-size="5"
>
<template #prev-text>
<van-icon name="arrow-left" />
</template>
<template #next-text>
<van-icon name="arrow" />
</template>
<template #page="{ text }">{{ text }}</template>
</van-pagination>
</demo-block>
</demo-section>
<demo-block :title="t('title4')">
<van-pagination
v-model="currentPage4"
:total-items="125"
:show-page-size="5"
>
<template #prev-text>
<van-icon name="arrow-left" />
</template>
<template #next-text>
<van-icon name="arrow" />
</template>
<template #page="{ text }">{{ text }}</template>
</van-pagination>
</demo-block>
</template>
<script>

102
src/password-input/demo/index.vue
View File

@ -1,57 +1,55 @@
<template>
<demo-section>
<demo-block ref="basicUsage" :title="t('basicUsage')">
<van-password-input
:value="value.basicUsage"
:focused="current === 'basicUsage'"
@focus="current = 'basicUsage'"
/>
</demo-block>
<demo-block ref="customLength" :title="t('customLength')">
<van-password-input
:value="value.customLength"
:length="4"
:focused="current === 'customLength'"
@focus="current = 'customLength'"
/>
</demo-block>
<demo-block ref="addGutter" :title="t('addGutter')">
<van-password-input
:value="value.addGutter"
:gutter="10"
:focused="current === 'addGutter'"
@focus="current = 'addGutter'"
/>
</demo-block>
<demo-block ref="removeMask" :title="t('removeMask')">
<van-password-input
:mask="false"
:value="value.removeMask"
:focused="current === 'removeMask'"
@focus="current = 'removeMask'"
/>
</demo-block>
<demo-block ref="showInfo" :title="t('showInfo')">
<van-password-input
:info="t('info')"
:value="value.showInfo"
:error-info="errorInfo"
:focused="current === 'showInfo'"
@focus="current = 'showInfo'"
/>
</demo-block>
<van-number-keyboard
:show="!!current"
@blur="current = ''"
@input="onInput"
@delete="onDelete"
<demo-block ref="basicUsage" :title="t('basicUsage')">
<van-password-input
:value="value.basicUsage"
:focused="current === 'basicUsage'"
@focus="current = 'basicUsage'"
/>
</demo-section>
</demo-block>
<demo-block ref="customLength" :title="t('customLength')">
<van-password-input
:value="value.customLength"
:length="4"
:focused="current === 'customLength'"
@focus="current = 'customLength'"
/>
</demo-block>
<demo-block ref="addGutter" :title="t('addGutter')">
<van-password-input
:value="value.addGutter"
:gutter="10"
:focused="current === 'addGutter'"
@focus="current = 'addGutter'"
/>
</demo-block>
<demo-block ref="removeMask" :title="t('removeMask')">
<van-password-input
:mask="false"
:value="value.removeMask"
:focused="current === 'removeMask'"
@focus="current = 'removeMask'"
/>
</demo-block>
<demo-block ref="showInfo" :title="t('showInfo')">
<van-password-input
:info="t('info')"
:value="value.showInfo"
:error-info="errorInfo"
:focused="current === 'showInfo'"
@focus="current = 'showInfo'"
/>
</demo-block>
<van-number-keyboard
:show="!!current"
@blur="current = ''"
@input="onInput"
@delete="onDelete"
/>
</template>
<script>

124
src/picker/demo/index.vue
View File

@ -1,71 +1,69 @@
<template>
<demo-section>
<demo-block card :title="t('basicUsage')">
<demo-block card :title="t('basicUsage')">
<van-picker
:title="t('title')"
:columns="t('textColumns')"
@change="onChange1"
/>
</demo-block>
<demo-block card :title="t('defaultIndex')">
<van-picker
:title="t('title')"
:columns="t('textColumns')"
:default-index="2"
@change="onChange1"
/>
</demo-block>
<demo-block card :title="t('multipleColumns')">
<van-picker
:title="t('title')"
:columns="t('dateColumns')"
@cancel="onCancel"
@confirm="onConfirm"
/>
</demo-block>
<demo-block card v-if="!isWeapp" :title="t('cascade')">
<van-picker :title="t('title')" :columns="t('cascadeColumns')" />
</demo-block>
<demo-block card :title="t('disableOption')">
<van-picker :title="t('title')" :columns="t('disabledColumns')" />
</demo-block>
<demo-block card :title="t('setColumnValues')">
<van-picker
ref="picker"
:title="t('title')"
:columns="columns"
@change="onChange2"
/>
</demo-block>
<demo-block card :title="t('loadingStatus')">
<van-picker loading :title="t('title')" :columns="columns" />
</demo-block>
<demo-block card v-if="!isWeapp" :title="t('withPopup')">
<van-field
v-model="fieldValue"
readonly
clickable
:label="t('city')"
:placeholder="t('chooseCity')"
@click="onClickField"
/>
<van-popup v-model:show="showPicker" round position="bottom">
<van-picker
:title="t('title')"
:columns="t('textColumns')"
@change="onChange1"
@cancel="onCancel2"
@confirm="onConfirm2"
/>
</demo-block>
<demo-block card :title="t('defaultIndex')">
<van-picker
:title="t('title')"
:columns="t('textColumns')"
:default-index="2"
@change="onChange1"
/>
</demo-block>
<demo-block card :title="t('multipleColumns')">
<van-picker
:title="t('title')"
:columns="t('dateColumns')"
@cancel="onCancel"
@confirm="onConfirm"
/>
</demo-block>
<demo-block card v-if="!isWeapp" :title="t('cascade')">
<van-picker :title="t('title')" :columns="t('cascadeColumns')" />
</demo-block>
<demo-block card :title="t('disableOption')">
<van-picker :title="t('title')" :columns="t('disabledColumns')" />
</demo-block>
<demo-block card :title="t('setColumnValues')">
<van-picker
ref="picker"
:title="t('title')"
:columns="columns"
@change="onChange2"
/>
</demo-block>
<demo-block card :title="t('loadingStatus')">
<van-picker loading :title="t('title')" :columns="columns" />
</demo-block>
<demo-block card v-if="!isWeapp" :title="t('withPopup')">
<van-field
v-model="fieldValue"
readonly
clickable
:label="t('city')"
:placeholder="t('chooseCity')"
@click="onClickField"
/>
<van-popup v-model:show="showPicker" round position="bottom">
<van-picker
:title="t('title')"
:columns="t('textColumns')"
@cancel="onCancel2"
@confirm="onConfirm2"
/>
</van-popup>
</demo-block>
</demo-section>
</van-popup>
</demo-block>
</template>
<script>

178
src/popup/demo/index.vue
View File

@ -1,102 +1,96 @@
<template>
<demo-section>
<demo-block card :title="t('basicUsage')">
<van-cell :title="t('buttonBasic')" is-link @click="showBasic = true" />
<van-popup v-model:show="showBasic" :style="{ padding: '30px 50px' }">
{{ t('content') }}
</van-popup>
</demo-block>
<demo-block card :title="t('basicUsage')">
<van-cell :title="t('buttonBasic')" is-link @click="showBasic = true" />
<van-popup v-model:show="showBasic" :style="{ padding: '30px 50px' }">
{{ t('content') }}
</van-popup>
</demo-block>
<demo-block card :title="t('position')">
<van-cell :title="t('buttonTop')" is-link @click="showTop = true" />
<van-cell :title="t('buttonBottom')" is-link @click="showBottom = true" />
<van-cell :title="t('buttonLeft')" is-link @click="showLeft = true" />
<van-cell :title="t('buttonRight')" is-link @click="showRight = true" />
<demo-block card :title="t('position')">
<van-cell :title="t('buttonTop')" is-link @click="showTop = true" />
<van-cell :title="t('buttonBottom')" is-link @click="showBottom = true" />
<van-cell :title="t('buttonLeft')" is-link @click="showLeft = true" />
<van-cell :title="t('buttonRight')" is-link @click="showRight = true" />
<van-popup
v-model:show="showTop"
position="top"
:style="{ height: '30%' }"
/>
<van-popup
v-model:show="showBottom"
position="bottom"
:style="{ height: '30%' }"
/>
<van-popup
v-model:show="showLeft"
position="left"
:style="{ width: '30%', height: '100%' }"
/>
<van-popup
v-model:show="showRight"
position="right"
:style="{ width: '30%', height: '100%' }"
/>
</demo-block>
<van-popup
v-model:show="showTop"
position="top"
:style="{ height: '30%' }"
/>
<van-popup
v-model:show="showBottom"
position="bottom"
:style="{ height: '30%' }"
/>
<van-popup
v-model:show="showLeft"
position="left"
:style="{ width: '30%', height: '100%' }"
/>
<van-popup
v-model:show="showRight"
position="right"
:style="{ width: '30%', height: '100%' }"
/>
</demo-block>
<demo-block card :title="t('closeIcon')">
<van-cell :title="t('closeIcon')" is-link @click="showCloseIcon = true" />
<van-cell
:title="t('customCloseIcon')"
is-link
@click="showCustomCloseIcon = true"
/>
<van-cell
:title="t('customIconPosition')"
is-link
@click="showCustomIconPosition = true"
/>
<demo-block card :title="t('closeIcon')">
<van-cell :title="t('closeIcon')" is-link @click="showCloseIcon = true" />
<van-cell
:title="t('customCloseIcon')"
is-link
@click="showCustomCloseIcon = true"
/>
<van-cell
:title="t('customIconPosition')"
is-link
@click="showCustomIconPosition = true"
/>
<van-popup
v-model:show="showCloseIcon"
closeable
position="bottom"
:style="{ height: '30%' }"
/>
<van-popup
v-model:show="showCustomCloseIcon"
closeable
close-icon="close"
position="bottom"
:style="{ height: '30%' }"
/>
<van-popup
v-model:show="showCustomIconPosition"
closeable
close-icon-position="top-left"
position="bottom"
:style="{ height: '30%' }"
/>
</demo-block>
<van-popup
v-model:show="showCloseIcon"
closeable
position="bottom"
:style="{ height: '30%' }"
/>
<van-popup
v-model:show="showCustomCloseIcon"
closeable
close-icon="close"
position="bottom"
:style="{ height: '30%' }"
/>
<van-popup
v-model:show="showCustomIconPosition"
closeable
close-icon-position="top-left"
position="bottom"
:style="{ height: '30%' }"
/>
</demo-block>
<demo-block card :title="t('roundCorner')">
<van-cell
:title="t('roundCorner')"
is-link
@click="showRoundCorner = true"
/>
<van-popup
v-model:show="showRoundCorner"
round
position="bottom"
:style="{ height: '30%' }"
/>
</demo-block>
<demo-block card :title="t('roundCorner')">
<van-cell
:title="t('roundCorner')"
is-link
@click="showRoundCorner = true"
/>
<van-popup
v-model:show="showRoundCorner"
round
position="bottom"
:style="{ height: '30%' }"
/>
</demo-block>
<demo-block card v-if="!isWeapp" :title="t('teleport')">
<van-cell
:title="t('teleport')"
is-link
@click="showGetContainer = true"
/>
<van-popup
v-model:show="showGetContainer"
teleport="body"
:style="{ padding: '30px 50px' }"
/>
</demo-block>
</demo-section>
<demo-block card v-if="!isWeapp" :title="t('teleport')">
<van-cell :title="t('teleport')" is-link @click="showGetContainer = true" />
<van-popup
v-model:show="showGetContainer"
teleport="body"
:style="{ padding: '30px 50px' }"
/>
</demo-block>
</template>
<script>

44
src/progress/demo/index.vue
View File

@ -1,32 +1,26 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-progress :percentage="50" />
</demo-block>
<demo-block :title="t('basicUsage')">
<van-progress :percentage="50" />
</demo-block>
<demo-block v-if="!isWeapp" :title="t('strokeWidth')">
<van-progress :percentage="50" stroke-width="8" />
</demo-block>
<demo-block v-if="!isWeapp" :title="t('strokeWidth')">
<van-progress :percentage="50" stroke-width="8" />
</demo-block>
<demo-block :title="t('title2')">
<van-progress inactive :percentage="50" />
</demo-block>
<demo-block :title="t('title2')">
<van-progress inactive :percentage="50" />
</demo-block>
<demo-block :title="t('title3')">
<van-progress
color="#f2826a"
:percentage="25"
:pivot-text="t('orange')"
/>
<van-progress color="#ee0a24" :percentage="50" :pivot-text="t('red')" />
<van-progress
:percentage="75"
:pivot-text="t('purple')"
pivot-color="#7232dd"
color="linear-gradient(to right, #be99ff, #7232dd)"
/>
</demo-block>
</demo-section>
<demo-block :title="t('title3')">
<van-progress color="#f2826a" :percentage="25" :pivot-text="t('orange')" />
<van-progress color="#ee0a24" :percentage="50" :pivot-text="t('red')" />
<van-progress
:percentage="75"
:pivot-text="t('purple')"
pivot-color="#7232dd"
color="linear-gradient(to right, #be99ff, #7232dd)"
/>
</demo-block>
</template>
<script>

78
src/pull-refresh/demo/index.vue
View File

@ -1,46 +1,44 @@
<template>
<demo-section name="pull-refresh">
<van-tabs>
<van-tab :title="t('basicUsage')">
<van-pull-refresh v-model="isLoading" @refresh="onRefresh(true)">
<p>{{ tips }}</p>
</van-pull-refresh>
</van-tab>
<van-tabs>
<van-tab :title="t('basicUsage')">
<van-pull-refresh v-model="isLoading" @refresh="onRefresh(true)">
<p>{{ tips }}</p>
</van-pull-refresh>
</van-tab>
<van-tab :title="t('successTip')">
<van-pull-refresh
v-model="isLoading"
:success-text="t('success')"
@refresh="onRefresh(false)"
>
<p>{{ tips }}</p>
</van-pull-refresh>
</van-tab>
<van-tab :title="t('successTip')">
<van-pull-refresh
v-model="isLoading"
:success-text="t('success')"
@refresh="onRefresh(false)"
>
<p>{{ tips }}</p>
</van-pull-refresh>
</van-tab>
<van-tab :title="t('customTips')">
<van-pull-refresh
v-model="isLoading"
head-height="80"
@refresh="onRefresh(true)"
>
<template #pulling="{ distance }">
<img
class="doge"
src="https://b.yzcdn.cn/vant/doge.png"
:style="{ transform: `scale(${distance / 80})` }"
/>
</template>
<template #loosing>
<img src="https://b.yzcdn.cn/vant/doge.png" class="doge" />
</template>
<template #loading>
<img src="https://b.yzcdn.cn/vant/doge-fire.jpg" class="doge" />
</template>
<p>{{ tips }}</p>
</van-pull-refresh>
</van-tab>
</van-tabs>
</demo-section>
<van-tab :title="t('customTips')">
<van-pull-refresh
v-model="isLoading"
head-height="80"
@refresh="onRefresh(true)"
>
<template #pulling="{ distance }">
<img
class="doge"
src="https://b.yzcdn.cn/vant/doge.png"
:style="{ transform: `scale(${distance / 80})` }"
/>
</template>
<template #loosing>
<img src="https://b.yzcdn.cn/vant/doge.png" class="doge" />
</template>
<template #loading>
<img src="https://b.yzcdn.cn/vant/doge-fire.jpg" class="doge" />
</template>
<p>{{ tips }}</p>
</van-pull-refresh>
</van-tab>
</van-tabs>
</template>
<script>

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

@ -1,100 +1,98 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-radio-group v-model="radio1" class="demo-radio-group">
<van-radio name="1">{{ t('radio') }} 1</van-radio>
<van-radio name="2">{{ t('radio') }} 2</van-radio>
</van-radio-group>
</demo-block>
<demo-block :title="t('basicUsage')">
<van-radio-group v-model="radio1" class="demo-radio-group">
<van-radio name="1">{{ t('radio') }} 1</van-radio>
<van-radio name="2">{{ t('radio') }} 2</van-radio>
</van-radio-group>
</demo-block>
<demo-block v-if="!isWeapp" :title="t('horizontal')">
<van-radio-group
v-model="radioHorizontal"
class="demo-radio-group"
direction="horizontal"
>
<van-radio name="1">{{ t('radio') }} 1</van-radio>
<van-radio name="2">{{ t('radio') }} 2</van-radio>
</van-radio-group>
</demo-block>
<demo-block v-if="!isWeapp" :title="t('horizontal')">
<van-radio-group
v-model="radioHorizontal"
class="demo-radio-group"
direction="horizontal"
>
<van-radio name="1">{{ t('radio') }} 1</van-radio>
<van-radio name="2">{{ t('radio') }} 2</van-radio>
</van-radio-group>
</demo-block>
<demo-block :title="t('disabled')">
<van-radio-group v-model="radio2" class="demo-radio-group" disabled>
<van-radio name="1">{{ t('radio') }} 1</van-radio>
<van-radio name="2">{{ t('radio') }} 2</van-radio>
</van-radio-group>
</demo-block>
<demo-block :title="t('disabled')">
<van-radio-group v-model="radio2" class="demo-radio-group" disabled>
<van-radio name="1">{{ t('radio') }} 1</van-radio>
<van-radio name="2">{{ t('radio') }} 2</van-radio>
</van-radio-group>
</demo-block>
<demo-block :title="t('customShape')">
<van-radio-group v-model="radioShape" class="demo-radio-group">
<van-radio name="1" shape="square">{{ t('radio') }} 1</van-radio>
<van-radio name="2" shape="square">{{ t('radio') }} 2</van-radio>
</van-radio-group>
</demo-block>
<demo-block :title="t('customShape')">
<van-radio-group v-model="radioShape" class="demo-radio-group">
<van-radio name="1" shape="square">{{ t('radio') }} 1</van-radio>
<van-radio name="2" shape="square">{{ t('radio') }} 2</van-radio>
</van-radio-group>
</demo-block>
<demo-block :title="t('customColor')">
<van-radio-group v-model="radio3" class="demo-radio-group">
<van-radio name="1" checked-color="#07c160">
{{ t('radio') }} 1
</van-radio>
<van-radio name="2" checked-color="#07c160">
{{ t('radio') }} 2
</van-radio>
</van-radio-group>
</demo-block>
<demo-block :title="t('customColor')">
<van-radio-group v-model="radio3" class="demo-radio-group">
<van-radio name="1" checked-color="#07c160">
{{ t('radio') }} 1
</van-radio>
<van-radio name="2" checked-color="#07c160">
{{ t('radio') }} 2
</van-radio>
</van-radio-group>
</demo-block>
<demo-block :title="t('customIconSize')">
<van-radio-group v-model="radioIconSize" class="demo-radio-group">
<van-radio name="1" checked-color="#07c160" icon-size="24px">
{{ t('radio') }} 1
</van-radio>
<van-radio name="2" checked-color="#07c160" icon-size="24px">
{{ t('radio') }} 2
</van-radio>
</van-radio-group>
</demo-block>
<demo-block :title="t('customIconSize')">
<van-radio-group v-model="radioIconSize" class="demo-radio-group">
<van-radio name="1" checked-color="#07c160" icon-size="24px">
{{ t('radio') }} 1
</van-radio>
<van-radio name="2" checked-color="#07c160" icon-size="24px">
{{ t('radio') }} 2
</van-radio>
</van-radio-group>
</demo-block>
<demo-block :title="t('customIcon')">
<van-radio-group v-model="radio4" class="demo-radio-group">
<van-radio name="1">
{{ t('radio') }} 1
<template #icon="{ checked }">
<img :src="checked ? icon.active : icon.inactive" />
<demo-block :title="t('customIcon')">
<van-radio-group v-model="radio4" class="demo-radio-group">
<van-radio name="1">
{{ t('radio') }} 1
<template #icon="{ checked }">
<img :src="checked ? icon.active : icon.inactive" />
</template>
</van-radio>
<van-radio name="2">
{{ t('radio') }} 2
<template #icon="{ checked }">
<img :src="checked ? icon.active : icon.inactive" />
</template>
</van-radio>
</van-radio-group>
</demo-block>
<demo-block :title="t('disableLabel')">
<van-radio-group v-model="radioLabel" class="demo-radio-group">
<van-radio name="1" label-disabled>{{ t('radio') }} 1</van-radio>
<van-radio name="2" label-disabled>{{ t('radio') }} 2</van-radio>
</van-radio-group>
</demo-block>
<demo-block :title="t('withCell')">
<van-radio-group v-model="radio5">
<van-cell-group>
<van-cell clickable :title="t('radio') + 1" @click="radio5 = '1'">
<template #right-icon>
<van-radio name="1" />
</template>
</van-radio>
<van-radio name="2">
{{ t('radio') }} 2
<template #icon="{ checked }">
<img :src="checked ? icon.active : icon.inactive" />
</van-cell>
<van-cell clickable :title="t('radio') + 2" @click="radio5 = '2'">
<template #right-icon>
<van-radio name="2" />
</template>
</van-radio>
</van-radio-group>
</demo-block>
<demo-block :title="t('disableLabel')">
<van-radio-group v-model="radioLabel" class="demo-radio-group">
<van-radio name="1" label-disabled>{{ t('radio') }} 1</van-radio>
<van-radio name="2" label-disabled>{{ t('radio') }} 2</van-radio>
</van-radio-group>
</demo-block>
<demo-block :title="t('withCell')">
<van-radio-group v-model="radio5">
<van-cell-group>
<van-cell clickable :title="t('radio') + 1" @click="radio5 = '1'">
<template #right-icon>
<van-radio name="1" />
</template>
</van-cell>
<van-cell clickable :title="t('radio') + 2" @click="radio5 = '2'">
<template #right-icon>
<van-radio name="2" />
</template>
</van-cell>
</van-cell-group>
</van-radio-group>
</demo-block>
</demo-section>
</van-cell>
</van-cell-group>
</van-radio-group>
</demo-block>
</template>
<script>

74
src/rate/demo/index.vue
View File

@ -1,49 +1,47 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-rate v-model="value1" />
</demo-block>
<demo-block :title="t('basicUsage')">
<van-rate v-model="value1" />
</demo-block>
<demo-block :title="t('customIcon')">
<van-rate v-model="value2" icon="like" void-icon="like-o" />
</demo-block>
<demo-block :title="t('customIcon')">
<van-rate v-model="value2" icon="like" void-icon="like-o" />
</demo-block>
<demo-block :title="t('customStyle')">
<van-rate
v-model="value3"
:size="25"
color="#ffd21e"
void-icon="star"
void-color="#eee"
/>
</demo-block>
<demo-block :title="t('customStyle')">
<van-rate
v-model="value3"
:size="25"
color="#ffd21e"
void-icon="star"
void-color="#eee"
/>
</demo-block>
<demo-block :title="t('halfStar')">
<van-rate
v-model="value4"
:size="25"
allow-half
void-icon="star"
void-color="#eee"
/>
</demo-block>
<demo-block :title="t('halfStar')">
<van-rate
v-model="value4"
:size="25"
allow-half
void-icon="star"
void-color="#eee"
/>
</demo-block>
<demo-block :title="t('customCount')">
<van-rate v-model="value5" :count="6" />
</demo-block>
<demo-block :title="t('customCount')">
<van-rate v-model="value5" :count="6" />
</demo-block>
<demo-block :title="t('disabled')">
<van-rate v-model="value6" disabled />
</demo-block>
<demo-block :title="t('disabled')">
<van-rate v-model="value6" disabled />
</demo-block>
<demo-block :title="t('readonly')">
<van-rate v-model="value6" readonly />
</demo-block>
<demo-block :title="t('readonly')">
<van-rate v-model="value6" readonly />
</demo-block>
<demo-block v-if="!isWeapp" :title="t('changeEvent')">
<van-rate v-model="value7" @change="onChange" />
</demo-block>
</demo-section>
<demo-block v-if="!isWeapp" :title="t('changeEvent')">
<van-rate v-model="value7" @change="onChange" />
</demo-block>
</template>
<script>

92
src/search/demo/index.vue
View File

@ -1,56 +1,54 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-search v-model="value1" :placeholder="t('placeholder')" />
</demo-block>
<demo-block :title="t('basicUsage')">
<van-search v-model="value1" :placeholder="t('placeholder')" />
</demo-block>
<demo-block :title="t('listenToEvents')">
<form action="/">
<van-search
v-model="value5"
:placeholder="t('placeholder')"
show-action
@search="onSearch"
@cancel="onCancel"
/>
</form>
</demo-block>
<demo-block :title="t('inputAlign')">
<demo-block :title="t('listenToEvents')">
<form action="/">
<van-search
v-model="value4"
v-model="value5"
:placeholder="t('placeholder')"
input-align="center"
/>
</demo-block>
<demo-block :title="t('disabled')">
<van-search v-model="value3" :placeholder="t('placeholder')" disabled />
</demo-block>
<demo-block :title="t('background')">
<van-search
v-model="value2"
:placeholder="t('placeholder')"
shape="round"
background="#4fc08d"
/>
</demo-block>
<demo-block :title="t('customButton')">
<van-search
v-model="value6"
show-action
:label="t('label')"
:placeholder="t('placeholder')"
@search="onSearch"
>
<template #action>
<div @click="onSearch">{{ t('search') }}</div>
</template>
</van-search>
</demo-block>
</demo-section>
@cancel="onCancel"
/>
</form>
</demo-block>
<demo-block :title="t('inputAlign')">
<van-search
v-model="value4"
:placeholder="t('placeholder')"
input-align="center"
/>
</demo-block>
<demo-block :title="t('disabled')">
<van-search v-model="value3" :placeholder="t('placeholder')" disabled />
</demo-block>
<demo-block :title="t('background')">
<van-search
v-model="value2"
:placeholder="t('placeholder')"
shape="round"
background="#4fc08d"
/>
</demo-block>
<demo-block :title="t('customButton')">
<van-search
v-model="value6"
show-action
:label="t('label')"
:placeholder="t('placeholder')"
@search="onSearch"
>
<template #action>
<div @click="onSearch">{{ t('search') }}</div>
</template>
</van-search>
</demo-block>
</template>
<script>

82
src/share-sheet/demo/index.vue
View File

@ -1,53 +1,43 @@
<template>
<demo-section>
<demo-block card :title="t('basicUsage')">
<van-cell is-link :title="t('showSheet')" @click="show.basic = true" />
<van-share-sheet
v-model:show="show.basic"
:title="t('title')"
:options="options"
@select="onSelect"
/>
</demo-block>
<demo-block card :title="t('basicUsage')">
<van-cell is-link :title="t('showSheet')" @click="show.basic = true" />
<van-share-sheet
v-model:show="show.basic"
:title="t('title')"
:options="options"
@select="onSelect"
/>
</demo-block>
<demo-block card :title="t('multiLine')">
<van-cell
is-link
:title="t('showSheet')"
@click="show.multiLine = true"
/>
<van-share-sheet
v-model:show="show.multiLine"
:title="t('title')"
:options="multiLineOptions"
@select="onSelect"
/>
</demo-block>
<demo-block card :title="t('multiLine')">
<van-cell is-link :title="t('showSheet')" @click="show.multiLine = true" />
<van-share-sheet
v-model:show="show.multiLine"
:title="t('title')"
:options="multiLineOptions"
@select="onSelect"
/>
</demo-block>
<demo-block card :title="t('customIcon')">
<van-cell
is-link
:title="t('showSheet')"
@click="show.customIcon = true"
/>
<van-share-sheet
v-model:show="show.customIcon"
:options="customIconOptions"
@select="onSelect"
/>
</demo-block>
<demo-block card :title="t('customIcon')">
<van-cell is-link :title="t('showSheet')" @click="show.customIcon = true" />
<van-share-sheet
v-model:show="show.customIcon"
:options="customIconOptions"
@select="onSelect"
/>
</demo-block>
<demo-block card :title="t('withDesc')">
<van-cell is-link :title="t('showSheet')" @click="show.withDesc = true" />
<van-share-sheet
v-model:show="show.withDesc"
:title="t('title')"
:options="optionsWithDesc"
:description="t('description')"
@select="onSelect"
/>
</demo-block>
</demo-section>
<demo-block card :title="t('withDesc')">
<van-cell is-link :title="t('showSheet')" @click="show.withDesc = true" />
<van-share-sheet
v-model:show="show.withDesc"
:title="t('title')"
:options="optionsWithDesc"
:description="t('description')"
@select="onSelect"
/>
</demo-block>
</template>
<script>

70
src/sidebar/demo/index.vue
View File

@ -1,43 +1,41 @@
<template>
<demo-section>
<van-grid :column-num="2" :border="false">
<van-grid-item>
<h3 class="demo-sidebar-title">{{ t('basicUsage') }}</h3>
<van-sidebar v-model="activeKey1">
<van-sidebar-item :title="t('title')" />
<van-sidebar-item :title="t('title')" />
<van-sidebar-item :title="t('title')" />
</van-sidebar>
</van-grid-item>
<van-grid :column-num="2" :border="false">
<van-grid-item>
<h3 class="demo-sidebar-title">{{ t('basicUsage') }}</h3>
<van-sidebar v-model="activeKey1">
<van-sidebar-item :title="t('title')" />
<van-sidebar-item :title="t('title')" />
<van-sidebar-item :title="t('title')" />
</van-sidebar>
</van-grid-item>
<van-grid-item>
<h3 class="demo-sidebar-title">{{ t('showBadge') }}</h3>
<van-sidebar v-model="activeKey2">
<van-sidebar-item :title="t('title')" dot />
<van-sidebar-item :title="t('title')" badge="5" />
<van-sidebar-item :title="t('title')" badge="99+" />
</van-sidebar>
</van-grid-item>
<van-grid-item>
<h3 class="demo-sidebar-title">{{ t('showBadge') }}</h3>
<van-sidebar v-model="activeKey2">
<van-sidebar-item :title="t('title')" dot />
<van-sidebar-item :title="t('title')" badge="5" />
<van-sidebar-item :title="t('title')" badge="99+" />
</van-sidebar>
</van-grid-item>
<van-grid-item>
<h3 class="demo-sidebar-title">{{ t('disabled') }}</h3>
<van-sidebar v-model="activeKey3">
<van-sidebar-item :title="t('title')" />
<van-sidebar-item :title="t('title')" disabled />
<van-sidebar-item :title="t('title')" />
</van-sidebar>
</van-grid-item>
<van-grid-item>
<h3 class="demo-sidebar-title">{{ t('disabled') }}</h3>
<van-sidebar v-model="activeKey3">
<van-sidebar-item :title="t('title')" />
<van-sidebar-item :title="t('title')" disabled />
<van-sidebar-item :title="t('title')" />
</van-sidebar>
</van-grid-item>
<van-grid-item>
<h3 class="demo-sidebar-title">{{ t('changeEvent') }}</h3>
<van-sidebar v-model="activeKey4" @change="onChange">
<van-sidebar-item :title="t('title') + 1" />
<van-sidebar-item :title="t('title') + 2" />
<van-sidebar-item :title="t('title') + 3" />
</van-sidebar>
</van-grid-item>
</van-grid>
</demo-section>
<van-grid-item>
<h3 class="demo-sidebar-title">{{ t('changeEvent') }}</h3>
<van-sidebar v-model="activeKey4" @change="onChange">
<van-sidebar-item :title="t('title') + 1" />
<van-sidebar-item :title="t('title') + 2" />
<van-sidebar-item :title="t('title') + 3" />
</van-sidebar>
</van-grid-item>
</van-grid>
</template>
<script>

36
src/skeleton/demo/index.vue
View File

@ -1,26 +1,24 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-skeleton title :row="3" />
</demo-block>
<demo-block :title="t('basicUsage')">
<van-skeleton title :row="3" />
</demo-block>
<demo-block :title="t('showAvatar')">
<van-skeleton title avatar :row="3" />
</demo-block>
<demo-block :title="t('showAvatar')">
<van-skeleton title avatar :row="3" />
</demo-block>
<demo-block :title="t('showChildren')">
<van-switch v-model="show" size="24px" />
<van-skeleton title avatar :row="3" :loading="!show">
<div class="demo-preview">
<img src="https://img.yzcdn.cn/vant/logo.png" />
<div class="demo-content">
<h3>{{ t('title') }}</h3>
<p>{{ t('desc') }}</p>
</div>
<demo-block :title="t('showChildren')">
<van-switch v-model="show" size="24px" />
<van-skeleton title avatar :row="3" :loading="!show">
<div class="demo-preview">
<img src="https://img.yzcdn.cn/vant/logo.png" />
<div class="demo-content">
<h3>{{ t('title') }}</h3>
<p>{{ t('desc') }}</p>
</div>
</van-skeleton>
</demo-block>
</demo-section>
</div>
</van-skeleton>
</demo-block>
</template>
<script>

84
src/slider/demo/index.vue
View File

@ -1,55 +1,53 @@
<template>
<demo-section>
<demo-block :title="t('title1')">
<van-slider v-model="value1" @change="onChange" />
</demo-block>
<demo-block :title="t('title1')">
<van-slider v-model="value1" @change="onChange" />
</demo-block>
<demo-block :title="t('title2')">
<van-slider range v-model="value2" @change="onChange" />
</demo-block>
<demo-block :title="t('title2')">
<van-slider range v-model="value2" @change="onChange" />
</demo-block>
<demo-block :title="t('title3')">
<van-slider v-model="value3" :min="-50" :max="50" @change="onChange" />
</demo-block>
<demo-block :title="t('title3')">
<van-slider v-model="value3" :min="-50" :max="50" @change="onChange" />
</demo-block>
<demo-block :title="t('title4')">
<van-slider v-model="value4" disabled />
</demo-block>
<demo-block :title="t('title4')">
<van-slider v-model="value4" disabled />
</demo-block>
<demo-block :title="t('title5')">
<van-slider v-model="value5" :step="10" @change="onChange" />
</demo-block>
<demo-block :title="t('title5')">
<van-slider v-model="value5" :step="10" @change="onChange" />
</demo-block>
<demo-block :title="t('customStyle')">
<demo-block :title="t('customStyle')">
<van-slider
v-model="value6"
bar-height="4px"
active-color="#ee0a24"
@change="onChange"
/>
</demo-block>
<demo-block :title="t('customButton')">
<van-slider v-model="value7" active-color="#ee0a24">
<template #button>
<div class="custom-button">{{ value7 }}</div>
</template>
</van-slider>
</demo-block>
<demo-block v-if="!isWeapp" :title="t('vertical')">
<div :style="{ height: '150px', paddingLeft: '30px' }">
<van-slider v-model="value8" vertical @change="onChange" />
<van-slider
v-model="value6"
bar-height="4px"
active-color="#ee0a24"
v-model="value9"
range
vertical
style="margin-left: 100px;"
@change="onChange"
/>
</demo-block>
<demo-block :title="t('customButton')">
<van-slider v-model="value7" active-color="#ee0a24">
<template #button>
<div class="custom-button">{{ value7 }}</div>
</template>
</van-slider>
</demo-block>
<demo-block v-if="!isWeapp" :title="t('vertical')">
<div :style="{ height: '150px', paddingLeft: '30px' }">
<van-slider v-model="value8" vertical @change="onChange" />
<van-slider
v-model="value9"
range
vertical
style="margin-left: 100px;"
@change="onChange"
/>
</div>
</demo-block>
</demo-section>
</div>
</demo-block>
</template>
<script>

72
src/stepper/demo/index.vue
View File

@ -1,50 +1,48 @@
<template>
<demo-section>
<van-cell center :title="t('basicUsage')">
<van-stepper v-model="stepper1" />
</van-cell>
<van-cell center :title="t('basicUsage')">
<van-stepper v-model="stepper1" />
</van-cell>
<van-cell center :title="t('step')">
<van-stepper v-model="stepper2" step="2" />
</van-cell>
<van-cell center :title="t('step')">
<van-stepper v-model="stepper2" step="2" />
</van-cell>
<van-cell center :title="t('range')">
<van-stepper v-model="stepper3" :min="5" :max="8" />
</van-cell>
<van-cell center :title="t('range')">
<van-stepper v-model="stepper3" :min="5" :max="8" />
</van-cell>
<van-cell center :title="t('integer')">
<van-stepper v-model="stepper4" integer />
</van-cell>
<van-cell center :title="t('integer')">
<van-stepper v-model="stepper4" integer />
</van-cell>
<van-cell center :title="t('disabled')">
<van-stepper v-model="stepper5" disabled />
</van-cell>
<van-cell center :title="t('disabled')">
<van-stepper v-model="stepper5" disabled />
</van-cell>
<van-cell center :title="t('disableInput')">
<van-stepper v-model="disabledInput" disable-input />
</van-cell>
<van-cell center :title="t('disableInput')">
<van-stepper v-model="disabledInput" disable-input />
</van-cell>
<van-cell center :title="t('decimalLength')">
<van-stepper v-model="stepper8" :decimal-length="1" step="0.2" />
</van-cell>
<van-cell center :title="t('decimalLength')">
<van-stepper v-model="stepper8" :decimal-length="1" step="0.2" />
</van-cell>
<van-cell center :title="t('customSize')">
<van-stepper v-model="stepper7" button-size="32px" input-width="40px" />
</van-cell>
<van-cell center :title="t('customSize')">
<van-stepper v-model="stepper7" button-size="32px" input-width="40px" />
</van-cell>
<van-cell center :title="t('asyncChange')">
<van-stepper :model-value="stepper6" async-change @change="onChange" />
</van-cell>
<van-cell center :title="t('asyncChange')">
<van-stepper :model-value="stepper6" async-change @change="onChange" />
</van-cell>
<van-cell v-if="!isWeapp" center :title="t('roundTheme')">
<van-stepper
v-model="stepperRound"
theme="round"
button-size="22"
disable-input
/>
</van-cell>
</demo-section>
<van-cell v-if="!isWeapp" center :title="t('roundTheme')">
<van-stepper
v-model="stepperRound"
theme="round"
button-size="22"
disable-input
/>
</van-cell>
</template>
<script>

78
src/steps/demo/index.vue
View File

@ -1,47 +1,45 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-steps :active="active">
<van-step>{{ t('step1') }}</van-step>
<van-step>{{ t('step2') }}</van-step>
<van-step>{{ t('step3') }}</van-step>
<van-step>{{ t('step4') }}</van-step>
</van-steps>
<demo-block :title="t('basicUsage')">
<van-steps :active="active">
<van-step>{{ t('step1') }}</van-step>
<van-step>{{ t('step2') }}</van-step>
<van-step>{{ t('step3') }}</van-step>
<van-step>{{ t('step4') }}</van-step>
</van-steps>
<van-button @click="nextStep">{{ t('nextStep') }}</van-button>
</demo-block>
<van-button @click="nextStep">{{ t('nextStep') }}</van-button>
</demo-block>
<demo-block :title="t('customStyle')">
<van-steps
:active="active"
active-icon="success"
inactive-icon="arrow"
active-color="#38f"
>
<van-step>{{ t('step1') }}</van-step>
<van-step>{{ t('step2') }}</van-step>
<van-step>{{ t('step3') }}</van-step>
<van-step>{{ t('step4') }}</van-step>
</van-steps>
</demo-block>
<demo-block :title="t('customStyle')">
<van-steps
:active="active"
active-icon="success"
inactive-icon="arrow"
active-color="#38f"
>
<van-step>{{ t('step1') }}</van-step>
<van-step>{{ t('step2') }}</van-step>
<van-step>{{ t('step3') }}</van-step>
<van-step>{{ t('step4') }}</van-step>
</van-steps>
</demo-block>
<demo-block :title="t('title3')">
<van-steps :active="0" direction="vertical">
<van-step>
<h3>{{ t('status1') }}</h3>
<p>2016-07-12 12:40</p>
</van-step>
<van-step>
<h3>{{ t('status2') }}</h3>
<p>2016-07-11 10:00</p>
</van-step>
<van-step>
<h3>{{ t('status3') }}</h3>
<p>2016-07-10 09:30</p>
</van-step>
</van-steps>
</demo-block>
</demo-section>
<demo-block :title="t('title3')">
<van-steps :active="0" direction="vertical">
<van-step>
<h3>{{ t('status1') }}</h3>
<p>2016-07-12 12:40</p>
</van-step>
<van-step>
<h3>{{ t('status2') }}</h3>
<p>2016-07-11 10:00</p>
</van-step>
<van-step>
<h3>{{ t('status3') }}</h3>
<p>2016-07-10 09:30</p>
</van-step>
</van-steps>
</demo-block>
</template>
<script>

48
src/sticky/demo/index.vue
View File

@ -1,31 +1,29 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-sticky>
<van-button type="primary" style="margin-left: 15px;">
{{ t('basicUsage') }}
<demo-block :title="t('basicUsage')">
<van-sticky>
<van-button type="primary" style="margin-left: 15px;">
{{ t('basicUsage') }}
</van-button>
</van-sticky>
</demo-block>
<demo-block :title="t('offsetTop')">
<van-sticky :offset-top="50">
<van-button type="primary" style="margin-left: 115px;">
{{ t('offsetTop') }}
</van-button>
</van-sticky>
</demo-block>
<demo-block v-if="!isWeapp" :title="t('setContainer')">
<div ref="container" style="height: 150px; background-color: #fff;">
<van-sticky :container="container">
<van-button type="warning" style="margin-left: 215px;">
{{ t('setContainer') }}
</van-button>
</van-sticky>
</demo-block>
<demo-block :title="t('offsetTop')">
<van-sticky :offset-top="50">
<van-button type="primary" style="margin-left: 115px;">
{{ t('offsetTop') }}
</van-button>
</van-sticky>
</demo-block>
<demo-block v-if="!isWeapp" :title="t('setContainer')">
<div ref="container" style="height: 150px; background-color: #fff;">
<van-sticky :container="container">
<van-button type="warning" style="margin-left: 215px;">
{{ t('setContainer') }}
</van-button>
</van-sticky>
</div>
</demo-block>
</demo-section>
</div>
</demo-block>
</template>
<script>

40
src/style/demo/index.vue
View File

@ -1,30 +1,24 @@
<template>
<demo-section>
<demo-block :title="t('ellipsis')">
<div class="van-ellipsis">{{ t('text1') }}</div>
<div class="van-multi-ellipsis--l2">{{ t('text2') }}</div>
</demo-block>
<demo-block :title="t('ellipsis')">
<div class="van-ellipsis">{{ t('text1') }}</div>
<div class="van-multi-ellipsis--l2">{{ t('text2') }}</div>
</demo-block>
<demo-block card :title="t('hairline')">
<div class="van-hairline--top" />
</demo-block>
<demo-block card :title="t('hairline')">
<div class="van-hairline--top" />
</demo-block>
<demo-block card :title="t('animation')">
<van-cell is-link title="Fade" @click="animate('van-fade')" />
<van-cell is-link title="Slide Up" @click="animate('van-slide-up')" />
<van-cell is-link title="Slide Down" @click="animate('van-slide-down')" />
<van-cell is-link title="Slide Left" @click="animate('van-slide-left')" />
<van-cell
is-link
title="Slide Right"
@click="animate('van-slide-right')"
/>
</demo-block>
<demo-block card :title="t('animation')">
<van-cell is-link title="Fade" @click="animate('van-fade')" />
<van-cell is-link title="Slide Up" @click="animate('van-slide-up')" />
<van-cell is-link title="Slide Down" @click="animate('van-slide-down')" />
<van-cell is-link title="Slide Left" @click="animate('van-slide-left')" />
<van-cell is-link title="Slide Right" @click="animate('van-slide-right')" />
</demo-block>
<transition :name="transitionName">
<div v-show="show" class="demo-animate-block" />
</transition>
</demo-section>
<transition :name="transitionName">
<div v-show="show" class="demo-animate-block" />
</transition>
</template>
<script>

82
src/submit-bar/demo/index.vue
View File

@ -1,49 +1,47 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-submit-bar
:price="3050"
:button-text="t('submit')"
@submit="onClickButton"
/>
</demo-block>
<demo-block :title="t('basicUsage')">
<van-submit-bar
:price="3050"
:button-text="t('submit')"
@submit="onClickButton"
/>
</demo-block>
<demo-block :title="t('disabled')">
<van-submit-bar
disabled
:price="3050"
:button-text="t('submit')"
:tip="t('tip1')"
tip-icon="info-o"
@submit="onClickButton"
/>
</demo-block>
<demo-block :title="t('disabled')">
<van-submit-bar
disabled
:price="3050"
:button-text="t('submit')"
:tip="t('tip1')"
tip-icon="info-o"
@submit="onClickButton"
/>
</demo-block>
<demo-block :title="t('loadingStatus')">
<van-submit-bar
loading
:price="3050"
:button-text="t('submit')"
@submit="onClickButton"
/>
</demo-block>
<demo-block :title="t('loadingStatus')">
<van-submit-bar
loading
:price="3050"
:button-text="t('submit')"
@submit="onClickButton"
/>
</demo-block>
<demo-block :title="t('advancedUsage')">
<van-submit-bar
:price="3050"
:button-text="t('submit')"
@submit="onClickButton"
>
<van-checkbox v-model="checked">{{ t('check') }}</van-checkbox>
<template #tip>
{{ t('tip2') }}
<span class="edit-address" @click="onClickLink">
{{ t('tip3') }}
</span>
</template>
</van-submit-bar>
</demo-block>
</demo-section>
<demo-block :title="t('advancedUsage')">
<van-submit-bar
:price="3050"
:button-text="t('submit')"
@submit="onClickButton"
>
<van-checkbox v-model="checked">{{ t('check') }}</van-checkbox>
<template #tip>
{{ t('tip2') }}
<span class="edit-address" @click="onClickLink">
{{ t('tip3') }}
</span>
</template>
</van-submit-bar>
</demo-block>
</template>
<script>

88
src/swipe-cell/demo/index.vue
View File

@ -1,52 +1,48 @@
<template>
<div>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-swipe-cell>
<template #left>
<van-button square type="primary" :text="t('select')" />
</template>
<van-cell :border="false" :title="t('title')" :value="t('content')" />
<template #right>
<van-button square type="danger" :text="t('delete')" />
<van-button square type="primary" :text="t('collect')" />
</template>
</van-swipe-cell>
</demo-block>
<demo-block :title="t('basicUsage')">
<van-swipe-cell>
<template #left>
<van-button square type="primary" :text="t('select')" />
</template>
<van-cell :border="false" :title="t('title')" :value="t('content')" />
<template #right>
<van-button square type="danger" :text="t('delete')" />
<van-button square type="primary" :text="t('collect')" />
</template>
</van-swipe-cell>
</demo-block>
<demo-block :title="t('customContent')">
<van-swipe-cell>
<van-card
num="2"
price="2.00"
:desc="t('desc')"
:title="t('cardTitle')"
:thumb="imageURL"
/>
<template #right>
<van-button
square
type="danger"
class="delete-button"
:text="t('delete')"
/>
</template>
</van-swipe-cell>
</demo-block>
<demo-block :title="t('customContent')">
<van-swipe-cell>
<van-card
num="2"
price="2.00"
:desc="t('desc')"
:title="t('cardTitle')"
:thumb="imageURL"
/>
<template #right>
<van-button
square
type="danger"
class="delete-button"
:text="t('delete')"
/>
</template>
</van-swipe-cell>
</demo-block>
<demo-block :title="t('beforeClose')">
<van-swipe-cell :before-close="beforeClose">
<template #left>
<van-button square type="primary" :text="t('select')" />
</template>
<van-cell :border="false" :title="t('title')" :value="t('content')" />
<template #right>
<van-button square type="danger" :text="t('delete')" />
</template>
</van-swipe-cell>
</demo-block>
</demo-section>
</div>
<demo-block :title="t('beforeClose')">
<van-swipe-cell :before-close="beforeClose">
<template #left>
<van-button square type="primary" :text="t('select')" />
</template>
<van-cell :border="false" :title="t('title')" :value="t('content')" />
<template #right>
<van-button square type="danger" :text="t('delete')" />
</template>
</van-swipe-cell>
</demo-block>
</template>
<script>

118
src/swipe/demo/index.vue
View File

@ -1,70 +1,68 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-swipe :autoplay="3000" indicator-color="white">
<van-swipe-item>1</van-swipe-item>
<van-swipe-item>2</van-swipe-item>
<van-swipe-item>3</van-swipe-item>
<van-swipe-item>4</van-swipe-item>
</van-swipe>
</demo-block>
<demo-block :title="t('basicUsage')">
<van-swipe :autoplay="3000" indicator-color="white">
<van-swipe-item>1</van-swipe-item>
<van-swipe-item>2</van-swipe-item>
<van-swipe-item>3</van-swipe-item>
<van-swipe-item>4</van-swipe-item>
</van-swipe>
</demo-block>
<demo-block :title="t('title2')">
<van-swipe :autoplay="3000">
<van-swipe-item v-for="(image, index) in images" :key="index">
<img :src="image" />
<!-- TODO -->
<!-- <img v-lazy="image" /> -->
</van-swipe-item>
</van-swipe>
</demo-block>
<demo-block :title="t('title2')">
<van-swipe :autoplay="3000">
<van-swipe-item v-for="(image, index) in images" :key="index">
<img :src="image" />
<!-- TODO -->
<!-- <img v-lazy="image" /> -->
</van-swipe-item>
</van-swipe>
</demo-block>
<demo-block :title="t('title3')">
<van-swipe indicator-color="white" @change="onChange1">
<van-swipe-item>1</van-swipe-item>
<van-swipe-item>2</van-swipe-item>
<van-swipe-item>3</van-swipe-item>
<van-swipe-item>4</van-swipe-item>
</van-swipe>
</demo-block>
<demo-block :title="t('title3')">
<van-swipe indicator-color="white" @change="onChange1">
<van-swipe-item>1</van-swipe-item>
<van-swipe-item>2</van-swipe-item>
<van-swipe-item>3</van-swipe-item>
<van-swipe-item>4</van-swipe-item>
</van-swipe>
</demo-block>
<demo-block :title="t('title4')">
<van-swipe
vertical
:autoplay="3000"
indicator-color="white"
style="height: 200px;"
class="demo-swipe--vertical"
>
<van-swipe-item>1</van-swipe-item>
<van-swipe-item>2</van-swipe-item>
<van-swipe-item>3</van-swipe-item>
<van-swipe-item>4</van-swipe-item>
</van-swipe>
</demo-block>
<demo-block :title="t('title4')">
<van-swipe
vertical
:autoplay="3000"
indicator-color="white"
style="height: 200px;"
class="demo-swipe--vertical"
>
<van-swipe-item>1</van-swipe-item>
<van-swipe-item>2</van-swipe-item>
<van-swipe-item>3</van-swipe-item>
<van-swipe-item>4</van-swipe-item>
</van-swipe>
</demo-block>
<demo-block :title="t('title5')">
<van-swipe :width="300" :loop="false" indicator-color="white">
<van-swipe-item>1</van-swipe-item>
<van-swipe-item>2</van-swipe-item>
<van-swipe-item>3</van-swipe-item>
<van-swipe-item>4</van-swipe-item>
</van-swipe>
</demo-block>
<demo-block :title="t('title5')">
<van-swipe :width="300" :loop="false" indicator-color="white">
<van-swipe-item>1</van-swipe-item>
<van-swipe-item>2</van-swipe-item>
<van-swipe-item>3</van-swipe-item>
<van-swipe-item>4</van-swipe-item>
</van-swipe>
</demo-block>
<demo-block :title="t('title6')">
<van-swipe @change="onChange2">
<van-swipe-item>1</van-swipe-item>
<van-swipe-item>2</van-swipe-item>
<van-swipe-item>3</van-swipe-item>
<van-swipe-item>4</van-swipe-item>
<demo-block :title="t('title6')">
<van-swipe @change="onChange2">
<van-swipe-item>1</van-swipe-item>
<van-swipe-item>2</van-swipe-item>
<van-swipe-item>3</van-swipe-item>
<van-swipe-item>4</van-swipe-item>
<template #indicator>
<div class="custom-indicator">{{ current + 1 }}/4</div>
</template>
</van-swipe>
</demo-block>
</demo-section>
<template #indicator>
<div class="custom-indicator">{{ current + 1 }}/4</div>
</template>
</van-swipe>
</demo-block>
</template>
<script>

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

@ -1,41 +1,39 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-switch v-model="checked" />
</demo-block>
<demo-block :title="t('basicUsage')">
<van-switch v-model="checked" />
</demo-block>
<demo-block :title="t('disabled')">
<van-switch v-model="checked" disabled />
</demo-block>
<demo-block :title="t('disabled')">
<van-switch v-model="checked" disabled />
</demo-block>
<demo-block :title="t('loadingStatus')">
<van-switch v-model="checked" loading />
</demo-block>
<demo-block :title="t('loadingStatus')">
<van-switch v-model="checked" loading />
</demo-block>
<demo-block :title="t('customSize')">
<van-switch v-model="checked2" size="24px" />
</demo-block>
<demo-block :title="t('customSize')">
<van-switch v-model="checked2" size="24px" />
</demo-block>
<demo-block :title="t('customColor')">
<van-switch
v-model="checked3"
active-color="#07c160"
inactive-color="#ee0a24"
/>
</demo-block>
<demo-block :title="t('customColor')">
<van-switch
v-model="checked3"
active-color="#07c160"
inactive-color="#ee0a24"
/>
</demo-block>
<demo-block :title="t('asyncControl')">
<van-switch :model-value="checked4" @update:model-value="onInput" />
</demo-block>
<demo-block :title="t('asyncControl')">
<van-switch :model-value="checked4" @update:model-value="onInput" />
</demo-block>
<demo-block :title="t('withCell')">
<van-cell center :title="t('title')">
<template #right-icon>
<van-switch v-model="checked5" size="24" />
</template>
</van-cell>
</demo-block>
</demo-section>
<demo-block :title="t('withCell')">
<van-cell center :title="t('title')">
<template #right-icon>
<van-switch v-model="checked5" size="24" />
</template>
</van-cell>
</demo-block>
</template>
<script>

182
src/tab/demo/index.vue
View File

@ -1,107 +1,105 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-tabs v-model:active="active">
<van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
{{ t('content') }} {{ index }}
</van-tab>
</van-tabs>
</demo-block>
<demo-block :title="t('basicUsage')">
<van-tabs v-model:active="active">
<van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
{{ t('content') }} {{ index }}
</van-tab>
</van-tabs>
</demo-block>
<demo-block :title="t('matchByName')">
<van-tabs v-model:active="activeName">
<van-tab name="a" :title="t('tab') + 1"> {{ t('content') }} 1 </van-tab>
<van-tab name="b" :title="t('tab') + 2"> {{ t('content') }} 2 </van-tab>
<van-tab name="c" :title="t('tab') + 3"> {{ t('content') }} 3 </van-tab>
</van-tabs>
</demo-block>
<demo-block :title="t('matchByName')">
<van-tabs v-model:active="activeName">
<van-tab name="a" :title="t('tab') + 1"> {{ t('content') }} 1 </van-tab>
<van-tab name="b" :title="t('tab') + 2"> {{ t('content') }} 2 </van-tab>
<van-tab name="c" :title="t('tab') + 3"> {{ t('content') }} 3 </van-tab>
</van-tabs>
</demo-block>
<demo-block :title="t('title2')">
<van-tabs>
<van-tab v-for="index in 8" :title="t('tab') + index" :key="index">
{{ t('content') }} {{ index }}
</van-tab>
</van-tabs>
</demo-block>
<demo-block :title="t('title2')">
<van-tabs>
<van-tab v-for="index in 8" :title="t('tab') + index" :key="index">
{{ t('content') }} {{ index }}
</van-tab>
</van-tabs>
</demo-block>
<demo-block :title="t('title3')">
<van-tabs @disabled="onClickDisabled">
<van-tab
v-for="index in 3"
:title="t('tab') + index"
:disabled="index === 2"
:key="index"
>
{{ t('content') }} {{ index }}
</van-tab>
</van-tabs>
</demo-block>
<demo-block :title="t('title3')">
<van-tabs @disabled="onClickDisabled">
<van-tab
v-for="index in 3"
:title="t('tab') + index"
:disabled="index === 2"
:key="index"
>
{{ t('content') }} {{ index }}
</van-tab>
</van-tabs>
</demo-block>
<demo-block :title="t('title4')">
<van-tabs type="card">
<van-tab v-for="index in 3" :title="t('tab') + index" :key="index">
{{ t('content') }} {{ index }}
</van-tab>
</van-tabs>
</demo-block>
<demo-block :title="t('title4')">
<van-tabs type="card">
<van-tab v-for="index in 3" :title="t('tab') + index" :key="index">
{{ t('content') }} {{ index }}
</van-tab>
</van-tabs>
</demo-block>
<demo-block :title="t('title5')">
<van-tabs @click="onClick">
<van-tab v-for="index in 2" :title="t('tab') + index" :key="index">
{{ t('content') }} {{ index }}
</van-tab>
</van-tabs>
</demo-block>
<demo-block :title="t('title5')">
<van-tabs @click="onClick">
<van-tab v-for="index in 2" :title="t('tab') + index" :key="index">
{{ t('content') }} {{ index }}
</van-tab>
</van-tabs>
</demo-block>
<demo-block :title="t('title6')">
<van-tabs :active="active" sticky>
<van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
{{ t('content') }} {{ index }}
</van-tab>
</van-tabs>
</demo-block>
<demo-block :title="t('title6')">
<van-tabs :active="active" sticky>
<van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
{{ t('content') }} {{ index }}
</van-tab>
</van-tabs>
</demo-block>
<demo-block v-if="!isWeapp" :title="t('title7')">
<van-tabs :active="active">
<van-tab v-for="index in 2" :key="index">
<template #title> <van-icon name="more-o" />{{ t('tab') }} </template>
{{ t('content') }} {{ index }}
</van-tab>
</van-tabs>
</demo-block>
<demo-block v-if="!isWeapp" :title="t('title7')">
<van-tabs :active="active">
<van-tab v-for="index in 2" :key="index">
<template #title> <van-icon name="more-o" />{{ t('tab') }} </template>
{{ t('content') }} {{ index }}
</van-tab>
</van-tabs>
</demo-block>
<demo-block :title="t('title8')">
<van-tabs animated>
<van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
{{ t('content') }} {{ index }}
</van-tab>
</van-tabs>
</demo-block>
<demo-block :title="t('title8')">
<van-tabs animated>
<van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
{{ t('content') }} {{ index }}
</van-tab>
</van-tabs>
</demo-block>
<demo-block :title="t('title9')">
<van-tabs :active="active" swipeable>
<van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
{{ t('content') }} {{ index }}
</van-tab>
</van-tabs>
</demo-block>
<demo-block :title="t('title9')">
<van-tabs :active="active" swipeable>
<van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
{{ t('content') }} {{ index }}
</van-tab>
</van-tabs>
</demo-block>
<demo-block v-if="!isWeapp" :title="t('title10')">
<van-tabs scrollspy sticky>
<van-tab :title="t('tab') + index" v-for="index in 8" :key="index">
{{ t('content') }} {{ index }}
</van-tab>
</van-tabs>
</demo-block>
<demo-block v-if="!isWeapp" :title="t('title10')">
<van-tabs scrollspy sticky>
<van-tab :title="t('tab') + index" v-for="index in 8" :key="index">
{{ t('content') }} {{ index }}
</van-tab>
</van-tabs>
</demo-block>
<demo-block v-if="!isWeapp" :title="t('beforeChange')">
<van-tabs :before-change="beforeChange">
<van-tab :title="t('tab') + index" v-for="index in 4" :key="index">
{{ t('content') }} {{ index }}
</van-tab>
</van-tabs>
</demo-block>
</demo-section>
<demo-block v-if="!isWeapp" :title="t('beforeChange')">
<van-tabs :before-change="beforeChange">
<van-tab :title="t('tab') + index" v-for="index in 4" :key="index">
{{ t('content') }} {{ index }}
</van-tab>
</van-tabs>
</demo-block>
</template>
<script>

134
src/tabbar/demo/index.vue
View File

@ -1,79 +1,73 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-tabbar v-model="active">
<van-tabbar-item icon="home-o">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="search">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="friends-o">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="setting-o">{{ t('tab') }}</van-tabbar-item>
</van-tabbar>
</demo-block>
<demo-block :title="t('basicUsage')">
<van-tabbar v-model="active">
<van-tabbar-item icon="home-o">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="search">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="friends-o">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="setting-o">{{ t('tab') }}</van-tabbar-item>
</van-tabbar>
</demo-block>
<demo-block :title="t('matchByName')">
<van-tabbar v-model="activeName">
<van-tabbar-item name="home" icon="home-o">
{{ t('tab') }}
</van-tabbar-item>
<van-tabbar-item name="search" icon="search">
{{ t('tab') }}
</van-tabbar-item>
<van-tabbar-item name="friends" icon="friends-o">
{{ t('tab') }}
</van-tabbar-item>
<van-tabbar-item name="setting" icon="setting-o">
{{ t('tab') }}
</van-tabbar-item>
</van-tabbar>
</demo-block>
<demo-block :title="t('matchByName')">
<van-tabbar v-model="activeName">
<van-tabbar-item name="home" icon="home-o">
{{ t('tab') }}
</van-tabbar-item>
<van-tabbar-item name="search" icon="search">
{{ t('tab') }}
</van-tabbar-item>
<van-tabbar-item name="friends" icon="friends-o">
{{ t('tab') }}
</van-tabbar-item>
<van-tabbar-item name="setting" icon="setting-o">
{{ t('tab') }}
</van-tabbar-item>
</van-tabbar>
</demo-block>
<demo-block :title="t('badge')">
<van-tabbar v-model="active2">
<van-tabbar-item icon="home-o">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="search" dot>{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="friends-o" badge="5">
{{ t('tab') }}
</van-tabbar-item>
<van-tabbar-item icon="setting-o" badge="20">
{{ t('tab') }}
</van-tabbar-item>
</van-tabbar>
</demo-block>
<demo-block :title="t('badge')">
<van-tabbar v-model="active2">
<van-tabbar-item icon="home-o">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="search" dot>{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="friends-o" badge="5">
{{ t('tab') }}
</van-tabbar-item>
<van-tabbar-item icon="setting-o" badge="20">
{{ t('tab') }}
</van-tabbar-item>
</van-tabbar>
</demo-block>
<demo-block :title="t('customIcon')">
<van-tabbar v-model="active3">
<van-tabbar-item badge="3">
<span>{{ t('custom') }}</span>
<template #icon="props">
<img :src="props.active ? icon.active : icon.inactive" />
</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>
</van-tabbar>
</demo-block>
<demo-block :title="t('customIcon')">
<van-tabbar v-model="active3">
<van-tabbar-item badge="3">
<span>{{ t('custom') }}</span>
<template #icon="props">
<img :src="props.active ? icon.active : icon.inactive" />
</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>
</van-tabbar>
</demo-block>
<demo-block :title="t('customColor')">
<van-tabbar
v-model="active4"
active-color="#07c160"
inactive-color="#000"
>
<van-tabbar-item icon="home-o">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="search">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="friends-o">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="setting-o">{{ t('tab') }}</van-tabbar-item>
</van-tabbar>
</demo-block>
<demo-block :title="t('customColor')">
<van-tabbar v-model="active4" active-color="#07c160" inactive-color="#000">
<van-tabbar-item icon="home-o">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="search">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="friends-o">{{ t('tab') }}</van-tabbar-item>
<van-tabbar-item icon="setting-o">{{ t('tab') }}</van-tabbar-item>
</van-tabbar>
</demo-block>
<demo-block :title="t('switchEvent')">
<van-tabbar v-model="active5" @change="onChange">
<van-tabbar-item icon="home-o">{{ t('tab') + 1 }}</van-tabbar-item>
<van-tabbar-item icon="search">{{ t('tab') + 2 }}</van-tabbar-item>
<van-tabbar-item icon="friends-o">{{ t('tab') + 3 }}</van-tabbar-item>
<van-tabbar-item icon="setting-o">{{ t('tab') + 4 }}</van-tabbar-item>
</van-tabbar>
</demo-block>
</demo-section>
<demo-block :title="t('switchEvent')">
<van-tabbar v-model="active5" @change="onChange">
<van-tabbar-item icon="home-o">{{ t('tab') + 1 }}</van-tabbar-item>
<van-tabbar-item icon="search">{{ t('tab') + 2 }}</van-tabbar-item>
<van-tabbar-item icon="friends-o">{{ t('tab') + 3 }}</van-tabbar-item>
<van-tabbar-item icon="setting-o">{{ t('tab') + 4 }}</van-tabbar-item>
</van-tabbar>
</demo-block>
</template>
<script>

118
src/tag/demo/index.vue
View File

@ -1,67 +1,65 @@
<template>
<demo-section>
<demo-block card :title="t('basicUsage')">
<van-cell :title="`primary ${t('type')}`">
<van-tag type="primary">{{ t('tag') }}</van-tag>
</van-cell>
<van-cell :title="`success ${t('type')}`">
<van-tag type="success">{{ t('tag') }}</van-tag>
</van-cell>
<van-cell :title="`danger ${t('type')}`">
<van-tag type="danger">{{ t('tag') }}</van-tag>
</van-cell>
<van-cell :title="`warning ${t('type')}`">
<van-tag type="warning">{{ t('tag') }}</van-tag>
</van-cell>
</demo-block>
<demo-block card :title="t('basicUsage')">
<van-cell :title="`primary ${t('type')}`">
<van-tag type="primary">{{ t('tag') }}</van-tag>
</van-cell>
<van-cell :title="`success ${t('type')}`">
<van-tag type="success">{{ t('tag') }}</van-tag>
</van-cell>
<van-cell :title="`danger ${t('type')}`">
<van-tag type="danger">{{ t('tag') }}</van-tag>
</van-cell>
<van-cell :title="`warning ${t('type')}`">
<van-tag type="warning">{{ t('tag') }}</van-tag>
</van-cell>
</demo-block>
<demo-block card :title="t('tagStyle')">
<van-cell :title="t('plain')">
<van-tag plain type="primary">{{ t('tag') }}</van-tag>
</van-cell>
<van-cell :title="t('round')">
<van-tag round type="primary">{{ t('tag') }}</van-tag>
</van-cell>
<van-cell :title="t('mark')">
<van-tag mark type="primary">{{ t('tag') }}</van-tag>
</van-cell>
<van-cell :title="t('closeable')">
<van-tag
closeable
:show="show"
size="medium"
type="primary"
@close="close"
>
{{ t('tag') }}
</van-tag>
</van-cell>
</demo-block>
<demo-block card :title="t('tagStyle')">
<van-cell :title="t('plain')">
<van-tag plain type="primary">{{ t('tag') }}</van-tag>
</van-cell>
<van-cell :title="t('round')">
<van-tag round type="primary">{{ t('tag') }}</van-tag>
</van-cell>
<van-cell :title="t('mark')">
<van-tag mark type="primary">{{ t('tag') }}</van-tag>
</van-cell>
<van-cell :title="t('closeable')">
<van-tag
closeable
:show="show"
size="medium"
type="primary"
@close="close"
>
{{ t('tag') }}
</van-tag>
</van-cell>
</demo-block>
<demo-block card :title="t('customSize')">
<van-cell :title="t('smallSize')">
<van-tag type="primary">{{ t('tag') }}</van-tag>
</van-cell>
<van-cell :title="t('mediumSize')">
<van-tag type="primary" size="medium">{{ t('tag') }}</van-tag>
</van-cell>
<van-cell :title="t('largeSize')">
<van-tag type="primary" size="large">{{ t('tag') }}</van-tag>
</van-cell>
</demo-block>
<demo-block card :title="t('customSize')">
<van-cell :title="t('smallSize')">
<van-tag type="primary">{{ t('tag') }}</van-tag>
</van-cell>
<van-cell :title="t('mediumSize')">
<van-tag type="primary" size="medium">{{ t('tag') }}</van-tag>
</van-cell>
<van-cell :title="t('largeSize')">
<van-tag type="primary" size="large">{{ t('tag') }}</van-tag>
</van-cell>
</demo-block>
<demo-block card :title="t('customColor')">
<van-cell :title="t('customBgColor')">
<van-tag color="#7232dd">{{ t('tag') }}</van-tag>
</van-cell>
<van-cell :title="t('customTextColor')">
<van-tag color="#ffe1e1" text-color="#ad0000">{{ t('tag') }}</van-tag>
</van-cell>
<van-cell :title="t('customPlainColor')">
<van-tag color="#7232dd" plain>{{ t('tag') }}</van-tag>
</van-cell>
</demo-block>
</demo-section>
<demo-block card :title="t('customColor')">
<van-cell :title="t('customBgColor')">
<van-tag color="#7232dd">{{ t('tag') }}</van-tag>
</van-cell>
<van-cell :title="t('customTextColor')">
<van-tag color="#ffe1e1" text-color="#ad0000">{{ t('tag') }}</van-tag>
</van-cell>
<van-cell :title="t('customPlainColor')">
<van-tag color="#7232dd" plain>{{ t('tag') }}</van-tag>
</van-cell>
</demo-block>
</template>
<script>

54
src/toast/demo/index.vue
View File

@ -1,35 +1,33 @@
<template>
<demo-section>
<demo-block card :title="t('basicUsage')">
<van-cell is-link :title="t('title1')" @click="$toast(t('text'))" />
<van-cell is-link :title="t('title2')" @click="showLoadingToast()" />
<van-cell is-link :title="t('success')" @click="showSuccessToast" />
<van-cell is-link :title="t('fail')" @click="showFailToast" />
</demo-block>
<demo-block card :title="t('basicUsage')">
<van-cell is-link :title="t('title1')" @click="$toast(t('text'))" />
<van-cell is-link :title="t('title2')" @click="showLoadingToast()" />
<van-cell is-link :title="t('success')" @click="showSuccessToast" />
<van-cell is-link :title="t('fail')" @click="showFailToast" />
</demo-block>
<demo-block card v-if="!isWeapp" :title="t('customIcon')">
<van-cell is-link :title="t('customIcon')" @click="showIconToast" />
<van-cell is-link :title="t('customImage')" @click="showImageToast" />
<van-cell
is-link
:title="t('loadingType')"
@click="showLoadingToast('spinner')"
/>
</demo-block>
<demo-block card v-if="!isWeapp" :title="t('customIcon')">
<van-cell is-link :title="t('customIcon')" @click="showIconToast" />
<van-cell is-link :title="t('customImage')" @click="showImageToast" />
<van-cell
is-link
:title="t('loadingType')"
@click="showLoadingToast('spinner')"
/>
</demo-block>
<demo-block card v-if="!isWeapp" :title="t('customPosition')">
<van-cell is-link :title="t('positionTop')" @click="showTopToast" />
<van-cell is-link :title="t('positionBottom')" @click="showBottomToast" />
</demo-block>
<demo-block card v-if="!isWeapp" :title="t('customPosition')">
<van-cell is-link :title="t('positionTop')" @click="showTopToast" />
<van-cell is-link :title="t('positionBottom')" @click="showBottomToast" />
</demo-block>
<demo-block card :title="t('updateMessage')">
<van-cell
is-link
:title="t('updateMessage')"
@click="showCustomizedToast"
/>
</demo-block>
</demo-section>
<demo-block card :title="t('updateMessage')">
<van-cell
is-link
:title="t('updateMessage')"
@click="showCustomizedToast"
/>
</demo-block>
</template>
<script>

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

@ -1,51 +1,49 @@
<template>
<demo-section>
<demo-block :title="t('radioMode')">
<van-tree-select
v-model:active-id="activeId"
v-model:main-active-index="activeIndex"
:items="items"
/>
</demo-block>
<demo-block :title="t('radioMode')">
<van-tree-select
v-model:active-id="activeId"
v-model:main-active-index="activeIndex"
:items="items"
/>
</demo-block>
<demo-block :title="t('multipleMode')">
<van-tree-select
v-model:active-id="activeIds"
v-model:main-active-index="activeIndex2"
:items="items"
/>
</demo-block>
<demo-block :title="t('multipleMode')">
<van-tree-select
v-model:active-id="activeIds"
v-model:main-active-index="activeIndex2"
:items="items"
/>
</demo-block>
<demo-block :title="t('customContent')">
<van-tree-select
v-model:main-active-index="activeIndex3"
height="55vw"
:items="simpleItems"
>
<template #content>
<van-image
v-if="activeIndex3 === 0"
:show-loading="false"
src="https://img.yzcdn.cn/vant/apple-1.jpg"
/>
<van-image
v-if="activeIndex3 === 1"
:show-loading="false"
src="https://img.yzcdn.cn/vant/apple-2.jpg"
/>
</template>
</van-tree-select>
</demo-block>
<demo-block :title="t('customContent')">
<van-tree-select
v-model:main-active-index="activeIndex3"
height="55vw"
:items="simpleItems"
>
<template #content>
<van-image
v-if="activeIndex3 === 0"
:show-loading="false"
src="https://img.yzcdn.cn/vant/apple-1.jpg"
/>
<van-image
v-if="activeIndex3 === 1"
:show-loading="false"
src="https://img.yzcdn.cn/vant/apple-2.jpg"
/>
</template>
</van-tree-select>
</demo-block>
<demo-block :title="t('showBadge')">
<van-tree-select
v-model:active-id="activeId2"
v-model:main-active-index="activeIndex4"
height="55vw"
:items="badgeItems"
/>
</demo-block>
</demo-section>
<demo-block :title="t('showBadge')">
<van-tree-select
v-model:active-id="activeId2"
v-model:main-active-index="activeIndex4"
height="55vw"
:items="badgeItems"
/>
</demo-block>
</template>
<script>

82
src/uploader/demo/index.vue
View File

@ -1,54 +1,52 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-uploader :after-read="afterRead" />
</demo-block>
<demo-block :title="t('basicUsage')">
<van-uploader :after-read="afterRead" />
</demo-block>
<demo-block :title="t('preview')">
<van-uploader v-model="fileList" multiple accept="*" />
</demo-block>
<demo-block :title="t('preview')">
<van-uploader v-model="fileList" multiple accept="*" />
</demo-block>
<demo-block v-if="!isWeapp" :title="t('status')">
<van-uploader v-model="statusFileList" :after-read="afterReadFailed" />
</demo-block>
<demo-block v-if="!isWeapp" :title="t('status')">
<van-uploader v-model="statusFileList" :after-read="afterReadFailed" />
</demo-block>
<demo-block :title="t('maxCount')">
<van-uploader v-model="fileList2" multiple :max-count="2" />
</demo-block>
<demo-block :title="t('maxCount')">
<van-uploader v-model="fileList2" multiple :max-count="2" />
</demo-block>
<demo-block :title="t('maxSize')">
<van-uploader
v-model="fileList4"
multiple
:max-size="500 * 1024"
@oversize="onOversize"
/>
</demo-block>
<demo-block :title="t('maxSize')">
<van-uploader
v-model="fileList4"
multiple
:max-size="500 * 1024"
@oversize="onOversize"
/>
</demo-block>
<demo-block :title="t('customUpload')">
<van-uploader>
<van-button type="primary" icon="plus">
{{ t('upload') }}
</van-button>
</van-uploader>
</demo-block>
<demo-block :title="t('customUpload')">
<van-uploader>
<van-button type="primary" icon="plus">
{{ t('upload') }}
</van-button>
</van-uploader>
</demo-block>
<demo-block :title="t('previewCover')">
<van-uploader v-model="previewCoverFiles">
<template #preview-cover="{ file }">
<div class="preview-cover van-ellipsis">{{ file.name }}</div>
</template>
</van-uploader>
</demo-block>
<demo-block :title="t('previewCover')">
<van-uploader v-model="previewCoverFiles">
<template #preview-cover="{ file }">
<div class="preview-cover van-ellipsis">{{ file.name }}</div>
</template>
</van-uploader>
</demo-block>
<demo-block :title="t('beforeRead')">
<van-uploader v-model="fileList3" :before-read="beforeRead" />
</demo-block>
<demo-block :title="t('beforeRead')">
<van-uploader v-model="fileList3" :before-read="beforeRead" />
</demo-block>
<demo-block :title="t('disabled')">
<van-uploader :after-read="afterRead" disabled />
</demo-block>
</demo-section>
<demo-block :title="t('disabled')">
<van-uploader :after-read="afterRead" disabled />
</demo-block>
</template>
<script>