mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs: make document more compact
This commit is contained in:
陈嘉涵
parent
bb53c3c758
commit
3a4107ef49
@ -21,7 +21,6 @@ The `confirm` event will be triggered after the date selection is completed
|
||||
|
||||
```html
|
||||
<van-cell title="Select Single Date" :value="date" @click="show = true" />
|
||||
|
||||
<van-calendar v-model="show" @confirm="onConfirm" />
|
||||
```
|
||||
|
||||
@ -33,7 +32,6 @@ export default {
|
||||
show: false
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
formatDate(date) {
|
||||
return `${date.getMonth() + 1}/${date.getDate()}`;
|
||||
@ -52,7 +50,6 @@ You can select a date range after setting `type` to` range`. In range mode, the
|
||||
|
||||
```html
|
||||
<van-cell title="Select Date Range" :value="date" @click="show = true" />
|
||||
|
||||
<van-calendar v-model="show" type="range" @confirm="onConfirm" />
|
||||
```
|
||||
|
||||
@ -64,7 +61,6 @@ export default {
|
||||
show: false
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
formatDate(date) {
|
||||
return `${date.getMonth() + 1}/${date.getDate()}`;
|
||||
|
||||
@ -21,7 +21,6 @@ Vue.use(Calendar);
|
||||
|
||||
```html
|
||||
<van-cell title="选择单个日期" :value="date" @click="show = true" />
|
||||
|
||||
<van-calendar v-model="show" @confirm="onConfirm" />
|
||||
```
|
||||
|
||||
@ -33,7 +32,6 @@ export default {
|
||||
show: false
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
formatDate(date) {
|
||||
return `${date.getMonth() + 1}/${date.getDate()}`;
|
||||
@ -52,7 +50,6 @@ export default {
|
||||
|
||||
```html
|
||||
<van-cell title="选择日期区间" :value="date" @click="show = true" />
|
||||
|
||||
<van-calendar v-model="show" type="range" @confirm="onConfirm" />
|
||||
```
|
||||
|
||||
@ -64,7 +61,6 @@ export default {
|
||||
show: false
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
formatDate(date) {
|
||||
return `${date.getMonth() + 1}/${date.getDate()}`;
|
||||
|
||||
@ -64,11 +64,7 @@ export default {
|
||||
<div slot="title">Title1 <van-icon name="question-o" /></div>
|
||||
Content
|
||||
</van-collapse-item>
|
||||
<van-collapse-item
|
||||
title="Title2"
|
||||
name="2"
|
||||
icon="shop-o"
|
||||
>
|
||||
<van-collapse-item title="Title2" name="2" icon="shop-o">
|
||||
Content
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
|
||||
@ -64,12 +64,7 @@ export default {
|
||||
<div slot="title">标题1 <van-icon name="question-o" /></div>
|
||||
内容
|
||||
</van-collapse-item>
|
||||
|
||||
<van-collapse-item
|
||||
title="标题2"
|
||||
name="2"
|
||||
icon="shop-o"
|
||||
>
|
||||
<van-collapse-item title="标题2" name="2" icon="shop-o">
|
||||
内容
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
|
||||
@ -30,20 +30,13 @@ export default {
|
||||
### Custom Format
|
||||
|
||||
```html
|
||||
<van-count-down
|
||||
:time="time"
|
||||
format="DD Day, HH:mm:ss"
|
||||
/>
|
||||
<van-count-down :time="time" format="DD Day, HH:mm:ss" />
|
||||
```
|
||||
|
||||
### Millisecond
|
||||
|
||||
```html
|
||||
<van-count-down
|
||||
millisecond
|
||||
:time="time"
|
||||
format="HH:mm:ss:SS"
|
||||
/>
|
||||
<van-count-down millisecond :time="time" format="HH:mm:ss:SS" />
|
||||
```
|
||||
|
||||
### Custom Style
|
||||
|
||||
@ -34,10 +34,7 @@ export default {
|
||||
通过`format`属性设置倒计时文本的内容
|
||||
|
||||
```html
|
||||
<van-count-down
|
||||
:time="time"
|
||||
format="DD 天 HH 时 mm 分 ss 秒"
|
||||
/>
|
||||
<van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
|
||||
```
|
||||
|
||||
### 毫秒级渲染
|
||||
@ -45,11 +42,7 @@ export default {
|
||||
倒计时默认每秒渲染一次，设置`millisecond`属性可以开启毫秒级渲染
|
||||
|
||||
```html
|
||||
<van-count-down
|
||||
millisecond
|
||||
:time="time"
|
||||
format="HH:mm:ss:SS"
|
||||
/>
|
||||
<van-count-down millisecond :time="time" format="HH:mm:ss:SS" />
|
||||
```
|
||||
|
||||
### 自定义样式
|
||||
|
||||
@ -21,7 +21,6 @@ Vue.use(CouponList);
|
||||
:chosen-coupon="chosenCoupon"
|
||||
@click="showList = true"
|
||||
/>
|
||||
|
||||
<!-- Coupon List -->
|
||||
<van-popup
|
||||
v-model="showList"
|
||||
@ -60,7 +59,6 @@ export default {
|
||||
disabledCoupons: [coupon]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(index) {
|
||||
this.showList = false;
|
||||
|
||||
@ -21,7 +21,6 @@ Vue.use(CouponList);
|
||||
:chosen-coupon="chosenCoupon"
|
||||
@click="showList = true"
|
||||
/>
|
||||
|
||||
<!-- 优惠券列表 -->
|
||||
<van-popup
|
||||
v-model="showList"
|
||||
@ -60,7 +59,6 @@ export default {
|
||||
disabledCoupons: [coupon]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(index) {
|
||||
this.showList = false;
|
||||
|
||||
@ -82,11 +82,7 @@ export default {
|
||||
If you need to render vue components within a dialog, you can use dialog component.
|
||||
|
||||
```html
|
||||
<van-dialog
|
||||
v-model="show"
|
||||
title="Title"
|
||||
show-cancel-button
|
||||
>
|
||||
<van-dialog v-model="show" title="Title" show-cancel-button>
|
||||
<img src="https://img.yzcdn.cn/vant/apple-3.jpg">
|
||||
</van-dialog>
|
||||
```
|
||||
|
||||
@ -108,11 +108,7 @@ export default {
|
||||
如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式
|
||||
|
||||
```html
|
||||
<van-dialog
|
||||
v-model="show"
|
||||
title="标题"
|
||||
show-cancel-button
|
||||
>
|
||||
<van-dialog v-model="show" title="标题" show-cancel-button>
|
||||
<img src="https://img.yzcdn.cn/vant/apple-3.jpg">
|
||||
</van-dialog>
|
||||
```
|
||||
|
||||
@ -69,7 +69,6 @@ export default {
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onConfirm() {
|
||||
this.$refs.item.toggle();
|
||||
|
||||
@ -71,7 +71,6 @@ export default {
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onConfirm() {
|
||||
this.$refs.item.toggle();
|
||||
|
||||
@ -54,11 +54,7 @@ setTimeout(() => {
|
||||
### Component Call
|
||||
|
||||
```html
|
||||
<van-image-preview
|
||||
v-model="show"
|
||||
:images="images"
|
||||
@change="onChange"
|
||||
>
|
||||
<van-image-preview v-model="show" :images="images" @change="onChange">
|
||||
<template v-slot:index>Page: {{ index }}</template>
|
||||
</van-image-preview>
|
||||
```
|
||||
|
||||
@ -64,11 +64,7 @@ setTimeout(() => {
|
||||
如果需要在图片预览内嵌入组件或其他自定义内容，可以使用组件调用的方式，调用前需要通过 `Vue.use` 注册组件
|
||||
|
||||
```html
|
||||
<van-image-preview
|
||||
v-model="show"
|
||||
:images="images"
|
||||
@change="onChange"
|
||||
>
|
||||
<van-image-preview v-model="show" :images="images" @change="onChange">
|
||||
<template v-slot:index>第{{ index }}页</template>
|
||||
</van-image-preview>
|
||||
```
|
||||
|
||||
@ -24,11 +24,7 @@ Vue.use(List);
|
||||
finished-text="Finished"
|
||||
@load="onLoad"
|
||||
>
|
||||
<van-cell
|
||||
v-for="item in list"
|
||||
:key="item"
|
||||
:title="item"
|
||||
/>
|
||||
<van-cell v-for="item in list" :key="item" :title="item" />
|
||||
</van-list>
|
||||
```
|
||||
|
||||
@ -68,11 +64,7 @@ export default {
|
||||
error-text="Request failed. Click to reload"
|
||||
@load="onLoad"
|
||||
>
|
||||
<van-cell
|
||||
v-for="item in list"
|
||||
:key="item"
|
||||
:title="item"
|
||||
/>
|
||||
<van-cell v-for="item in list" :key="item" :title="item" />
|
||||
</van-list>
|
||||
```
|
||||
|
||||
|
||||
@ -26,11 +26,7 @@ List 组件通过`loading`和`finished`两个变量控制加载状态，当组
|
||||
finished-text="没有更多了"
|
||||
@load="onLoad"
|
||||
>
|
||||
<van-cell
|
||||
v-for="item in list"
|
||||
:key="item"
|
||||
:title="item"
|
||||
/>
|
||||
<van-cell v-for="item in list" :key="item" :title="item" />
|
||||
</van-list>
|
||||
```
|
||||
|
||||
@ -75,11 +71,7 @@ export default {
|
||||
error-text="请求失败，点击重新加载"
|
||||
@load="onLoad"
|
||||
>
|
||||
<van-cell
|
||||
v-for="item in list"
|
||||
:key="item"
|
||||
:title="item"
|
||||
/>
|
||||
<van-cell v-for="item in list" :key="item" :title="item" />
|
||||
</van-list>
|
||||
```
|
||||
|
||||
|
||||
@ -14,10 +14,7 @@ Vue.use(NoticeBar);
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<van-notice-bar
|
||||
text="Notice Content"
|
||||
left-icon="volume-o"
|
||||
/>
|
||||
<van-notice-bar text="Notice Content" left-icon="volume-o" />
|
||||
```
|
||||
|
||||
### Disable scroll
|
||||
|
||||
@ -14,10 +14,7 @@ Vue.use(NoticeBar);
|
||||
### 基础用法
|
||||
|
||||
```html
|
||||
<van-notice-bar
|
||||
text="通知内容"
|
||||
left-icon="volume-o"
|
||||
/>
|
||||
<van-notice-bar text="通知内容" left-icon="volume-o" />
|
||||
```
|
||||
|
||||
### 禁用滚动
|
||||
|
||||
@ -17,7 +17,6 @@ Vue.use(NumberKeyboard);
|
||||
<van-button @touchstart.stop="show = true">
|
||||
Show Keyboard
|
||||
</van-button>
|
||||
|
||||
<van-number-keyboard
|
||||
:show="show"
|
||||
extra-key="."
|
||||
|
||||
@ -21,7 +21,6 @@ Vue.use(NumberKeyboard);
|
||||
<van-button @touchstart.stop="show = true">
|
||||
弹出默认键盘
|
||||
</van-button>
|
||||
|
||||
<van-number-keyboard
|
||||
:show="show"
|
||||
extra-key="."
|
||||
|
||||
@ -15,7 +15,6 @@ Vue.use(Overlay);
|
||||
|
||||
```html
|
||||
<van-button type="primary" text="Show Overlay" @click="show = true" />
|
||||
|
||||
<van-overlay :show="show" @click="show = false" />
|
||||
```
|
||||
|
||||
|
||||
@ -19,7 +19,6 @@ Vue.use(Overlay);
|
||||
|
||||
```html
|
||||
<van-button type="primary" text="显示遮罩层" @click="show = true" />
|
||||
|
||||
<van-overlay :show="show" @click="show = false" />
|
||||
```
|
||||
|
||||
|
||||
@ -26,7 +26,6 @@ Vue.use(NumberKeyboard);
|
||||
:focused="showKeyboard"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
|
||||
<!-- NumberKeyboard -->
|
||||
<van-number-keyboard
|
||||
:show="showKeyboard"
|
||||
@ -44,7 +43,6 @@ export default {
|
||||
showKeyboard: true
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(key) {
|
||||
this.value = (this.value + key).slice(0, 6);
|
||||
@ -110,7 +108,6 @@ export default {
|
||||
errorInfo: ''
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(key) {
|
||||
this.value = (this.value + key).slice(0, 6);
|
||||
|
||||
@ -26,7 +26,6 @@ Vue.use(NumberKeyboard);
|
||||
:focused="showKeyboard"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
|
||||
<!-- 数字键盘 -->
|
||||
<van-number-keyboard
|
||||
:show="showKeyboard"
|
||||
@ -44,7 +43,6 @@ export default {
|
||||
showKeyboard: true
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(key) {
|
||||
this.value = (this.value + key).slice(0, 6);
|
||||
@ -91,7 +89,6 @@ export default {
|
||||
:focused="showKeyboard"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
|
||||
<!-- 数字键盘 -->
|
||||
<van-number-keyboard
|
||||
:show="showKeyboard"
|
||||
@ -110,7 +107,6 @@ export default {
|
||||
errorInfo: ''
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(key) {
|
||||
this.value = (this.value + key).slice(0, 6);
|
||||
|
||||
@ -91,7 +91,6 @@ export default {
|
||||
placeholder="Choose City"
|
||||
@click="showPicker = true"
|
||||
/>
|
||||
|
||||
<van-popup v-model="showPicker" position="bottom">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
|
||||
@ -97,7 +97,6 @@ export default {
|
||||
placeholder="选择城市"
|
||||
@click="showPicker = true"
|
||||
/>
|
||||
|
||||
<van-popup v-model="showPicker" position="bottom">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
|
||||
@ -15,7 +15,6 @@ Vue.use(Popup);
|
||||
|
||||
```html
|
||||
<van-cell is-link @click="showPopup">Show Popup</van-cell>
|
||||
|
||||
<van-popup v-model="show">Content</van-popup>
|
||||
```
|
||||
|
||||
@ -56,7 +55,6 @@ Use `position` prop to set popup display position
|
||||
position="bottom"
|
||||
:style="{ height: '20%' }"
|
||||
/>
|
||||
|
||||
<!-- Custom Icon -->
|
||||
<van-popup
|
||||
v-model="show"
|
||||
@ -65,7 +63,6 @@ Use `position` prop to set popup display position
|
||||
position="bottom"
|
||||
:style="{ height: '20%' }"
|
||||
/>
|
||||
|
||||
<!-- Icon Position -->
|
||||
<van-popup
|
||||
v-model="show"
|
||||
|
||||
@ -21,7 +21,6 @@ Vue.use(Popup);
|
||||
|
||||
```html
|
||||
<van-cell is-link @click="showPopup">展示弹出层</van-cell>
|
||||
|
||||
<van-popup v-model="show">内容</van-popup>
|
||||
```
|
||||
|
||||
@ -64,7 +63,6 @@ export default {
|
||||
position="bottom"
|
||||
:style="{ height: '20%' }"
|
||||
/>
|
||||
|
||||
<!-- 自定义图标 -->
|
||||
<van-popup
|
||||
v-model="show"
|
||||
@ -73,7 +71,6 @@ export default {
|
||||
position="bottom"
|
||||
:style="{ height: '20%' }"
|
||||
/>
|
||||
|
||||
<!-- 图标位置 -->
|
||||
<van-popup
|
||||
v-model="show"
|
||||
|
||||
@ -42,13 +42,11 @@ Use `pivot-text` to custom text，use `color` to custom bar color
|
||||
color="#f2826a"
|
||||
:percentage="25"
|
||||
/>
|
||||
|
||||
<van-progress
|
||||
pivot-text="Red"
|
||||
color="#ee0a24"
|
||||
:percentage="50"
|
||||
/>
|
||||
|
||||
<van-progress
|
||||
:percentage="75"
|
||||
pivot-text="Purple"
|
||||
|
||||
@ -45,13 +45,11 @@ Vue.use(Progress);
|
||||
color="#f2826a"
|
||||
:percentage="25"
|
||||
/>
|
||||
|
||||
<van-progress
|
||||
pivot-text="红色"
|
||||
color="#ee0a24"
|
||||
:percentage="50"
|
||||
/>
|
||||
|
||||
<van-progress
|
||||
:percentage="75"
|
||||
pivot-text="紫色"
|
||||
|
||||
@ -65,17 +65,23 @@ export default {
|
||||
### Custom button
|
||||
|
||||
```html
|
||||
<van-slider
|
||||
v-model="value"
|
||||
active-color="#ee0a24"
|
||||
>
|
||||
<div
|
||||
slot="button"
|
||||
class="custom-button"
|
||||
>
|
||||
<van-slider v-model="value" active-color="#ee0a24">
|
||||
<div slot="button" class="custom-button">
|
||||
{{ value }}
|
||||
</div>
|
||||
</van-slider>
|
||||
|
||||
<style>
|
||||
.custom-button {
|
||||
width: 26px;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
background-color: #ee0a24;
|
||||
border-radius: 100px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Vertical
|
||||
|
||||
@ -65,17 +65,23 @@ export default {
|
||||
### 自定义按钮
|
||||
|
||||
```html
|
||||
<van-slider
|
||||
v-model="value"
|
||||
active-color="#ee0a24"
|
||||
>
|
||||
<div
|
||||
slot="button"
|
||||
class="custom-button"
|
||||
>
|
||||
<van-slider v-model="value" active-color="#ee0a24">
|
||||
<div slot="button" class="custom-button">
|
||||
{{ value }}
|
||||
</div>
|
||||
</van-slider>
|
||||
|
||||
<style>
|
||||
.custom-button {
|
||||
width: 26px;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
background-color: #ee0a24;
|
||||
border-radius: 100px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 垂直方向
|
||||
|
||||
@ -64,7 +64,6 @@ export default {
|
||||
checked: true
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(checked) {
|
||||
Dialog.confirm({
|
||||
|
||||
@ -76,7 +76,6 @@ export default {
|
||||
checked: true
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(checked) {
|
||||
Dialog.confirm({
|
||||
|
||||
@ -143,18 +143,10 @@ export default {
|
||||
<router-view />
|
||||
|
||||
<van-tabbar route>
|
||||
<van-tabbar-item
|
||||
replace
|
||||
to="/home"
|
||||
icon="home-o"
|
||||
>
|
||||
<van-tabbar-item replace to="/home" icon="home-o">
|
||||
Tab
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item
|
||||
replace
|
||||
to="/search"
|
||||
icon="search"
|
||||
>
|
||||
<van-tabbar-item replace to="/search" icon="search">
|
||||
Tab
|
||||
</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
|
||||
@ -150,18 +150,10 @@ export default {
|
||||
<router-view />
|
||||
|
||||
<van-tabbar route>
|
||||
<van-tabbar-item
|
||||
replace
|
||||
to="/home"
|
||||
icon="home-o"
|
||||
>
|
||||
<van-tabbar-item replace to="/home" icon="home-o">
|
||||
标签
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item
|
||||
replace
|
||||
to="/search"
|
||||
icon="search"
|
||||
>
|
||||
<van-tabbar-item replace to="/search" icon="search">
|
||||
标签
|
||||
</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
|
||||
@ -61,11 +61,11 @@ export default {
|
||||
<van-tree-select
|
||||
height="55vw"
|
||||
:items="items"
|
||||
:main-active-index.sync="activeIndex"
|
||||
:main-active-index.sync="active"
|
||||
>
|
||||
<template slot="content">
|
||||
<van-image v-if="activeIndex === 0" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
|
||||
<van-image v-if="activeIndex === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
|
||||
<van-image v-if="active === 0" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
|
||||
<van-image v-if="active === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
|
||||
</template>
|
||||
</van-tree-select>
|
||||
```
|
||||
@ -74,7 +74,7 @@ export default {
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeIndex: 0,
|
||||
active: 0,
|
||||
items: [{ text: 'Group 1' }, { text: 'Group 2' }]
|
||||
}
|
||||
}
|
||||
|
||||
@ -67,11 +67,11 @@ export default {
|
||||
<van-tree-select
|
||||
height="55vw"
|
||||
:items="items"
|
||||
:main-active-index.sync="activeIndex"
|
||||
:main-active-index.sync="active"
|
||||
>
|
||||
<template slot="content">
|
||||
<van-image v-if="activeIndex === 0" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
|
||||
<van-image v-if="activeIndex === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
|
||||
<van-image v-if="active === 0" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
|
||||
<van-image v-if="active === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
|
||||
</template>
|
||||
</van-tree-select>
|
||||
```
|
||||
@ -80,7 +80,7 @@ export default {
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeIndex: 0,
|
||||
active: 0,
|
||||
items: [{ text: '分组 1' }, { text: '分组 2' }]
|
||||
}
|
||||
}
|
||||
|
||||
@ -89,7 +89,6 @@ export default {
|
||||
Toast('Please upload an image in jpg format');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
asyncBeforeRead(file) {
|
||||
|
||||
@ -104,7 +104,6 @@ export default {
|
||||
Toast('请上传 jpg 格式图片');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
// 返回 Promise
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user