[Doc] beautify demo

This commit is contained in:
陈嘉涵
2019-05-16 14:08:44 +08:00
parent 3b89baedab
commit 0387fc7da8
26 changed files with 268 additions and 68 deletions
+42 -7
View File
@@ -1,12 +1,22 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-button @click="show1 = true">{{ $t('button1') }}</van-button>
<van-button
type="primary"
@click="show1 = true"
>
{{ $t('button1') }}
</van-button>
<van-popup v-model="show1">{{ $t('content') }}</van-popup>
</demo-block>
<demo-block :title="$t('position')">
<van-button @click="show2 = true;">{{ $t('button2') }}</van-button>
<van-button
type="primary"
@click="show2 = true"
>
{{ $t('button2') }}
</van-button>
<van-popup
v-model="show2"
@@ -20,7 +30,12 @@
/>
</van-popup>
<van-button @click="show3 = true">{{ $t('button4') }}</van-button>
<van-button
type="primary"
@click="show3 = true"
>
{{ $t('button4') }}
</van-button>
<van-popup
v-model="show3"
position="top"
@@ -29,18 +44,38 @@
{{ $t('content') }}
</van-popup>
<van-button @click="show4 = true">{{ $t('button5') }}</van-button>
<van-button
type="primary"
@click="show4 = true"
>
{{ $t('button5') }}
</van-button>
<van-popup
v-model="show4"
position="right"
>
<van-button @click="show4 = false">{{ $t('button6') }}</van-button>
<van-button @click="show5 = true">{{ $t('button5') }}</van-button>
<van-button
type="primary"
@click="show4 = false"
>
{{ $t('button6') }}
</van-button>
<van-button
type="primary"
@click="show5 = true"
>
{{ $t('button5') }}
</van-button>
<van-popup
v-model="show5"
position="right"
>
<van-button @click="show5 = false">{{ $t('button6') }}</van-button>
<van-button
type="primary"
@click="show5 = false"
>
{{ $t('button6') }}
</van-button>
</van-popup>
</van-popup>
</demo-block>
@@ -2,12 +2,20 @@
exports[`renders demo correctly 1`] = `
<div>
<div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出 Popup</span></button>
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
弹出 Popup
</span></button>
<!---->
</div>
<div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">底部弹出</span></button>
<!----> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">顶部弹出</span></button>
<!----> <button class="van-button van-button--default 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>
<!----> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
右侧弹出
</span></button>
<!---->
</div>
</div>