mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
chore: prettier all demos
This commit is contained in:
陈嘉涵
parent
207e80f396
commit
82208c42b8
@ -1,17 +1,31 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-button type="primary" @click="show1 = true">{{ $t('buttonText') }}</van-button>
|
||||
<van-action-sheet v-model="show1" :actions="simpleActions" @select="onSelect" />
|
||||
<van-button type="primary" @click="show1 = true">
|
||||
{{ $t('buttonText') }}
|
||||
</van-button>
|
||||
<van-action-sheet
|
||||
v-model="show1"
|
||||
:actions="simpleActions"
|
||||
@select="onSelect"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('status')">
|
||||
<van-button type="primary" @click="show2 = true">{{ $t('buttonText') }}</van-button>
|
||||
<van-action-sheet v-model="show2" close-on-click-action :actions="statusActions" />
|
||||
<van-button type="primary" @click="show2 = true">
|
||||
{{ $t('buttonText') }}
|
||||
</van-button>
|
||||
<van-action-sheet
|
||||
v-model="show2"
|
||||
close-on-click-action
|
||||
:actions="statusActions"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('showCancel')">
|
||||
<van-button type="primary" @click="show3 = true">{{ $t('buttonText') }}</van-button>
|
||||
<van-button type="primary" @click="show3 = true">
|
||||
{{ $t('buttonText') }}
|
||||
</van-button>
|
||||
<van-action-sheet
|
||||
v-model="show3"
|
||||
:actions="simpleActions"
|
||||
@ -22,7 +36,9 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('showDescription')">
|
||||
<van-button type="primary" @click="show4 = true">{{ $t('buttonText') }}</van-button>
|
||||
<van-button type="primary" @click="show4 = true">
|
||||
{{ $t('buttonText') }}
|
||||
</van-button>
|
||||
<van-action-sheet
|
||||
v-model="show4"
|
||||
:actions="simpleActions"
|
||||
@ -32,7 +48,9 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('showTitle')">
|
||||
<van-button type="primary" @click="show5 = true">{{ $t('buttonText') }}</van-button>
|
||||
<van-button type="primary" @click="show5 = true">
|
||||
{{ $t('buttonText') }}
|
||||
</van-button>
|
||||
<van-action-sheet v-model="show5" :title="$t('title')">
|
||||
<p>{{ $t('content') }}</p>
|
||||
</van-action-sheet>
|
||||
|
||||
@ -2,19 +2,29 @@
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">弹出菜单</span></button>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
弹出菜单
|
||||
</span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">弹出菜单</span></button>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
弹出菜单
|
||||
</span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">弹出菜单</span></button>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
弹出菜单
|
||||
</span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">弹出菜单</span></button>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
弹出菜单
|
||||
</span></button>
|
||||
<!---->
|
||||
</div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">弹出菜单</span></button>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
弹出菜单
|
||||
</span></button>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -24,27 +24,35 @@ export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
areaColumnsPlaceholder: ['请选择', '请选择', '请选择'],
|
||||
searchResult: [{
|
||||
name: '黄龙万科中心',
|
||||
address: '杭州市西湖区',
|
||||
}, {
|
||||
name: '黄龙万科中心G座',
|
||||
}, {
|
||||
name: '黄龙万科中心H座',
|
||||
address: '杭州市西湖区',
|
||||
}],
|
||||
searchResult: [
|
||||
{
|
||||
name: '黄龙万科中心',
|
||||
address: '杭州市西湖区',
|
||||
},
|
||||
{
|
||||
name: '黄龙万科中心G座',
|
||||
},
|
||||
{
|
||||
name: '黄龙万科中心H座',
|
||||
address: '杭州市西湖区',
|
||||
},
|
||||
],
|
||||
},
|
||||
'en-US': {
|
||||
areaColumnsPlaceholder: ['Choose', 'Choose', 'Choose'],
|
||||
searchResult: [{
|
||||
name: 'Name1',
|
||||
address: 'Address',
|
||||
}, {
|
||||
name: 'Name2',
|
||||
}, {
|
||||
name: 'Name3',
|
||||
address: 'Address',
|
||||
}],
|
||||
searchResult: [
|
||||
{
|
||||
name: 'Name1',
|
||||
address: 'Address',
|
||||
},
|
||||
{
|
||||
name: 'Name2',
|
||||
},
|
||||
{
|
||||
name: 'Name3',
|
||||
address: 'Address',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@ -5,10 +5,7 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-area
|
||||
:area-list="$t('areaList')"
|
||||
:value="value"
|
||||
/>
|
||||
<van-area :area-list="$t('areaList')" :value="value" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
|
||||
@ -59,14 +59,21 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :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>
|
||||
|
||||
<demo-block :title="$t('customColor')">
|
||||
<van-button color="#7232dd" :text="$t('pure')" />
|
||||
<van-button plain color="#7232dd" :text="$t('pure')" />
|
||||
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)" :text="$t('gradient')" />
|
||||
<van-button
|
||||
color="linear-gradient(to right, #4bb0ff, #6149f6)"
|
||||
:text="$t('gradient')"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -32,17 +32,10 @@
|
||||
>
|
||||
<template #tags>
|
||||
<div>
|
||||
<van-tag
|
||||
plain
|
||||
type="danger"
|
||||
style="margin-right: 5px;"
|
||||
>
|
||||
<van-tag plain type="danger" style="margin-right: 5px;">
|
||||
标签
|
||||
</van-tag>
|
||||
<van-tag
|
||||
plain
|
||||
type="danger"
|
||||
>
|
||||
<van-tag plain type="danger">
|
||||
标签
|
||||
</van-tag>
|
||||
</div>
|
||||
@ -50,16 +43,10 @@
|
||||
|
||||
<template #footer>
|
||||
<div>
|
||||
<van-button
|
||||
round
|
||||
size="mini"
|
||||
>
|
||||
<van-button round size="mini">
|
||||
{{ $t('button') }}
|
||||
</van-button>
|
||||
<van-button
|
||||
round
|
||||
size="mini"
|
||||
>
|
||||
<van-button round size="mini">
|
||||
{{ $t('button') }}
|
||||
</van-button>
|
||||
</div>
|
||||
|
||||
@ -3,13 +3,22 @@
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-cell-group>
|
||||
<van-cell :title="$t('cell')" :value="$t('content')" />
|
||||
<van-cell :title="$t('cell')" :value="$t('content')" :label="$t('desc')" />
|
||||
<van-cell
|
||||
:title="$t('cell')"
|
||||
:value="$t('content')"
|
||||
:label="$t('desc')"
|
||||
/>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('largeSize')">
|
||||
<van-cell :title="$t('cell')" :value="$t('content')" size="large" />
|
||||
<van-cell :title="$t('cell')" :value="$t('content')" size="large" :label="$t('desc')" />
|
||||
<van-cell
|
||||
:title="$t('cell')"
|
||||
:value="$t('content')"
|
||||
size="large"
|
||||
:label="$t('desc')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('showIcon')">
|
||||
@ -23,7 +32,12 @@
|
||||
<demo-block :title="$t('showArrow')">
|
||||
<van-cell :title="$t('cell')" is-link />
|
||||
<van-cell :title="$t('cell')" is-link :value="$t('content')" />
|
||||
<van-cell :title="$t('cell')" is-link arrow-direction="down" :value="$t('content')" />
|
||||
<van-cell
|
||||
:title="$t('cell')"
|
||||
is-link
|
||||
arrow-direction="down"
|
||||
:value="$t('content')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('router')">
|
||||
@ -56,7 +70,12 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('verticalCenter')">
|
||||
<van-cell center :title="$t('cell')" :value="$t('content')" :label="$t('desc')" />
|
||||
<van-cell
|
||||
center
|
||||
:title="$t('cell')"
|
||||
:value="$t('content')"
|
||||
:label="$t('desc')"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -70,8 +70,12 @@
|
||||
</van-checkbox-group>
|
||||
|
||||
<div class="demo-checkbox-buttons">
|
||||
<van-button type="primary" @click="checkAll">{{ $t('checkAll') }}</van-button>
|
||||
<van-button type="info" @click="toggleAll">{{ $t('inverse') }}</van-button>
|
||||
<van-button type="primary" @click="checkAll">
|
||||
{{ $t('checkAll') }}
|
||||
</van-button>
|
||||
<van-button type="info" @click="toggleAll">
|
||||
{{ $t('inverse') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</demo-block>
|
||||
|
||||
@ -136,11 +140,7 @@ export default {
|
||||
checkboxShape: true,
|
||||
checkboxLabel: true,
|
||||
checboxIcon: true,
|
||||
list: [
|
||||
'a',
|
||||
'b',
|
||||
'c',
|
||||
],
|
||||
list: ['a', 'b', 'c'],
|
||||
result: ['a', 'b'],
|
||||
result2: [],
|
||||
result3: [],
|
||||
@ -167,7 +167,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-checkbox {
|
||||
background: @white;
|
||||
|
||||
@ -108,7 +108,11 @@ exports[`renders demo correctly 1`] = `
|
||||
<!----></i></div><span class="van-checkbox__label">复选框 c</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-checkbox-buttons"><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">全选</span></button> <button class="van-button van-button--info van-button--normal"><span class="van-button__text">反选</span></button></div>
|
||||
<div class="demo-checkbox-buttons"><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
全选
|
||||
</span></button> <button class="van-button van-button--info van-button--normal"><span class="van-button__text">
|
||||
反选
|
||||
</span></button></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-checkbox-group">
|
||||
|
||||
@ -58,12 +58,7 @@
|
||||
</demo-block>
|
||||
|
||||
<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
|
||||
:text="$t('decrease')"
|
||||
type="danger"
|
||||
@ -124,7 +119,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-circle {
|
||||
.van-circle {
|
||||
|
||||
@ -9,19 +9,13 @@
|
||||
|
||||
<van-row>
|
||||
<van-col span="4">span: 4</van-col>
|
||||
<van-col
|
||||
span="10"
|
||||
offset="4"
|
||||
>
|
||||
<van-col span="10" offset="4">
|
||||
offset: 4, span: 10
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
<van-row>
|
||||
<van-col
|
||||
offset="12"
|
||||
span="12"
|
||||
>
|
||||
<van-col offset="12" span="12">
|
||||
offset: 12, span: 12
|
||||
</van-col>
|
||||
</van-row>
|
||||
@ -35,47 +29,32 @@
|
||||
</van-row>
|
||||
</demo-block>
|
||||
|
||||
<demo-block
|
||||
v-if="!isWeapp"
|
||||
:title="$t('title3')"
|
||||
>
|
||||
<demo-block v-if="!isWeapp" :title="$t('title3')">
|
||||
<van-row type="flex">
|
||||
<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
|
||||
type="flex"
|
||||
justify="center"
|
||||
>
|
||||
<van-row type="flex" justify="center">
|
||||
<van-col span="6">span: 6</van-col>
|
||||
<van-col span="6">span: 6</van-col>
|
||||
<van-col span="6">span: 6</van-col>
|
||||
</van-row>
|
||||
|
||||
<van-row
|
||||
type="flex"
|
||||
justify="end"
|
||||
>
|
||||
<van-row type="flex" justify="end">
|
||||
<van-col span="6">span: 6</van-col>
|
||||
<van-col span="6">span: 6</van-col>
|
||||
<van-col span="6">span: 6</van-col>
|
||||
</van-row>
|
||||
|
||||
<van-row
|
||||
type="flex"
|
||||
justify="space-between"
|
||||
>
|
||||
<van-row type="flex" justify="space-between">
|
||||
<van-col span="6">span: 6</van-col>
|
||||
<van-col span="6">span: 6</van-col>
|
||||
<van-col span="6">span: 6</van-col>
|
||||
</van-row>
|
||||
|
||||
<van-row
|
||||
type="flex"
|
||||
justify="space-around"
|
||||
>
|
||||
<van-row type="flex" 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>
|
||||
|
||||
@ -2,25 +2,29 @@
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-collapse v-model="active1">
|
||||
<van-collapse-item :title="$t('title') + 1">{{ $t('text') }}</van-collapse-item>
|
||||
<van-collapse-item :title="$t('title') + 2">{{ $t('text') }}</van-collapse-item>
|
||||
<van-collapse-item
|
||||
:title="$t('title') + 3"
|
||||
disabled
|
||||
>
|
||||
<van-collapse-item :title="$t('title') + 1">
|
||||
{{ $t('text') }}
|
||||
</van-collapse-item>
|
||||
<van-collapse-item :title="$t('title') + 2">
|
||||
{{ $t('text') }}
|
||||
</van-collapse-item>
|
||||
<van-collapse-item :title="$t('title') + 3" disabled>
|
||||
{{ $t('text') }}
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('accordion')">
|
||||
<van-collapse
|
||||
v-model="active2"
|
||||
accordion
|
||||
>
|
||||
<van-collapse-item :title="$t('title') + 1">{{ $t('text') }}</van-collapse-item>
|
||||
<van-collapse-item :title="$t('title') + 2">{{ $t('text') }}</van-collapse-item>
|
||||
<van-collapse-item :title="$t('title') + 3">{{ $t('text') }}</van-collapse-item>
|
||||
<van-collapse v-model="active2" accordion>
|
||||
<van-collapse-item :title="$t('title') + 1">
|
||||
{{ $t('text') }}
|
||||
</van-collapse-item>
|
||||
<van-collapse-item :title="$t('title') + 2">
|
||||
{{ $t('text') }}
|
||||
</van-collapse-item>
|
||||
<van-collapse-item :title="$t('title') + 3">
|
||||
{{ $t('text') }}
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
</demo-block>
|
||||
|
||||
|
||||
@ -10,7 +10,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<!----></i>
|
||||
</div>
|
||||
<div class="van-collapse-item__wrapper">
|
||||
<div class="van-collapse-item__content">代码是写出来给人看的，附带能在机器上运行</div>
|
||||
<div class="van-collapse-item__content">
|
||||
代码是写出来给人看的，附带能在机器上运行
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
@ -35,7 +37,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<!----></i>
|
||||
</div>
|
||||
<div class="van-collapse-item__wrapper">
|
||||
<div class="van-collapse-item__content">代码是写出来给人看的，附带能在机器上运行</div>
|
||||
<div class="van-collapse-item__content">
|
||||
代码是写出来给人看的，附带能在机器上运行
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
|
||||
@ -8,11 +8,7 @@
|
||||
@click="showList = true"
|
||||
/>
|
||||
|
||||
<van-popup
|
||||
v-model="showList"
|
||||
position="bottom"
|
||||
:lazy-render="false"
|
||||
>
|
||||
<van-popup v-model="showList" position="bottom" :lazy-render="false">
|
||||
<van-contact-list
|
||||
v-model="chosenContactId"
|
||||
:list="list"
|
||||
@ -23,11 +19,7 @@
|
||||
/>
|
||||
</van-popup>
|
||||
|
||||
<van-popup
|
||||
v-model="showEdit"
|
||||
position="bottom"
|
||||
:lazy-render="false"
|
||||
>
|
||||
<van-popup v-model="showEdit" position="bottom" :lazy-render="false">
|
||||
<van-contact-edit
|
||||
show-set-default
|
||||
:set-default-label="$t('defaultLabel')"
|
||||
|
||||
@ -1,21 +1,36 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('alert1')">
|
||||
<van-button type="primary" @click="onClickAlert">{{ $t('alert1') }}</van-button>
|
||||
<van-button type="primary" @click="onClickAlert2">{{ $t('alert2') }}</van-button>
|
||||
<van-button type="primary" @click="onClickAlert">
|
||||
{{ $t('alert1') }}
|
||||
</van-button>
|
||||
<van-button type="primary" @click="onClickAlert2">
|
||||
{{ $t('alert2') }}
|
||||
</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('confirm')">
|
||||
<van-button type="primary" @click="onClickConfirm">{{ $t('confirm') }}</van-button>
|
||||
<van-button type="primary" @click="onClickConfirm">
|
||||
{{ $t('confirm') }}
|
||||
</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('asyncClose')">
|
||||
<van-button type="primary" @click="onClickAsyncClose">{{ $t('asyncClose') }}</van-button>
|
||||
<van-button type="primary" @click="onClickAsyncClose">
|
||||
{{ $t('asyncClose') }}
|
||||
</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('componentCall')">
|
||||
<van-button type="primary" @click="show = true">{{ $t('componentCall') }}</van-button>
|
||||
<van-dialog v-model="show" :title="$t('title')" show-cancel-button :lazy-render="false">
|
||||
<van-button type="primary" @click="show = true">
|
||||
{{ $t('componentCall') }}
|
||||
</van-button>
|
||||
<van-dialog
|
||||
v-model="show"
|
||||
:title="$t('title')"
|
||||
show-cancel-button
|
||||
:lazy-render="false"
|
||||
>
|
||||
<img :src="image" />
|
||||
</van-dialog>
|
||||
</demo-block>
|
||||
|
||||
@ -2,10 +2,20 @@
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">提示弹窗</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">提示弹窗（无标题）</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">确认弹窗</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">异步关闭</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">组件调用</span></button>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
提示弹窗
|
||||
</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
提示弹窗（无标题）
|
||||
</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
确认弹窗
|
||||
</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
异步关闭
|
||||
</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
组件调用
|
||||
</span></button>
|
||||
<div role="dialog" aria-labelledby="标题" class="van-dialog" style="display: none;" name="van-dialog-bounce">
|
||||
<div class="van-dialog__header">标题</div>
|
||||
<div class="van-dialog__content"><img src="https://img.yzcdn.cn/vant/apple-3.jpg"></div>
|
||||
|
||||
@ -21,16 +21,15 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('dashed')">
|
||||
<van-divider
|
||||
dashed
|
||||
:hairline="false"
|
||||
>
|
||||
<van-divider dashed :hairline="false">
|
||||
{{ $t('text') }}
|
||||
</van-divider>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customStyle')">
|
||||
<van-divider :style="{ borderColor: BLUE, color: BLUE, padding: '0 16px' }">
|
||||
<van-divider
|
||||
:style="{ borderColor: BLUE, color: BLUE, padding: '0 16px' }"
|
||||
>
|
||||
{{ $t('text') }}
|
||||
</van-divider>
|
||||
</demo-block>
|
||||
@ -67,7 +66,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-divider {
|
||||
background-color: @white;
|
||||
|
||||
@ -13,7 +13,9 @@
|
||||
<van-dropdown-item :title="$t('itemTitle')" ref="item">
|
||||
<van-switch-cell v-model="switch1" :title="$t('switchTitle1')" />
|
||||
<van-switch-cell v-model="switch2" :title="$t('switchTitle2')" />
|
||||
<van-button type="info" block @click="onConfirm">{{ $t('confirm') }}</van-button>
|
||||
<van-button type="info" block @click="onConfirm">
|
||||
{{ $t('confirm') }}
|
||||
</van-button>
|
||||
</van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</demo-block>
|
||||
|
||||
@ -1,12 +1,27 @@
|
||||
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-goods-action>
|
||||
<van-goods-action-icon icon="chat-o" :text="$t('icon1')" @click="onClickIcon" />
|
||||
<van-goods-action-icon icon="cart-o" :text="$t('icon2')" @click="onClickIcon" />
|
||||
<van-goods-action-button type="warning" :text="$t('button1')" @click="onClickButton" />
|
||||
<van-goods-action-button type="danger" :text="$t('button2')" @click="onClickButton" />
|
||||
<van-goods-action-icon
|
||||
icon="chat-o"
|
||||
:text="$t('icon1')"
|
||||
@click="onClickIcon"
|
||||
/>
|
||||
<van-goods-action-icon
|
||||
icon="cart-o"
|
||||
:text="$t('icon2')"
|
||||
@click="onClickIcon"
|
||||
/>
|
||||
<van-goods-action-button
|
||||
type="warning"
|
||||
:text="$t('button1')"
|
||||
@click="onClickButton"
|
||||
/>
|
||||
<van-goods-action-button
|
||||
type="danger"
|
||||
:text="$t('button2')"
|
||||
@click="onClickButton"
|
||||
/>
|
||||
</van-goods-action>
|
||||
</demo-block>
|
||||
|
||||
@ -22,9 +37,17 @@
|
||||
|
||||
<demo-block v-if="!isWeapp" :title="$t('customIconColor')">
|
||||
<van-goods-action>
|
||||
<van-goods-action-icon icon="chat-o" :text="$t('icon1')" color="#07c160" />
|
||||
<van-goods-action-icon
|
||||
icon="chat-o"
|
||||
:text="$t('icon1')"
|
||||
color="#07c160"
|
||||
/>
|
||||
<van-goods-action-icon icon="cart-o" :text="$t('icon2')" />
|
||||
<van-goods-action-icon icon="star" :text="$t('collected')" color="#ff5000" />
|
||||
<van-goods-action-icon
|
||||
icon="star"
|
||||
:text="$t('collected')"
|
||||
color="#ff5000"
|
||||
/>
|
||||
<van-goods-action-button type="warning" :text="$t('button1')" />
|
||||
<van-goods-action-button type="danger" :text="$t('button2')" />
|
||||
</van-goods-action>
|
||||
@ -34,8 +57,16 @@
|
||||
<van-goods-action>
|
||||
<van-goods-action-icon icon="chat-o" :text="$t('icon1')" />
|
||||
<van-goods-action-icon icon="cart-o" :text="$t('icon2')" />
|
||||
<van-goods-action-button color="#be99ff" type="warning" :text="$t('button1')" />
|
||||
<van-goods-action-button color="#7232dd" type="danger" :text="$t('button2')" />
|
||||
<van-goods-action-button
|
||||
color="#be99ff"
|
||||
type="warning"
|
||||
:text="$t('button1')"
|
||||
/>
|
||||
<van-goods-action-button
|
||||
color="#7232dd"
|
||||
type="danger"
|
||||
:text="$t('button2')"
|
||||
/>
|
||||
</van-goods-action>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
|
||||
@ -2,46 +2,79 @@
|
||||
<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>
|
||||
|
||||
<demo-block :title="$t('route')">
|
||||
<van-grid clickable :column-num="2">
|
||||
<van-grid-item icon="home-o" :text="$t('vueRoute')" to="/" />
|
||||
<van-grid-item icon="search" :text="$t('urlRoute')" url="/vant/mobile.html" />
|
||||
<van-grid-item
|
||||
icon="search"
|
||||
:text="$t('urlRoute')"
|
||||
url="/vant/mobile.html"
|
||||
/>
|
||||
</van-grid>
|
||||
</demo-block>
|
||||
|
||||
|
||||
@ -3,10 +3,7 @@
|
||||
<van-tabs v-model="activeTab" :color="BLUE">
|
||||
<van-tab :title="$t('basicUsage')">
|
||||
<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-cell :title="$t('text')" />
|
||||
<van-cell :title="$t('text')" />
|
||||
@ -17,10 +14,7 @@
|
||||
|
||||
<van-tab :title="$t('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">
|
||||
{{ $t('title') + index }}
|
||||
</van-index-anchor>
|
||||
|
||||
@ -51,7 +51,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-lazyload {
|
||||
padding-right: @padding-md;
|
||||
|
||||
@ -2,30 +2,20 @@
|
||||
<demo-section>
|
||||
<van-tabs>
|
||||
<van-tab :title="$t('basicUsage')">
|
||||
<van-pull-refresh
|
||||
v-model="list[0].refreshing"
|
||||
@refresh="onRefresh(0)"
|
||||
>
|
||||
<van-pull-refresh v-model="list[0].refreshing" @refresh="onRefresh(0)">
|
||||
<van-list
|
||||
v-model="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-cell v-for="item in list[0].items" :key="item" :title="item" />
|
||||
</van-list>
|
||||
</van-pull-refresh>
|
||||
</van-tab>
|
||||
|
||||
<van-tab :title="$t('errorInfo')">
|
||||
<van-pull-refresh
|
||||
v-model="list[1].refreshing"
|
||||
@refresh="onRefresh(1)"
|
||||
>
|
||||
<van-pull-refresh v-model="list[1].refreshing" @refresh="onRefresh(1)">
|
||||
<van-list
|
||||
v-model="list[1].loading"
|
||||
:finished="list[1].finished"
|
||||
@ -33,11 +23,7 @@
|
||||
:error-text="$t('errorText')"
|
||||
@load="onLoad(1)"
|
||||
>
|
||||
<van-cell
|
||||
v-for="item in list[1].items"
|
||||
:key="item"
|
||||
:title="item"
|
||||
/>
|
||||
<van-cell v-for="item in list[1].items" :key="item" :title="item" />
|
||||
</van-list>
|
||||
</van-pull-refresh>
|
||||
</van-tab>
|
||||
@ -62,19 +48,22 @@ export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
list: [{
|
||||
items: [],
|
||||
refreshing: false,
|
||||
loading: false,
|
||||
error: false,
|
||||
finished: false,
|
||||
}, {
|
||||
items: [],
|
||||
refreshing: false,
|
||||
loading: false,
|
||||
error: false,
|
||||
finished: false,
|
||||
}],
|
||||
list: [
|
||||
{
|
||||
items: [],
|
||||
refreshing: false,
|
||||
loading: false,
|
||||
error: false,
|
||||
finished: false,
|
||||
},
|
||||
{
|
||||
items: [],
|
||||
refreshing: false,
|
||||
loading: false,
|
||||
error: false,
|
||||
finished: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
@ -7,10 +7,7 @@
|
||||
|
||||
<demo-block :title="$t('color')">
|
||||
<van-loading color="#1989fa" />
|
||||
<van-loading
|
||||
type="spinner"
|
||||
color="#1989fa"
|
||||
/>
|
||||
<van-loading type="spinner" color="#1989fa" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('text')">
|
||||
@ -20,10 +17,7 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('vertical')">
|
||||
<van-loading
|
||||
size="24px"
|
||||
vertical
|
||||
>
|
||||
<van-loading size="24px" vertical>
|
||||
{{ $t('loading') }}
|
||||
</van-loading>
|
||||
</demo-block>
|
||||
@ -50,7 +44,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-loading {
|
||||
background: @white;
|
||||
|
||||
@ -12,11 +12,7 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<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>
|
||||
<van-icon name="search" />
|
||||
</template>
|
||||
|
||||
@ -1,36 +1,20 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-notice-bar
|
||||
:text="$t('text')"
|
||||
left-icon="volume-o"
|
||||
/>
|
||||
<van-notice-bar :text="$t('text')" left-icon="volume-o" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('unscrollable')">
|
||||
<van-notice-bar
|
||||
:scrollable="false"
|
||||
:text="$t('text')"
|
||||
/>
|
||||
<van-notice-bar :scrollable="false" :text="$t('text')" />
|
||||
</demo-block>
|
||||
|
||||
<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 :title="$t('mode')">
|
||||
<van-notice-bar
|
||||
mode="closeable"
|
||||
:text="$t('text')"
|
||||
/>
|
||||
<van-notice-bar
|
||||
mode="link"
|
||||
:text="$t('text')"
|
||||
/>
|
||||
<van-notice-bar mode="closeable" :text="$t('text')" />
|
||||
<van-notice-bar mode="link" :text="$t('text')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customStyle')">
|
||||
@ -51,14 +35,16 @@ export default {
|
||||
unscrollable: '禁用滚动',
|
||||
mode: '通知栏模式',
|
||||
wrapable: '多行展示',
|
||||
text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。',
|
||||
text:
|
||||
'足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。',
|
||||
customStyle: '自定义样式',
|
||||
},
|
||||
'en-US': {
|
||||
mode: 'Mode',
|
||||
wrapable: 'Wrapable',
|
||||
unscrollable: 'Disable scroll',
|
||||
text: 'Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.',
|
||||
text:
|
||||
'Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.',
|
||||
customStyle: 'Custom Style',
|
||||
},
|
||||
},
|
||||
|
||||
@ -6,17 +6,41 @@
|
||||
|
||||
<demo-block :title="$t('notifyType')">
|
||||
<div style="margin-bottom: 15px;">
|
||||
<van-button type="info" :text="$t('primary')" @click="showType('primary')" />
|
||||
<van-button type="primary" :text="$t('success')" @click="showType('success')" />
|
||||
<van-button
|
||||
type="info"
|
||||
:text="$t('primary')"
|
||||
@click="showType('primary')"
|
||||
/>
|
||||
<van-button
|
||||
type="primary"
|
||||
:text="$t('success')"
|
||||
@click="showType('success')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<van-button type="danger" :text="$t('danger')" @click="showType('danger')" />
|
||||
<van-button type="warning" :text="$t('warning')" @click="showType('warning')" />
|
||||
<van-button
|
||||
type="danger"
|
||||
:text="$t('danger')"
|
||||
@click="showType('danger')"
|
||||
/>
|
||||
<van-button
|
||||
type="warning"
|
||||
:text="$t('warning')"
|
||||
@click="showType('warning')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customNotify')">
|
||||
<van-button type="primary" :text="$t('customColor')" @click="showCustomColor" />
|
||||
<van-button type="primary" :text="$t('customDuration')" @click="showCustomDuration" />
|
||||
<van-button
|
||||
type="primary"
|
||||
:text="$t('customColor')"
|
||||
@click="showCustomColor"
|
||||
/>
|
||||
<van-button
|
||||
type="primary"
|
||||
:text="$t('customDuration')"
|
||||
@click="showCustomDuration"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('default')">
|
||||
<van-button type="primary" @touchstart.stop="keyboard = 'default'">{{ $t('button1') }}</van-button>
|
||||
<van-button type="primary" @touchstart.stop="keyboard = 'default'">
|
||||
{{ $t('button1') }}
|
||||
</van-button>
|
||||
|
||||
<van-number-keyboard
|
||||
:show="keyboard === 'default'"
|
||||
@ -14,7 +16,9 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('custom')">
|
||||
<van-button type="info" @touchstart.stop="keyboard = 'custom'">{{ $t('button2') }}</van-button>
|
||||
<van-button type="info" @touchstart.stop="keyboard = 'custom'">
|
||||
{{ $t('button2') }}
|
||||
</van-button>
|
||||
|
||||
<van-number-keyboard
|
||||
:show="keyboard === 'custom'"
|
||||
@ -45,7 +49,9 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('extraKey')">
|
||||
<van-button plain type="primary" @touchstart.stop="keyboard = 'extraKey'">{{ $t('button3') }}</van-button>
|
||||
<van-button plain type="primary" @touchstart.stop="keyboard = 'extraKey'">
|
||||
{{ $t('button3') }}
|
||||
</van-button>
|
||||
|
||||
<van-number-keyboard
|
||||
:show="keyboard === 'extraKey'"
|
||||
@ -58,7 +64,9 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title')">
|
||||
<van-button plain type="info" @touchstart.stop="keyboard = 'title'">{{ $t('button4') }}</van-button>
|
||||
<van-button plain type="info" @touchstart.stop="keyboard = 'title'">
|
||||
{{ $t('button4') }}
|
||||
</van-button>
|
||||
|
||||
<van-number-keyboard
|
||||
:show="keyboard === 'title'"
|
||||
|
||||
@ -2,13 +2,17 @@
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">弹出默认键盘</span></button>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
弹出默认键盘
|
||||
</span></button>
|
||||
<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="z-index: 100;" name="van-slide-up">
|
||||
<div class="van-number-keyboard__title van-hairline--top"><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
|
||||
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra">.</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div><button class="van-button van-button--info van-button--normal"><span class="van-button__text">弹出自定义键盘</span></button>
|
||||
<div><button class="van-button van-button--info van-button--normal"><span class="van-button__text">
|
||||
弹出自定义键盘
|
||||
</span></button>
|
||||
<div class="van-number-keyboard van-number-keyboard--custom van-number-keyboard--safe-area-inset-bottom" style="z-index: 100; display: none;" name="van-slide-up">
|
||||
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--middle">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--extra">.</i>
|
||||
<div class="van-number-keyboard__sidebar"><i role="button" tabindex="0" class="van-hairline van-key van-key--delete van-key--big van-key--gray van-key--delete">删除</i><i role="button" tabindex="0" class="van-hairline van-key van-key--blue van-key--big van-key--close">完成</i></div>
|
||||
@ -25,13 +29,17 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">弹出身份证号码键盘</span></button>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">
|
||||
弹出身份证号码键盘
|
||||
</span></button>
|
||||
<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="z-index: 100; display: none;" name="van-slide-up">
|
||||
<div class="van-number-keyboard__title van-hairline--top"><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
|
||||
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra">X</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div><button class="van-button van-button--info van-button--normal van-button--plain"><span class="van-button__text">弹出自定义标题键盘</span></button>
|
||||
<div><button class="van-button van-button--info van-button--normal van-button--plain"><span class="van-button__text">
|
||||
弹出自定义标题键盘
|
||||
</span></button>
|
||||
<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="z-index: 100; display: none;" name="van-slide-up">
|
||||
<div class="van-number-keyboard__title van-hairline--top"><span>键盘标题</span><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
|
||||
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra">.</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
|
||||
|
||||
@ -51,7 +51,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-overlay {
|
||||
background: @white;
|
||||
|
||||
@ -62,7 +62,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-pagination {
|
||||
.van-pagination {
|
||||
|
||||
@ -1,28 +1,17 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-panel
|
||||
:title="$t('title')"
|
||||
:desc="$t('desc')"
|
||||
:status="$t('status')"
|
||||
>
|
||||
<van-panel :title="$t('title')" :desc="$t('desc')" :status="$t('status')">
|
||||
<div>{{ $t('content') }}</div>
|
||||
</van-panel>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<van-panel
|
||||
:title="$t('title')"
|
||||
:desc="$t('desc')"
|
||||
:status="$t('status')"
|
||||
>
|
||||
<van-panel :title="$t('title')" :desc="$t('desc')" :status="$t('status')">
|
||||
<div>{{ $t('content') }}</div>
|
||||
<template #footer>
|
||||
<van-button size="small">{{ $t('button') }}</van-button>
|
||||
<van-button
|
||||
size="small"
|
||||
type="danger"
|
||||
>
|
||||
<van-button size="small" type="danger">
|
||||
{{ $t('button') }}
|
||||
</van-button>
|
||||
</template>
|
||||
|
||||
@ -5,7 +5,11 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('defaultIndex')">
|
||||
<van-picker :columns="$t('column1')" :default-index="2" @change="onChange1" />
|
||||
<van-picker
|
||||
:columns="$t('column1')"
|
||||
:default-index="2"
|
||||
@change="onChange1"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
@ -63,7 +67,11 @@ export default {
|
||||
withPopup: '搭配弹出层使用',
|
||||
chooseCity: '选择城市',
|
||||
column1: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||||
column2: [{ text: '杭州', disabled: true }, { text: '宁波' }, { text: '温州' }],
|
||||
column2: [
|
||||
{ text: '杭州', disabled: true },
|
||||
{ text: '宁波' },
|
||||
{ text: '温州' },
|
||||
],
|
||||
column3: {
|
||||
浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||||
福建: ['福州', '厦门', '莆田', '三明', '泉州'],
|
||||
|
||||
@ -2,27 +2,62 @@
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-cell :title="$t('buttonBasic')" is-link @click="showBasic = true" />
|
||||
<van-popup v-model="showBasic" :style="{ padding: '30px 50px' }">{{ $t('content') }}</van-popup>
|
||||
<van-popup v-model="showBasic" :style="{ padding: '30px 50px' }">
|
||||
{{ $t('content') }}
|
||||
</van-popup>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('position')">
|
||||
<van-cell :title="$t('buttonTop')" is-link @click="showTop = true" />
|
||||
<van-cell :title="$t('buttonBottom')" is-link @click="showBottom = true" />
|
||||
<van-cell
|
||||
:title="$t('buttonBottom')"
|
||||
is-link
|
||||
@click="showBottom = true"
|
||||
/>
|
||||
<van-cell :title="$t('buttonLeft')" is-link @click="showLeft = true" />
|
||||
<van-cell :title="$t('buttonRight')" is-link @click="showRight = true" />
|
||||
|
||||
<van-popup v-model="showTop" position="top" :style="{ height: '20%' }" />
|
||||
<van-popup v-model="showBottom" position="bottom" :style="{ height: '20%' }" />
|
||||
<van-popup v-model="showLeft" position="left" :style="{ width: '20%', height: '100%' }" />
|
||||
<van-popup v-model="showRight" position="right" :style="{ width: '20%', height: '100%' }" />
|
||||
<van-popup
|
||||
v-model="showBottom"
|
||||
position="bottom"
|
||||
:style="{ height: '20%' }"
|
||||
/>
|
||||
<van-popup
|
||||
v-model="showLeft"
|
||||
position="left"
|
||||
:style="{ width: '20%', height: '100%' }"
|
||||
/>
|
||||
<van-popup
|
||||
v-model="showRight"
|
||||
position="right"
|
||||
:style="{ width: '20%', height: '100%' }"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('closeIcon')">
|
||||
<van-cell :title="$t('closeIcon')" is-link @click="showCloseIcon = true" />
|
||||
<van-cell :title="$t('customCloseIcon')" is-link @click="showCustomCloseIcon = true" />
|
||||
<van-cell :title="$t('customIconPosition')" is-link @click="showCustomIconPosition = true" />
|
||||
<van-cell
|
||||
:title="$t('closeIcon')"
|
||||
is-link
|
||||
@click="showCloseIcon = true"
|
||||
/>
|
||||
<van-cell
|
||||
:title="$t('customCloseIcon')"
|
||||
is-link
|
||||
@click="showCustomCloseIcon = true"
|
||||
/>
|
||||
<van-cell
|
||||
:title="$t('customIconPosition')"
|
||||
is-link
|
||||
@click="showCustomIconPosition = true"
|
||||
/>
|
||||
|
||||
<van-popup v-model="showCloseIcon" closeable position="bottom" :style="{ height: '20%' }" />
|
||||
<van-popup
|
||||
v-model="showCloseIcon"
|
||||
closeable
|
||||
position="bottom"
|
||||
:style="{ height: '20%' }"
|
||||
/>
|
||||
<van-popup
|
||||
v-model="showCustomCloseIcon"
|
||||
closeable
|
||||
@ -40,13 +75,30 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('roundCorner')">
|
||||
<van-cell :title="$t('roundCorner')" is-link @click="showRoundCorner = true" />
|
||||
<van-popup v-model="showRoundCorner" round position="bottom" :style="{ height: '20%' }" />
|
||||
<van-cell
|
||||
:title="$t('roundCorner')"
|
||||
is-link
|
||||
@click="showRoundCorner = true"
|
||||
/>
|
||||
<van-popup
|
||||
v-model="showRoundCorner"
|
||||
round
|
||||
position="bottom"
|
||||
:style="{ height: '20%' }"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block v-if="!isWeapp" :title="$t('getContainer')">
|
||||
<van-cell :title="$t('getContainer')" is-link @click="showGetContainer = true" />
|
||||
<van-popup v-model="showGetContainer" get-container="body" :style="{ padding: '30px 50px' }" />
|
||||
<van-cell
|
||||
:title="$t('getContainer')"
|
||||
is-link
|
||||
@click="showGetContainer = true"
|
||||
/>
|
||||
<van-popup
|
||||
v-model="showGetContainer"
|
||||
get-container="body"
|
||||
:style="{ padding: '30px 50px' }"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -13,7 +13,11 @@
|
||||
</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"
|
||||
|
||||
@ -27,9 +27,7 @@
|
||||
<img
|
||||
class="doge"
|
||||
src="https://b.yzcdn.cn/vant/doge.png"
|
||||
:style="{
|
||||
transform: `scale(${distance / 80})`
|
||||
}"
|
||||
:style="{ transform: `scale(${distance / 80})` }"
|
||||
/>
|
||||
</template>
|
||||
<template #loosing>
|
||||
|
||||
@ -30,8 +30,12 @@
|
||||
|
||||
<demo-block :title="$t('customColor')">
|
||||
<van-radio-group v-model="radio3" class="demo-radio-group">
|
||||
<van-radio name="1" checked-color="#07c160">{{ $t('radio') }} 1</van-radio>
|
||||
<van-radio name="2" checked-color="#07c160">{{ $t('radio') }} 2</van-radio>
|
||||
<van-radio name="1" checked-color="#07c160">
|
||||
{{ $t('radio') }} 1
|
||||
</van-radio>
|
||||
<van-radio name="2" checked-color="#07c160">
|
||||
{{ $t('radio') }} 2
|
||||
</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
@ -125,7 +129,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-radio {
|
||||
background: @white;
|
||||
|
||||
@ -54,11 +54,15 @@ exports[`renders demo correctly 1`] = `
|
||||
<div role="radiogroup" class="demo-radio-group van-radio-group">
|
||||
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
|
||||
<!----></i></div><span class="van-radio__label">单选框 1</span>
|
||||
<!----></i></div><span class="van-radio__label">
|
||||
单选框 1
|
||||
</span>
|
||||
</div>
|
||||
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-radio__label">单选框 2</span>
|
||||
<!----></i></div><span class="van-radio__label">
|
||||
单选框 2
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,11 +5,7 @@
|
||||
</demo-block>
|
||||
|
||||
<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 :title="$t('customStyle')">
|
||||
@ -33,24 +29,15 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customCount')">
|
||||
<van-rate
|
||||
v-model="value5"
|
||||
:count="6"
|
||||
/>
|
||||
<van-rate v-model="value5" :count="6" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-rate
|
||||
v-model="value6"
|
||||
disabled
|
||||
/>
|
||||
<van-rate v-model="value6" disabled />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('readonly')">
|
||||
<van-rate
|
||||
v-model="value6"
|
||||
readonly
|
||||
/>
|
||||
<van-rate v-model="value6" readonly />
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
@ -90,7 +77,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-rate {
|
||||
padding-bottom: 20px;
|
||||
|
||||
@ -1,31 +1,16 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-skeleton
|
||||
title
|
||||
:row="3"
|
||||
/>
|
||||
<van-skeleton title :row="3" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('showAvatar')">
|
||||
<van-skeleton
|
||||
title
|
||||
avatar
|
||||
:row="3"
|
||||
/>
|
||||
<van-skeleton title avatar :row="3" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('showChildren')">
|
||||
<van-switch
|
||||
v-model="show"
|
||||
size="24px"
|
||||
/>
|
||||
<van-skeleton
|
||||
title
|
||||
avatar
|
||||
:row="3"
|
||||
:loading="!show"
|
||||
>
|
||||
<van-switch v-model="show" size="24px" />
|
||||
<van-skeleton title avatar :row="3" :loading="!show">
|
||||
<div class="demo-preview">
|
||||
<img src="https://img.yzcdn.cn/vant/logo.png" />
|
||||
<div class="demo-content">
|
||||
@ -45,7 +30,8 @@ export default {
|
||||
showAvatar: '显示头像',
|
||||
showChildren: '显示子组件',
|
||||
title: '关于 Vant',
|
||||
desc: 'Vant 是一套轻量、可靠的移动端 Vue 组件库，提供了丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。',
|
||||
desc:
|
||||
'Vant 是一套轻量、可靠的移动端 Vue 组件库，提供了丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。',
|
||||
},
|
||||
'en-US': {
|
||||
showAvatar: 'Show Avatar',
|
||||
@ -64,7 +50,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-skeleton {
|
||||
background-color: @white;
|
||||
|
||||
@ -23,11 +23,7 @@
|
||||
@buy-clicked="onBuyClicked"
|
||||
@add-cart="onAddCartClicked"
|
||||
/>
|
||||
<van-button
|
||||
block
|
||||
type="primary"
|
||||
@click="showBase = true"
|
||||
>
|
||||
<van-button block type="primary" @click="showBase = true">
|
||||
{{ $t('basicUsage') }}
|
||||
</van-button>
|
||||
</div>
|
||||
@ -53,11 +49,7 @@
|
||||
@buy-clicked="onBuyClicked"
|
||||
@add-cart="onAddCartClicked"
|
||||
/>
|
||||
<van-button
|
||||
block
|
||||
type="primary"
|
||||
@click="showStepper = true"
|
||||
>
|
||||
<van-button block type="primary" @click="showStepper = true">
|
||||
{{ $t('title2') }}
|
||||
</van-button>
|
||||
</div>
|
||||
@ -84,11 +76,7 @@
|
||||
@buy-clicked="onBuyClicked"
|
||||
@add-cart="onAddCartClicked"
|
||||
/>
|
||||
<van-button
|
||||
block
|
||||
type="primary"
|
||||
@click="showSoldout = true"
|
||||
>
|
||||
<van-button block type="primary" @click="showSoldout = true">
|
||||
{{ $t('hideSoldoutSku') }}
|
||||
</van-button>
|
||||
</div>
|
||||
@ -117,7 +105,8 @@
|
||||
>
|
||||
<template #sku-header-price="{ price }">
|
||||
<div class="van-sku__goods-price">
|
||||
<span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ price }}</span>
|
||||
<span class="van-sku__price-symbol">￥</span>
|
||||
<span class="van-sku__price-num">{{ price }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #sku-actions="{ skuEventBus }">
|
||||
@ -141,11 +130,7 @@
|
||||
</div>
|
||||
</template>
|
||||
</van-sku>
|
||||
<van-button
|
||||
block
|
||||
type="primary"
|
||||
@click="showCustom = true"
|
||||
>
|
||||
<van-button block type="primary" @click="showCustom = true">
|
||||
{{ $t('advancedUsage') }}
|
||||
</van-button>
|
||||
</div>
|
||||
@ -188,12 +173,14 @@ export default {
|
||||
customSkuValidator: () => '请选择xxx',
|
||||
customStepperConfig: {
|
||||
quotaText: '单次限购100件',
|
||||
stockFormatter: (stock) => `剩余${stock}件`,
|
||||
handleOverLimit: (data) => {
|
||||
stockFormatter: stock => `剩余${stock}件`,
|
||||
handleOverLimit: data => {
|
||||
const { action, limitType, quota, startSaleNum = 1 } = data;
|
||||
|
||||
if (action === 'minus') {
|
||||
this.$toast(startSaleNum > 1 ? `${startSaleNum}件起售` : '至少选择一件商品');
|
||||
this.$toast(
|
||||
startSaleNum > 1 ? `${startSaleNum}件起售` : '至少选择一件商品'
|
||||
);
|
||||
} else if (action === 'plus') {
|
||||
if (limitType === LIMIT_TYPE.QUOTA_LIMIT) {
|
||||
this.$toast(`限购${quota}件`);
|
||||
@ -204,9 +191,10 @@ export default {
|
||||
},
|
||||
},
|
||||
messageConfig: {
|
||||
uploadImg: (file, img) => new Promise(resolve => {
|
||||
setTimeout(() => resolve(img), 1000);
|
||||
}),
|
||||
uploadImg: (file, img) =>
|
||||
new Promise(resolve => {
|
||||
setTimeout(() => resolve(img), 1000);
|
||||
}),
|
||||
uploadMaxSize: 3,
|
||||
},
|
||||
};
|
||||
@ -229,7 +217,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-sku {
|
||||
background-color: @white;
|
||||
|
||||
@ -1,34 +1,19 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('title1')">
|
||||
<van-slider
|
||||
v-model="value1"
|
||||
@change="onChange"
|
||||
/>
|
||||
<van-slider v-model="value1" @change="onChange" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-slider
|
||||
v-model="value2"
|
||||
:min="-50"
|
||||
:max="50"
|
||||
@change="onChange"
|
||||
/>
|
||||
<van-slider v-model="value2" :min="-50" :max="50" @change="onChange" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-slider
|
||||
v-model="value3"
|
||||
disabled
|
||||
/>
|
||||
<van-slider v-model="value3" disabled />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title4')">
|
||||
<van-slider
|
||||
v-model="value4"
|
||||
:step="10"
|
||||
@change="onChange"
|
||||
/>
|
||||
<van-slider v-model="value4" :step="10" @change="onChange" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customStyle')">
|
||||
@ -41,10 +26,7 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customButton')">
|
||||
<van-slider
|
||||
v-model="value6"
|
||||
active-color="#ee0a24"
|
||||
>
|
||||
<van-slider v-model="value6" active-color="#ee0a24">
|
||||
<template #button>
|
||||
<div class="custom-button">{{ value6 }}</div>
|
||||
</template>
|
||||
@ -53,11 +35,7 @@
|
||||
|
||||
<demo-block v-if="!isWeapp" :title="$t('vertical')">
|
||||
<div :style="{ height: '120px', paddingLeft: '30px' }">
|
||||
<van-slider
|
||||
v-model="value7"
|
||||
vertical
|
||||
@change="onChange"
|
||||
/>
|
||||
<van-slider v-model="value7" vertical @change="onChange" />
|
||||
</div>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
|
||||
@ -26,10 +26,7 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-steps
|
||||
:active="0"
|
||||
direction="vertical"
|
||||
>
|
||||
<van-steps :active="0" direction="vertical">
|
||||
<van-step>
|
||||
<h3>{{ $t('status1') }}</h3>
|
||||
<p>2016-07-12 12:40</p>
|
||||
|
||||
@ -2,20 +2,26 @@
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-sticky>
|
||||
<van-button type="primary" style="margin-left: 15px;">{{ $t('basicUsage') }}</van-button>
|
||||
<van-button type="primary" style="margin-left: 15px;">
|
||||
{{ $t('basicUsage') }}
|
||||
</van-button>
|
||||
</van-sticky>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('offsetTop')">
|
||||
<van-sticky :offset-top="50">
|
||||
<van-button type="info" style="margin-left: 115px;">{{ $t('offsetTop') }}</van-button>
|
||||
<van-button type="info" 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 type="warning" style="margin-left: 215px;">
|
||||
{{ $t('setContainer') }}
|
||||
</van-button>
|
||||
</van-sticky>
|
||||
</div>
|
||||
</demo-block>
|
||||
|
||||
@ -4,18 +4,24 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-sticky"><button class="van-button van-button--primary van-button--normal" style="margin-left: 15px;"><span class="van-button__text">基础用法</span></button></div>
|
||||
<div class="van-sticky"><button class="van-button van-button--primary van-button--normal" style="margin-left: 15px;"><span class="van-button__text">
|
||||
基础用法
|
||||
</span></button></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="height: 0px;">
|
||||
<div class="van-sticky van-sticky--fixed" style="top: 50px;"><button class="van-button van-button--info van-button--normal" style="margin-left: 115px;"><span class="van-button__text">吸顶距离</span></button></div>
|
||||
<div class="van-sticky van-sticky--fixed" style="top: 50px;"><button class="van-button van-button--info van-button--normal" style="margin-left: 115px;"><span class="van-button__text">
|
||||
吸顶距离
|
||||
</span></button></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="height: 150px; background-color: rgb(255, 255, 255);">
|
||||
<div>
|
||||
<div class="van-sticky"><button class="van-button van-button--warning van-button--normal" style="margin-left: 215px;"><span class="van-button__text">指定容器</span></button></div>
|
||||
<div class="van-sticky"><button class="van-button van-button--warning van-button--normal" style="margin-left: 215px;"><span class="van-button__text">
|
||||
指定容器
|
||||
</span></button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,26 +10,10 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('animation')">
|
||||
<van-cell
|
||||
is-link
|
||||
title="Fade"
|
||||
@click="animate('van-fade')"
|
||||
/>
|
||||
<van-cell
|
||||
is-link
|
||||
title="Slide Up"
|
||||
@click="animate('van-slide-up')"
|
||||
/>
|
||||
<van-cell
|
||||
is-link
|
||||
title="Slide Down"
|
||||
@click="animate('van-slide-down')"
|
||||
/>
|
||||
<van-cell
|
||||
is-link
|
||||
title="Slide Left"
|
||||
@click="animate('van-slide-left')"
|
||||
/>
|
||||
<van-cell is-link title="Fade" @click="animate('van-fade')" />
|
||||
<van-cell is-link title="Slide Up" @click="animate('van-slide-up')" />
|
||||
<van-cell is-link title="Slide Down" @click="animate('van-slide-down')" />
|
||||
<van-cell is-link title="Slide Left" @click="animate('van-slide-left')" />
|
||||
<van-cell
|
||||
is-link
|
||||
title="Slide Right"
|
||||
@ -38,10 +22,7 @@
|
||||
</demo-block>
|
||||
|
||||
<transition :name="transitionName">
|
||||
<div
|
||||
v-show="show"
|
||||
class="demo-animate-block"
|
||||
/>
|
||||
<div v-show="show" class="demo-animate-block" />
|
||||
</transition>
|
||||
</demo-section>
|
||||
</template>
|
||||
@ -55,15 +36,18 @@ export default {
|
||||
animation: '动画',
|
||||
toggle: '切换动画',
|
||||
text1: '这是一段最多显示一行的文字，后面的内容会省略',
|
||||
text2: '这是一段最多显示两行的文字，后面的内容会省略。这是一段最多显示两行的文字，后面的内容会省略',
|
||||
text2:
|
||||
'这是一段最多显示两行的文字，后面的内容会省略。这是一段最多显示两行的文字，后面的内容会省略',
|
||||
},
|
||||
'en-US': {
|
||||
hairline: 'Hairline',
|
||||
ellipsis: 'Text Ellipsis',
|
||||
animation: 'Animation',
|
||||
toggle: 'Switch animation',
|
||||
text1: 'This is a paragraph that displays up to one line of text, and the rest of the text will be omitted.',
|
||||
text2: 'This is a paragraph that displays up to two lines of text, and the rest of the text will be omitted.',
|
||||
text1:
|
||||
'This is a paragraph that displays up to one line of text, and the rest of the text will be omitted.',
|
||||
text2:
|
||||
'This is a paragraph that displays up to two lines of text, and the rest of the text will be omitted.',
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@ -37,10 +37,7 @@
|
||||
<van-checkbox v-model="checked">{{ $t('check') }}</van-checkbox>
|
||||
<template #tip>
|
||||
{{ $t('tip2') }}
|
||||
<span
|
||||
class="edit-address"
|
||||
@click="onClickLink"
|
||||
>
|
||||
<span class="edit-address" @click="onClickLink">
|
||||
{{ $t('tip3') }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
@ -4,11 +4,7 @@
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-swipe-cell>
|
||||
<template #left>
|
||||
<van-button
|
||||
square
|
||||
type="primary"
|
||||
:text="$t('select')"
|
||||
/>
|
||||
<van-button square type="primary" :text="$t('select')" />
|
||||
</template>
|
||||
<van-cell
|
||||
:border="false"
|
||||
@ -16,16 +12,8 @@
|
||||
:value="$t('content')"
|
||||
/>
|
||||
<template #right>
|
||||
<van-button
|
||||
square
|
||||
type="danger"
|
||||
:text="$t('delete')"
|
||||
/>
|
||||
<van-button
|
||||
square
|
||||
type="primary"
|
||||
:text="$t('collect')"
|
||||
/>
|
||||
<van-button square type="danger" :text="$t('delete')" />
|
||||
<van-button square type="primary" :text="$t('collect')" />
|
||||
</template>
|
||||
</van-swipe-cell>
|
||||
</demo-block>
|
||||
@ -33,11 +21,7 @@
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-swipe-cell :before-close="beforeClose">
|
||||
<template #left>
|
||||
<van-button
|
||||
square
|
||||
type="primary"
|
||||
:text="$t('select')"
|
||||
/>
|
||||
<van-button square type="primary" :text="$t('select')" />
|
||||
</template>
|
||||
<van-cell
|
||||
:border="false"
|
||||
@ -45,11 +29,7 @@
|
||||
:value="$t('content')"
|
||||
/>
|
||||
<template #right>
|
||||
<van-button
|
||||
square
|
||||
type="danger"
|
||||
:text="$t('delete')"
|
||||
/>
|
||||
<van-button square type="danger" :text="$t('delete')" />
|
||||
</template>
|
||||
</van-swipe-cell>
|
||||
</demo-block>
|
||||
@ -87,11 +67,13 @@ export default {
|
||||
instance.close();
|
||||
break;
|
||||
case 'right':
|
||||
this.$dialog.confirm({
|
||||
message: this.$t('confirm'),
|
||||
}).then(() => {
|
||||
instance.close();
|
||||
});
|
||||
this.$dialog
|
||||
.confirm({
|
||||
message: this.$t('confirm'),
|
||||
})
|
||||
.then(() => {
|
||||
instance.close();
|
||||
});
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
@ -2,30 +2,19 @@
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-cell-group>
|
||||
<van-switch-cell
|
||||
v-model="checked"
|
||||
:title="$t('title')"
|
||||
/>
|
||||
<van-switch-cell v-model="checked" :title="$t('title')" />
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-cell-group>
|
||||
<van-switch-cell
|
||||
v-model="checked"
|
||||
disabled
|
||||
:title="$t('title')"
|
||||
/>
|
||||
<van-switch-cell v-model="checked" disabled :title="$t('title')" />
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('loadingStatus')">
|
||||
<van-cell-group>
|
||||
<van-switch-cell
|
||||
v-model="checked"
|
||||
loading
|
||||
:title="$t('title')"
|
||||
/>
|
||||
<van-switch-cell v-model="checked" loading :title="$t('title')" />
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
|
||||
@ -11,10 +11,18 @@
|
||||
|
||||
<demo-block :title="$t('matchByName')">
|
||||
<van-tabbar v-model="activeName">
|
||||
<van-tabbar-item name="home" icon="home-o">{{ $t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item name="search" icon="search">{{ $t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item name="friends" icon="friends-o">{{ $t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item name="setting" icon="setting-o">{{ $t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item name="home" icon="home-o">
|
||||
{{ $t('tab') }}
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item name="search" icon="search">
|
||||
{{ $t('tab') }}
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item name="friends" icon="friends-o">
|
||||
{{ $t('tab') }}
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item name="setting" icon="setting-o">
|
||||
{{ $t('tab') }}
|
||||
</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</demo-block>
|
||||
|
||||
@ -22,8 +30,12 @@
|
||||
<van-tabbar v-model="active2">
|
||||
<van-tabbar-item icon="home-o">{{ $t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="search" dot>{{ $t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="friends-o" info="5">{{ $t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o" info="20">{{ $t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="friends-o" info="5">
|
||||
{{ $t('tab') }}
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item icon="setting-o" info="20">
|
||||
{{ $t('tab') }}
|
||||
</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</demo-block>
|
||||
|
||||
@ -41,7 +53,11 @@
|
||||
</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>
|
||||
|
||||
@ -41,28 +41,36 @@ exports[`renders demo correctly 1`] = `
|
||||
<!----></i>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">标签</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
标签
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-search">
|
||||
<!----></i>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">标签</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
标签
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-friends-o">
|
||||
<!----></i>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">标签</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
标签
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-setting-o">
|
||||
<!----></i>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">标签</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
标签
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -87,14 +95,18 @@ exports[`renders demo correctly 1`] = `
|
||||
<!----></i>
|
||||
<div class="van-info">5</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">标签</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
标签
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-setting-o">
|
||||
<!----></i>
|
||||
<div class="van-info">20</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">标签</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
标签
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,13 +1,29 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('title1')">
|
||||
<van-button type="primary" :text="$t('title1')" @click="$toast($t('text'))" />
|
||||
<van-button type="primary" :text="$t('longTextButton')" @click="$toast($t('longText'))" />
|
||||
<van-button
|
||||
type="primary"
|
||||
:text="$t('title1')"
|
||||
@click="$toast($t('text'))"
|
||||
/>
|
||||
<van-button
|
||||
type="primary"
|
||||
:text="$t('longTextButton')"
|
||||
@click="$toast($t('longText'))"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-button type="primary" :text="$t('title2')" @click="showLoadingToast()" />
|
||||
<van-button type="primary" :text="$t('loadingType')" @click="showLoadingToast('spinner')" />
|
||||
<van-button
|
||||
type="primary"
|
||||
:text="$t('title2')"
|
||||
@click="showLoadingToast()"
|
||||
/>
|
||||
<van-button
|
||||
type="primary"
|
||||
:text="$t('loadingType')"
|
||||
@click="showLoadingToast('spinner')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
@ -16,12 +32,24 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block v-if="!isWeapp" :title="$t('customIcon')">
|
||||
<van-button type="primary" :text="$t('customIcon')" @click="showIconToast" />
|
||||
<van-button type="primary" :text="$t('customImage')" @click="showImageToast" />
|
||||
<van-button
|
||||
type="primary"
|
||||
:text="$t('customIcon')"
|
||||
@click="showIconToast"
|
||||
/>
|
||||
<van-button
|
||||
type="primary"
|
||||
:text="$t('customImage')"
|
||||
@click="showImageToast"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('updateMessage')">
|
||||
<van-button type="primary" :text="$t('updateMessage')" @click="showCustomizedToast" />
|
||||
<van-button
|
||||
type="primary"
|
||||
:text="$t('updateMessage')"
|
||||
@click="showCustomizedToast"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
@ -53,7 +81,8 @@ export default {
|
||||
success: 'Success',
|
||||
fail: 'Fail',
|
||||
text: 'Some messages',
|
||||
longText: 'This is a long message, text will wrap when over a certain length',
|
||||
longText:
|
||||
'This is a long message, text will wrap when over a certain length',
|
||||
text2: 'Success',
|
||||
text3: 'Fail',
|
||||
customIcon: 'Custom Icon',
|
||||
|
||||
@ -17,16 +17,31 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customContent')">
|
||||
<van-tree-select height="55vw" :items="simpleItems" :main-active-index.sync="activeIndex3">
|
||||
<van-tree-select
|
||||
height="55vw"
|
||||
:items="simpleItems"
|
||||
:main-active-index.sync="activeIndex3"
|
||||
>
|
||||
<template slot="content">
|
||||
<van-image v-if="activeIndex3 === 0" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
|
||||
<van-image v-if="activeIndex3 === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
|
||||
<van-image
|
||||
v-if="activeIndex3 === 0"
|
||||
src="https://img.yzcdn.cn/vant/apple-1.jpg"
|
||||
/>
|
||||
<van-image
|
||||
v-if="activeIndex3 === 1"
|
||||
src="https://img.yzcdn.cn/vant/apple-2.jpg"
|
||||
/>
|
||||
</template>
|
||||
</van-tree-select>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('showInfo')">
|
||||
<van-tree-select height="55vw" :items="infoItems" :active-id.sync="activeId2" :main-active-index.sync="activeIndex4" />
|
||||
<van-tree-select
|
||||
height="55vw"
|
||||
:items="infoItems"
|
||||
:active-id.sync="activeId2"
|
||||
:main-active-index.sync="activeIndex4"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -14,7 +14,9 @@
|
||||
|
||||
<demo-block :title="$t('uploadStyle')">
|
||||
<van-uploader>
|
||||
<van-button type="primary" icon="photo">{{ this.$t('upload') }}</van-button>
|
||||
<van-button type="primary" icon="photo">
|
||||
{{ this.$t('upload') }}
|
||||
</van-button>
|
||||
</van-uploader>
|
||||
</demo-block>
|
||||
|
||||
|
||||
@ -51,7 +51,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
<div class="van-uploader__input-wrapper"><button class="van-button van-button--primary van-button--normal"><i class="van-icon van-icon-photo van-button__icon">
|
||||
<!----></i><span class="van-button__text">上传文件</span></button><input type="file" accept="image/*" class="van-uploader__input"></div>
|
||||
<!----></i><span class="van-button__text">
|
||||
上传文件
|
||||
</span></button><input type="file" accept="image/*" class="van-uploader__input"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user