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> <template>
<demo-section> <demo-block title="基础用法">
<demo-block title="基础用法"> <demo-button type="primary" style="margin-left: 15px;">按钮</demo-button>
<demo-button type="primary" style="margin-left: 15px;">按钮</demo-button> </demo-block>
</demo-block>
<demo-block title="自定义颜色"> <demo-block title="自定义颜色">
<demo-button color="#03a9f4" style="margin-left: 15px;">按钮</demo-button> <demo-button color="#03a9f4" style="margin-left: 15px;">按钮</demo-button>
</demo-block> </demo-block>
</demo-section>
</template> </template>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,123 +1,121 @@
<template> <template>
<demo-section> <demo-block card :title="t('basicUsage')">
<demo-block card :title="t('basicUsage')"> <van-cell
<van-cell is-link
is-link :title="t('selectSingle')"
:title="t('selectSingle')" :value="formatFullDate(date.selectSingle)"
:value="formatFullDate(date.selectSingle)" @click="show('single', '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-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> </template>
<script> <script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,49 +1,43 @@
<template> <template>
<demo-section> <demo-block :title="t('basicUsage')">
<demo-block :title="t('basicUsage')"> <van-count-down :time="time" />
<van-count-down :time="time" /> </demo-block>
</demo-block>
<demo-block :title="t('customFormat')"> <demo-block :title="t('customFormat')">
<van-count-down :time="time" :format="t('formatWithDay')" /> <van-count-down :time="time" :format="t('formatWithDay')" />
</demo-block> </demo-block>
<demo-block :title="t('millisecond')"> <demo-block :title="t('millisecond')">
<van-count-down millisecond :time="time" format="HH:mm:ss:SS" /> <van-count-down millisecond :time="time" format="HH:mm:ss:SS" />
</demo-block> </demo-block>
<demo-block :title="t('customStyle')"> <demo-block :title="t('customStyle')">
<van-count-down :time="time"> <van-count-down :time="time">
<template #default="currentTime"> <template #default="currentTime">
<span class="block">{{ currentTime.hours }}</span> <span class="block">{{ currentTime.hours }}</span>
<span class="colon">:</span> <span class="colon">:</span>
<span class="block">{{ currentTime.minutes }}</span> <span class="block">{{ currentTime.minutes }}</span>
<span class="colon">:</span> <span class="colon">:</span>
<span class="block">{{ currentTime.seconds }}</span> <span class="block">{{ currentTime.seconds }}</span>
</template> </template>
</van-count-down> </van-count-down>
</demo-block> </demo-block>
<demo-block :title="t('manualControl')"> <demo-block :title="t('manualControl')">
<van-count-down <van-count-down
ref="countDown" ref="countDown"
millisecond millisecond
:time="3000" :time="3000"
:auto-start="false" :auto-start="false"
format="ss:SSS" format="ss:SSS"
@finish="$toast(t('finished'))" @finish="$toast(t('finished'))"
/> />
<van-grid clickable :column-num="3"> <van-grid clickable :column-num="3">
<van-grid-item icon="play-circle-o" :text="t('start')" @click="start" /> <van-grid-item icon="play-circle-o" :text="t('start')" @click="start" />
<van-grid-item <van-grid-item icon="pause-circle-o" :text="t('pause')" @click="pause" />
icon="pause-circle-o" <van-grid-item icon="replay" :text="t('reset')" @click="reset" />
:text="t('pause')" </van-grid>
@click="pause" </demo-block>
/>
<van-grid-item icon="replay" :text="t('reset')" @click="reset" />
</van-grid>
</demo-block>
</demo-section>
</template> </template>
<script> <script>

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

@ -1,28 +1,26 @@
<template> <template>
<demo-section> <demo-block :title="t('basicUsage')">
<demo-block :title="t('basicUsage')"> <van-coupon-cell
<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" :coupons="coupons"
:chosen-coupon="chosenCoupon" :chosen-coupon="chosenCoupon"
@click="showList = true" :disabled-coupons="disabledCoupons"
:show-count="false"
@change="onChange"
@exchange="onExchange"
/> />
<van-popup </van-popup>
v-model:show="showList" </demo-block>
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>
</template> </template>
<script> <script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,43 +1,41 @@
<template> <template>
<demo-section> <van-tabs>
<van-tabs> <van-tab :title="t('basicUsage')">
<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 <van-list
v-model:loading="list[0].loading" v-model:loading="list[2].loading"
:finished="list[0].finished" :finished="list[2].finished"
:finished-text="t('finishedText')" :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-list>
</van-tab> </van-pull-refresh>
</van-tab>
<van-tab :title="t('errorInfo')"> </van-tabs>
<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>
</template> </template>
<script> <script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,57 +1,55 @@
<template> <template>
<demo-section> <demo-block ref="basicUsage" :title="t('basicUsage')">
<demo-block ref="basicUsage" :title="t('basicUsage')"> <van-password-input
<van-password-input :value="value.basicUsage"
:value="value.basicUsage" :focused="current === 'basicUsage'"
:focused="current === 'basicUsage'" @focus="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-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> </template>
<script> <script>

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

@ -1,71 +1,69 @@
<template> <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 <van-picker
:title="t('title')" :title="t('title')"
:columns="t('textColumns')" :columns="t('textColumns')"
@change="onChange1" @cancel="onCancel2"
@confirm="onConfirm2"
/> />
</demo-block> </van-popup>
</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>
</template> </template>
<script> <script>

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

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

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

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

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

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

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

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

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

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

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

@ -1,56 +1,54 @@
<template> <template>
<demo-section> <demo-block :title="t('basicUsage')">
<demo-block :title="t('basicUsage')"> <van-search v-model="value1" :placeholder="t('placeholder')" />
<van-search v-model="value1" :placeholder="t('placeholder')" /> </demo-block>
</demo-block>
<demo-block :title="t('listenToEvents')"> <demo-block :title="t('listenToEvents')">
<form action="/"> <form action="/">
<van-search
v-model="value5"
:placeholder="t('placeholder')"
show-action
@search="onSearch"
@cancel="onCancel"
/>
</form>
</demo-block>
<demo-block :title="t('inputAlign')">
<van-search <van-search
v-model="value4" v-model="value5"
:placeholder="t('placeholder')" :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 show-action
:label="t('label')"
:placeholder="t('placeholder')"
@search="onSearch" @search="onSearch"
> @cancel="onCancel"
<template #action> />
<div @click="onSearch">{{ t('search') }}</div> </form>
</template> </demo-block>
</van-search>
</demo-block> <demo-block :title="t('inputAlign')">
</demo-section> <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> </template>
<script> <script>

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

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

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

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

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

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

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

@ -1,55 +1,53 @@
<template> <template>
<demo-section> <demo-block :title="t('title1')">
<demo-block :title="t('title1')"> <van-slider v-model="value1" @change="onChange" />
<van-slider v-model="value1" @change="onChange" /> </demo-block>
</demo-block>
<demo-block :title="t('title2')"> <demo-block :title="t('title2')">
<van-slider range v-model="value2" @change="onChange" /> <van-slider range v-model="value2" @change="onChange" />
</demo-block> </demo-block>
<demo-block :title="t('title3')"> <demo-block :title="t('title3')">
<van-slider v-model="value3" :min="-50" :max="50" @change="onChange" /> <van-slider v-model="value3" :min="-50" :max="50" @change="onChange" />
</demo-block> </demo-block>
<demo-block :title="t('title4')"> <demo-block :title="t('title4')">
<van-slider v-model="value4" disabled /> <van-slider v-model="value4" disabled />
</demo-block> </demo-block>
<demo-block :title="t('title5')"> <demo-block :title="t('title5')">
<van-slider v-model="value5" :step="10" @change="onChange" /> <van-slider v-model="value5" :step="10" @change="onChange" />
</demo-block> </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 <van-slider
v-model="value6" v-model="value9"
bar-height="4px" range
active-color="#ee0a24" vertical
style="margin-left: 100px;"
@change="onChange" @change="onChange"
/> />
</demo-block> </div>
</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>
</template> </template>
<script> <script>

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

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

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

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

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

@ -1,31 +1,29 @@
<template> <template>
<demo-section> <demo-block :title="t('basicUsage')">
<demo-block :title="t('basicUsage')"> <van-sticky>
<van-sticky> <van-button type="primary" style="margin-left: 15px;">
<van-button type="primary" style="margin-left: 15px;"> {{ t('basicUsage') }}
{{ 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-button>
</van-sticky> </van-sticky>
</demo-block> </div>
</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>
</template> </template>
<script> <script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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