mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs: remove demo-section
This commit is contained in:
chenjiahan
parent
862c3ec1a4
commit
e8244c44e1
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block title="基础用法">
|
||||
<demo-button type="primary" style="margin-left: 15px;">按钮</demo-button>
|
||||
</demo-block>
|
||||
@ -7,5 +6,4 @@
|
||||
<demo-block title="自定义颜色">
|
||||
<demo-button color="#03a9f4" style="margin-left: 15px;">按钮</demo-button>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-action-bar>
|
||||
<van-action-bar-icon
|
||||
@ -39,11 +38,7 @@
|
||||
<van-action-bar>
|
||||
<van-action-bar-icon icon="chat-o" :text="t('icon1')" color="#07c160" />
|
||||
<van-action-bar-icon icon="cart-o" :text="t('icon2')" />
|
||||
<van-action-bar-icon
|
||||
icon="star"
|
||||
:text="t('collected')"
|
||||
color="#ff5000"
|
||||
/>
|
||||
<van-action-bar-icon icon="star" :text="t('collected')" color="#ff5000" />
|
||||
<van-action-bar-button type="warning" :text="t('button1')" />
|
||||
<van-action-bar-button type="danger" :text="t('button2')" />
|
||||
</van-action-bar>
|
||||
@ -65,7 +60,6 @@
|
||||
/>
|
||||
</van-action-bar>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-cell is-link :title="t('basicUsage')" @click="show.basic = true" />
|
||||
<van-cell is-link :title="t('showCancel')" @click="show.cancel = true" />
|
||||
@ -11,11 +10,7 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block card :title="t('optionStatus')">
|
||||
<van-cell
|
||||
is-link
|
||||
:title="t('optionStatus')"
|
||||
@click="show.status = true"
|
||||
/>
|
||||
<van-cell is-link :title="t('optionStatus')" @click="show.status = true" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block card :title="t('customPanel')">
|
||||
@ -54,7 +49,6 @@
|
||||
<van-action-sheet v-model:show="show.title" :title="t('title')">
|
||||
<div class="demo-action-sheet-content">{{ t('content') }}</div>
|
||||
</van-action-sheet>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-address-edit
|
||||
:area-list="areaList"
|
||||
@ -14,7 +13,6 @@
|
||||
@change-detail="onChangeDetail"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-address-list
|
||||
v-model="chosenAddressId"
|
||||
@ -11,7 +10,6 @@
|
||||
@edit="onEdit"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-area :title="t('title')" :area-list="t('areaList')" />
|
||||
</demo-block>
|
||||
@ -9,11 +8,7 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block card :title="t('title3')">
|
||||
<van-area
|
||||
:title="t('title')"
|
||||
:area-list="t('areaList')"
|
||||
:columns-num="2"
|
||||
/>
|
||||
<van-area :title="t('title')" :area-list="t('areaList')" :columns-num="2" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block card :title="t('title4')">
|
||||
@ -23,7 +18,6 @@
|
||||
:columns-placeholder="t('columnsPlaceholder')"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-badge content="5">
|
||||
<div class="child" />
|
||||
@ -30,7 +29,6 @@
|
||||
<demo-block :title="t('standalone')">
|
||||
<van-badge content="200" max="99" style="margin-left: 16px;" />
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('type')">
|
||||
<div class="demo-button-row">
|
||||
<van-button type="primary">{{ t('primary') }}</van-button>
|
||||
@ -59,11 +58,7 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block v-if="!isWeapp" :title="t('router')">
|
||||
<van-button
|
||||
:text="t('urlRoute')"
|
||||
type="primary"
|
||||
url="/vant/mobile.html"
|
||||
/>
|
||||
<van-button :text="t('urlRoute')" type="primary" url="/vant/mobile.html" />
|
||||
<van-button :text="t('vueRoute')" type="primary" to="index" />
|
||||
</demo-block>
|
||||
|
||||
@ -75,7 +70,6 @@
|
||||
:text="t('gradient')"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-cell
|
||||
is-link
|
||||
@ -117,7 +116,6 @@
|
||||
:first-day-of-week="firstDayOfWeek"
|
||||
@confirm="onConfirm"
|
||||
/>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-card
|
||||
num="2"
|
||||
@ -53,7 +52,6 @@
|
||||
</template>
|
||||
</van-card>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-cell-group>
|
||||
<van-cell :title="t('cell')" :value="t('content')" />
|
||||
@ -73,7 +72,6 @@
|
||||
:label="t('desc')"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-checkbox v-model="checkbox1">{{ t('checkbox') }}</van-checkbox>
|
||||
</demo-block>
|
||||
@ -102,7 +101,6 @@
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-circle
|
||||
v-model:current-rate="currentRate1"
|
||||
@ -66,7 +65,6 @@
|
||||
@click="reduce"
|
||||
/>
|
||||
</div>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-row>
|
||||
<van-col span="8">span: 8</van-col>
|
||||
@ -54,7 +53,6 @@
|
||||
<van-col span="6">span: 6</van-col>
|
||||
</van-row>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-collapse v-model="active1">
|
||||
<van-collapse-item :title="t('title') + 1">
|
||||
@ -59,7 +58,6 @@
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-contact-card
|
||||
:type="cardType"
|
||||
@ -39,7 +38,6 @@
|
||||
:editable="false"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-count-down :time="time" />
|
||||
</demo-block>
|
||||
@ -35,15 +34,10 @@
|
||||
/>
|
||||
<van-grid clickable :column-num="3">
|
||||
<van-grid-item icon="play-circle-o" :text="t('start')" @click="start" />
|
||||
<van-grid-item
|
||||
icon="pause-circle-o"
|
||||
:text="t('pause')"
|
||||
@click="pause"
|
||||
/>
|
||||
<van-grid-item icon="pause-circle-o" :text="t('pause')" @click="pause" />
|
||||
<van-grid-item icon="replay" :text="t('reset')" @click="reset" />
|
||||
</van-grid>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-coupon-cell
|
||||
:coupons="coupons"
|
||||
@ -22,7 +21,6 @@
|
||||
/>
|
||||
</van-popup>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block card :title="t('dateType')">
|
||||
<van-datetime-picker
|
||||
v-model="value.date"
|
||||
@ -82,7 +81,6 @@
|
||||
:formatter="formatter"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-cell is-link :title="t('alert1')" @click="onClickAlert" />
|
||||
<van-cell is-link :title="t('alert2')" @click="onClickAlert2" />
|
||||
@ -26,7 +25,6 @@
|
||||
<img :src="image" />
|
||||
</van-dialog>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-divider />
|
||||
</demo-block>
|
||||
@ -27,13 +26,10 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('customStyle')">
|
||||
<van-divider
|
||||
:style="{ borderColor: BLUE, color: BLUE, padding: '0 16px' }"
|
||||
>
|
||||
<van-divider :style="{ borderColor: BLUE, color: BLUE, padding: '0 16px' }">
|
||||
{{ t('text') }}
|
||||
</van-divider>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-dropdown-menu>
|
||||
<van-dropdown-item v-model="value1" :options="option1" />
|
||||
@ -56,7 +55,6 @@
|
||||
<van-dropdown-item v-model="value2" disabled :options="option2" />
|
||||
</van-dropdown-menu>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-empty :description="t('description')" />
|
||||
</demo-block>
|
||||
@ -33,7 +32,6 @@
|
||||
</van-button>
|
||||
</van-empty>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<basic-usage />
|
||||
<custom-type />
|
||||
<disabled />
|
||||
@ -10,7 +9,6 @@
|
||||
<autosize />
|
||||
<show-word-limit />
|
||||
<input-align />
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -7,14 +7,8 @@
|
||||
:model-value="value"
|
||||
:placeholder="t('placeholder')"
|
||||
@click="showArea = true"
|
||||
>
|
||||
<template #extra>
|
||||
<van-popup
|
||||
v-model:show="showArea"
|
||||
round
|
||||
position="bottom"
|
||||
teleport="body"
|
||||
>
|
||||
/>
|
||||
<van-popup v-model:show="showArea" round position="bottom" teleport="body">
|
||||
<van-area
|
||||
:area-list="t('areaList')"
|
||||
@confirm="onConfirm"
|
||||
@ -22,8 +16,6 @@
|
||||
/>
|
||||
</van-popup>
|
||||
</template>
|
||||
</van-field>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AreaList from '../../area/demo/area';
|
||||
|
||||
@ -7,8 +7,7 @@
|
||||
:model-value="value"
|
||||
:placeholder="t('placeholder')"
|
||||
@click="showCalendar = true"
|
||||
>
|
||||
<template #extra>
|
||||
/>
|
||||
<van-calendar
|
||||
v-model:show="showCalendar"
|
||||
round
|
||||
@ -16,8 +15,6 @@
|
||||
@confirm="onConfirm"
|
||||
/>
|
||||
</template>
|
||||
</van-field>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
@ -7,23 +7,11 @@
|
||||
:model-value="value"
|
||||
:placeholder="t('placeholder')"
|
||||
@click="showPicker = true"
|
||||
>
|
||||
<template #extra>
|
||||
<van-popup
|
||||
v-model:show="showPicker"
|
||||
round
|
||||
position="bottom"
|
||||
teleport="body"
|
||||
>
|
||||
<van-datetime-picker
|
||||
type="time"
|
||||
@confirm="onConfirm"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
<van-popup v-model:show="showPicker" round position="bottom" teleport="body">
|
||||
<van-datetime-picker type="time" @confirm="onConfirm" @cancel="onCancel" />
|
||||
</van-popup>
|
||||
</template>
|
||||
</van-field>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
@ -7,14 +7,8 @@
|
||||
:model-value="value"
|
||||
:placeholder="t('placeholder')"
|
||||
@click="showPicker = true"
|
||||
>
|
||||
<template #extra>
|
||||
<van-popup
|
||||
v-model:show="showPicker"
|
||||
round
|
||||
position="bottom"
|
||||
teleport="body"
|
||||
>
|
||||
/>
|
||||
<van-popup v-model:show="showPicker" round position="bottom" teleport="body">
|
||||
<van-picker
|
||||
:columns="t('textColumns')"
|
||||
@confirm="onConfirm"
|
||||
@ -22,8 +16,6 @@
|
||||
/>
|
||||
</van-popup>
|
||||
</template>
|
||||
</van-field>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<basic-usage />
|
||||
<validate-rules />
|
||||
<field-type />
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,69 +1,39 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-grid>
|
||||
<van-grid-item
|
||||
v-for="i in 4"
|
||||
:key="i"
|
||||
icon="photo-o"
|
||||
:text="t('text')"
|
||||
/>
|
||||
<van-grid-item v-for="i in 4" :key="i" icon="photo-o" :text="t('text')" />
|
||||
</van-grid>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('columnNum')">
|
||||
<van-grid :column-num="3">
|
||||
<van-grid-item
|
||||
v-for="i in 6"
|
||||
:key="i"
|
||||
icon="photo-o"
|
||||
:text="t('text')"
|
||||
/>
|
||||
<van-grid-item v-for="i in 6" :key="i" icon="photo-o" :text="t('text')" />
|
||||
</van-grid>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('customContent')">
|
||||
<van-grid :border="false" :column-num="3">
|
||||
<van-grid-item>
|
||||
<van-image
|
||||
fit="contain"
|
||||
src="https://img.yzcdn.cn/vant/apple-1.jpg"
|
||||
/>
|
||||
<van-image fit="contain" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
|
||||
</van-grid-item>
|
||||
<van-grid-item>
|
||||
<van-image
|
||||
fit="contain"
|
||||
src="https://img.yzcdn.cn/vant/apple-2.jpg"
|
||||
/>
|
||||
<van-image fit="contain" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
|
||||
</van-grid-item>
|
||||
<van-grid-item>
|
||||
<van-image
|
||||
fit="contain"
|
||||
src="https://img.yzcdn.cn/vant/apple-3.jpg"
|
||||
/>
|
||||
<van-image fit="contain" src="https://img.yzcdn.cn/vant/apple-3.jpg" />
|
||||
</van-grid-item>
|
||||
</van-grid>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('square')">
|
||||
<van-grid square>
|
||||
<van-grid-item
|
||||
v-for="i in 8"
|
||||
:key="i"
|
||||
icon="photo-o"
|
||||
:text="t('text')"
|
||||
/>
|
||||
<van-grid-item v-for="i in 8" :key="i" icon="photo-o" :text="t('text')" />
|
||||
</van-grid>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('gutter')">
|
||||
<van-grid :gutter="10">
|
||||
<van-grid-item
|
||||
v-for="i in 8"
|
||||
:key="i"
|
||||
icon="photo-o"
|
||||
:text="t('text')"
|
||||
/>
|
||||
<van-grid-item v-for="i in 8" :key="i" icon="photo-o" :text="t('text')" />
|
||||
</van-grid>
|
||||
</demo-block>
|
||||
|
||||
@ -92,7 +62,6 @@
|
||||
<van-grid-item icon="search" :text="t('text')" badge="99+" />
|
||||
</van-grid>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<van-tabs v-model="tab" sticky>
|
||||
<van-tab :title="t('demo')">
|
||||
<demo-block :title="t('basicUsage')">
|
||||
@ -92,7 +91,6 @@
|
||||
</van-row>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-cell is-link @click="showImagePreview()">
|
||||
{{ t('showImages') }}
|
||||
@ -28,15 +27,10 @@
|
||||
<van-cell is-link @click="componentCall">
|
||||
{{ t('componentCall') }}
|
||||
</van-cell>
|
||||
<van-image-preview
|
||||
v-model:show="show"
|
||||
:images="images"
|
||||
@change="onChange"
|
||||
>
|
||||
<van-image-preview v-model:show="show" :images="images" @change="onChange">
|
||||
<template #index>{{ t('index', index) }}</template>
|
||||
</van-image-preview>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-row>
|
||||
<van-image width="100" height="100" :src="image" />
|
||||
@ -57,7 +56,6 @@
|
||||
</van-col>
|
||||
</van-row>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<van-tabs v-model="activeTab">
|
||||
<van-tab :title="t('basicUsage')">
|
||||
<van-index-bar>
|
||||
@ -25,7 +24,6 @@
|
||||
</van-index-bar>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<img v-for="img in imageList" :key="img" v-lazy="img" />
|
||||
</demo-block>
|
||||
@ -17,7 +16,6 @@
|
||||
<img v-for="img in componentImageList" :key="img" v-lazy="img" />
|
||||
</lazy-component>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<van-tabs>
|
||||
<van-tab :title="t('basicUsage')">
|
||||
<van-list
|
||||
@ -37,7 +36,6 @@
|
||||
</van-pull-refresh>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('type')">
|
||||
<van-loading />
|
||||
<van-loading type="spinner" />
|
||||
@ -26,7 +25,6 @@
|
||||
{{ t('loading') }}
|
||||
</van-loading>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-nav-bar
|
||||
:title="t('title')"
|
||||
@ -18,7 +17,6 @@
|
||||
</template>
|
||||
</van-nav-bar>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-notice-bar :text="t('text')" scrollable left-icon="volume-o" />
|
||||
</demo-block>
|
||||
@ -41,7 +40,6 @@
|
||||
</van-swipe>
|
||||
</van-notice-bar>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-cell is-link :title="t('basicUsage')" @click="showNotify" />
|
||||
</demo-block>
|
||||
@ -21,18 +20,13 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block card :title="t('componentCall')">
|
||||
<van-cell
|
||||
is-link
|
||||
:title="t('componentCall')"
|
||||
@click="showComponentCall"
|
||||
/>
|
||||
<van-cell is-link :title="t('componentCall')" @click="showComponentCall" />
|
||||
|
||||
<van-notify v-model:show="show" type="success">
|
||||
<van-icon name="bell" style="margin-right: 4px;" />
|
||||
<span>{{ t('content') }}</span>
|
||||
</van-notify>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<van-cell is-link @touchstart.stop="keyboard = 'default'">
|
||||
{{ t('button1') }}
|
||||
</van-cell>
|
||||
@ -76,7 +75,6 @@
|
||||
maxlength="6"
|
||||
@blur="keyboard = ''"
|
||||
/>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-button
|
||||
type="primary"
|
||||
@ -7,7 +6,6 @@
|
||||
style="margin-left: 16px;"
|
||||
@click="show = true"
|
||||
/>
|
||||
|
||||
<van-overlay :show="show" @click="show = false" />
|
||||
</demo-block>
|
||||
|
||||
@ -18,14 +16,12 @@
|
||||
style="margin-left: 16px;"
|
||||
@click="showEmbedded = true"
|
||||
/>
|
||||
|
||||
<van-overlay :show="showEmbedded" @click="showEmbedded = false">
|
||||
<div class="wrapper">
|
||||
<div class="block" />
|
||||
</div>
|
||||
</van-overlay>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-pagination
|
||||
v-model="currentPage1"
|
||||
@ -47,7 +46,6 @@
|
||||
<template #page="{ text }">{{ text }}</template>
|
||||
</van-pagination>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block ref="basicUsage" :title="t('basicUsage')">
|
||||
<van-password-input
|
||||
:value="value.basicUsage"
|
||||
@ -51,7 +50,6 @@
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-picker
|
||||
:title="t('title')"
|
||||
@ -65,7 +64,6 @@
|
||||
/>
|
||||
</van-popup>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-cell :title="t('buttonBasic')" is-link @click="showBasic = true" />
|
||||
<van-popup v-model:show="showBasic" :style="{ padding: '30px 50px' }">
|
||||
@ -85,18 +84,13 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block card v-if="!isWeapp" :title="t('teleport')">
|
||||
<van-cell
|
||||
:title="t('teleport')"
|
||||
is-link
|
||||
@click="showGetContainer = true"
|
||||
/>
|
||||
<van-cell :title="t('teleport')" is-link @click="showGetContainer = true" />
|
||||
<van-popup
|
||||
v-model:show="showGetContainer"
|
||||
teleport="body"
|
||||
:style="{ padding: '30px 50px' }"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-progress :percentage="50" />
|
||||
</demo-block>
|
||||
@ -13,11 +12,7 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('title3')">
|
||||
<van-progress
|
||||
color="#f2826a"
|
||||
:percentage="25"
|
||||
:pivot-text="t('orange')"
|
||||
/>
|
||||
<van-progress color="#f2826a" :percentage="25" :pivot-text="t('orange')" />
|
||||
<van-progress color="#ee0a24" :percentage="50" :pivot-text="t('red')" />
|
||||
<van-progress
|
||||
:percentage="75"
|
||||
@ -26,7 +21,6 @@
|
||||
color="linear-gradient(to right, #be99ff, #7232dd)"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section name="pull-refresh">
|
||||
<van-tabs>
|
||||
<van-tab :title="t('basicUsage')">
|
||||
<van-pull-refresh v-model="isLoading" @refresh="onRefresh(true)">
|
||||
@ -40,7 +39,6 @@
|
||||
</van-pull-refresh>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-radio-group v-model="radio1" class="demo-radio-group">
|
||||
<van-radio name="1">{{ t('radio') }} 1</van-radio>
|
||||
@ -94,7 +93,6 @@
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-rate v-model="value1" />
|
||||
</demo-block>
|
||||
@ -43,7 +42,6 @@
|
||||
<demo-block v-if="!isWeapp" :title="t('changeEvent')">
|
||||
<van-rate v-model="value7" @change="onChange" />
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-search v-model="value1" :placeholder="t('placeholder')" />
|
||||
</demo-block>
|
||||
@ -50,7 +49,6 @@
|
||||
</template>
|
||||
</van-search>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-cell is-link :title="t('showSheet')" @click="show.basic = true" />
|
||||
<van-share-sheet
|
||||
@ -11,11 +10,7 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block card :title="t('multiLine')">
|
||||
<van-cell
|
||||
is-link
|
||||
:title="t('showSheet')"
|
||||
@click="show.multiLine = true"
|
||||
/>
|
||||
<van-cell is-link :title="t('showSheet')" @click="show.multiLine = true" />
|
||||
<van-share-sheet
|
||||
v-model:show="show.multiLine"
|
||||
:title="t('title')"
|
||||
@ -25,11 +20,7 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block card :title="t('customIcon')">
|
||||
<van-cell
|
||||
is-link
|
||||
:title="t('showSheet')"
|
||||
@click="show.customIcon = true"
|
||||
/>
|
||||
<van-cell is-link :title="t('showSheet')" @click="show.customIcon = true" />
|
||||
<van-share-sheet
|
||||
v-model:show="show.customIcon"
|
||||
:options="customIconOptions"
|
||||
@ -47,7 +38,6 @@
|
||||
@select="onSelect"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<van-grid :column-num="2" :border="false">
|
||||
<van-grid-item>
|
||||
<h3 class="demo-sidebar-title">{{ t('basicUsage') }}</h3>
|
||||
@ -37,7 +36,6 @@
|
||||
</van-sidebar>
|
||||
</van-grid-item>
|
||||
</van-grid>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-skeleton title :row="3" />
|
||||
</demo-block>
|
||||
@ -20,7 +19,6 @@
|
||||
</div>
|
||||
</van-skeleton>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('title1')">
|
||||
<van-slider v-model="value1" @change="onChange" />
|
||||
</demo-block>
|
||||
@ -49,7 +48,6 @@
|
||||
/>
|
||||
</div>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<van-cell center :title="t('basicUsage')">
|
||||
<van-stepper v-model="stepper1" />
|
||||
</van-cell>
|
||||
@ -44,7 +43,6 @@
|
||||
disable-input
|
||||
/>
|
||||
</van-cell>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-steps :active="active">
|
||||
<van-step>{{ t('step1') }}</van-step>
|
||||
@ -41,7 +40,6 @@
|
||||
</van-step>
|
||||
</van-steps>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-sticky>
|
||||
<van-button type="primary" style="margin-left: 15px;">
|
||||
@ -25,7 +24,6 @@
|
||||
</van-sticky>
|
||||
</div>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('ellipsis')">
|
||||
<div class="van-ellipsis">{{ t('text1') }}</div>
|
||||
<div class="van-multi-ellipsis--l2">{{ t('text2') }}</div>
|
||||
@ -14,17 +13,12 @@
|
||||
<van-cell is-link title="Slide Up" @click="animate('van-slide-up')" />
|
||||
<van-cell is-link title="Slide Down" @click="animate('van-slide-down')" />
|
||||
<van-cell is-link title="Slide Left" @click="animate('van-slide-left')" />
|
||||
<van-cell
|
||||
is-link
|
||||
title="Slide Right"
|
||||
@click="animate('van-slide-right')"
|
||||
/>
|
||||
<van-cell is-link title="Slide Right" @click="animate('van-slide-right')" />
|
||||
</demo-block>
|
||||
|
||||
<transition :name="transitionName">
|
||||
<div v-show="show" class="demo-animate-block" />
|
||||
</transition>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-submit-bar
|
||||
:price="3050"
|
||||
@ -43,7 +42,6 @@
|
||||
</template>
|
||||
</van-submit-bar>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
<template>
|
||||
<div>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-swipe-cell>
|
||||
<template #left>
|
||||
@ -45,8 +43,6 @@
|
||||
</template>
|
||||
</van-swipe-cell>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-swipe :autoplay="3000" indicator-color="white">
|
||||
<van-swipe-item>1</van-swipe-item>
|
||||
@ -64,7 +63,6 @@
|
||||
</template>
|
||||
</van-swipe>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-switch v-model="checked" />
|
||||
</demo-block>
|
||||
@ -35,7 +34,6 @@
|
||||
</template>
|
||||
</van-cell>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-tabs v-model:active="active">
|
||||
<van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
|
||||
@ -101,7 +100,6 @@
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-tabbar v-model="active">
|
||||
<van-tabbar-item icon="home-o">{{ t('tab') }}</van-tabbar-item>
|
||||
@ -53,11 +52,7 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('customColor')">
|
||||
<van-tabbar
|
||||
v-model="active4"
|
||||
active-color="#07c160"
|
||||
inactive-color="#000"
|
||||
>
|
||||
<van-tabbar v-model="active4" active-color="#07c160" inactive-color="#000">
|
||||
<van-tabbar-item icon="home-o">{{ t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="search">{{ t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="friends-o">{{ t('tab') }}</van-tabbar-item>
|
||||
@ -73,7 +68,6 @@
|
||||
<van-tabbar-item icon="setting-o">{{ t('tab') + 4 }}</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-cell :title="`primary ${t('type')}`">
|
||||
<van-tag type="primary">{{ t('tag') }}</van-tag>
|
||||
@ -61,7 +60,6 @@
|
||||
<van-tag color="#7232dd" plain>{{ t('tag') }}</van-tag>
|
||||
</van-cell>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-cell is-link :title="t('title1')" @click="$toast(t('text'))" />
|
||||
<van-cell is-link :title="t('title2')" @click="showLoadingToast()" />
|
||||
@ -29,7 +28,6 @@
|
||||
@click="showCustomizedToast"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('radioMode')">
|
||||
<van-tree-select
|
||||
v-model:active-id="activeId"
|
||||
@ -45,7 +44,6 @@
|
||||
:items="badgeItems"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-uploader :after-read="afterRead" />
|
||||
</demo-block>
|
||||
@ -48,7 +47,6 @@
|
||||
<demo-block :title="t('disabled')">
|
||||
<van-uploader :after-read="afterRead" disabled />
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user