ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-19 18:14:13 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Merge branch 'dev' into feature/sku_migration

Browse Source
This commit is contained in:
niunai
2017-09-08 16:51:14 +08:00
parent 8f4122f8ad e5daa94b65
commit 6da45f69e6
52 changed files with 477 additions and 2312 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/examples-docs/actionsheet.md
View File

@@ -31,10 +31,6 @@ export default {
name: '支付宝支付',
loading: true
},
{
name: '有赞E卡',
subname: '（剩余260.50元）'
},
{
name: '信用卡支付'
},
@@ -90,10 +86,6 @@ export default {
name: '支付宝支付',
loading: true
},
{
name: '有赞E卡',
subname: '（剩余260.50元）'
},
{
name: '信用卡支付'
},
@@ -139,10 +131,6 @@ export default {
name: '支付宝支付',
loading: true
},
{
name: '有赞E卡',
subname: '（剩余260.50元）'
},
{
name: '信用卡支付'
},

2
docs/examples-docs/card.md
View File

@@ -8,7 +8,7 @@ export default {
}
</script>
## Card 图文组件
## Card 卡片
### 使用指南
``` javascript

6
docs/examples-docs/changelog.md
View File

@@ -31,12 +31,12 @@
**非兼容更新和新特性:**
- PayOrder component add tip slot [\#105](https://github.com/youzan/vant/pull/105) ([Raistlin916](https://github.com/Raistlin916))
- SubmitBar component add tip slot [\#105](https://github.com/youzan/vant/pull/105) ([Raistlin916](https://github.com/Raistlin916))
- Checkbox: support listen to change event [\#104](https://github.com/youzan/vant/pull/104) ([chenjiahan](https://github.com/chenjiahan))
- add GoodsAction component [\#102](https://github.com/youzan/vant/pull/102) ([chenjiahan](https://github.com/chenjiahan))
- add InvalidGoods component [\#100](https://github.com/youzan/vant/pull/100) ([chenjiahan](https://github.com/chenjiahan))
- add OrderGoods component [\#99](https://github.com/youzan/vant/pull/99) ([chenjiahan](https://github.com/chenjiahan))
- add PayOrder component [\#98](https://github.com/youzan/vant/pull/98) ([chenjiahan](https://github.com/chenjiahan))
- add SubmitBar component [\#98](https://github.com/youzan/vant/pull/98) ([chenjiahan](https://github.com/chenjiahan))
**修复:**
@@ -44,7 +44,7 @@
**合并的 Pull Request (可能有不兼容改动):**
- Add deep-select component and fix a popup bug. [\#103](https://github.com/youzan/vant/pull/103) ([Tinysymphony](https://github.com/Tinysymphony))
- Add tree-select component and fix a popup bug. [\#103](https://github.com/youzan/vant/pull/103) ([Tinysymphony](https://github.com/Tinysymphony))
- Doc: update Step/Loading/Tag/Badge documents [\#101](https://github.com/youzan/vant/pull/101) ([chenjiahan](https://github.com/chenjiahan))
## [v0.8.7](https://github.com/youzan/vant/tree/v0.8.7) (2017-08-29)

31
docs/examples-docs/order-coupon.md → docs/examples-docs/coupon.md
View File

@@ -1,4 +1,4 @@
## OrderCoupon 下单页优惠券
## Coupon 优惠券选择器
<script>
import { Toast } from 'packages';
@@ -61,10 +61,10 @@ export default {
### 使用指南
``` javascript
import { OrderCoupon, OrderCouponList } from 'vant';
import { CouponCell, CouponList } from 'vant';
Vue.component(OrderCoupon.name, OrderCoupon);
Vue.component(OrderCouponList.name, OrderCouponList);
Vue.component(CouponCell.name, CouponCell);
Vue.component(CouponList.name, CouponList);
```
### 代码演示
@@ -74,25 +74,25 @@ Vue.component(OrderCouponList.name, OrderCouponList);
:::demo 基础用法
```html
<!-- 优惠券单元格 -->
<van-order-coupon
<van-coupon-cell
:coupons="coupons"
:chosen-coupon="chosenCoupon"
@click="showList = true"
></van-order-coupon>
></van-coupon-cell>
<!-- 优惠券列表 -->
<van-order-coupon-list
<van-coupon-list
v-model="showList"
:coupons="coupons"
:chosen-coupon="chosenCoupon"
:disabled-coupons="disabledCoupons"
@change="onChange"
@exchange="onExchange"
></van-order-coupon-list>
></van-coupon-list>
```
```javascript
const mockCoupon = {
const coupon = {
available: 1,
discount: 0,
denominations: 150,
@@ -109,8 +109,8 @@ export default {
data() {
return {
chosenCoupon: -1,
coupons: [mockCoupon],
disabledCoupons: [mockCoupon]
coupons: [coupon],
disabledCoupons: [coupon]
}
},
@@ -119,22 +119,23 @@ export default {
this.chosenCoupon = index;
},
onExchange(code) {
this.coupons.push(mockCoupon);
this.coupons.push(coupon);
}
}
}
```
:::
### OrderCoupon API
### CouponCell API
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| title | 单元格标题 | `String` | `优惠` | - |
| chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
| coupons | 可用优惠券列表 | `Array` | `[]` | - |
| editable | 能否切换优惠券 | `Boolean` | `true` | - |
### OrderCouponList API
### CouponList API
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
@@ -149,7 +150,7 @@ export default {
| disabledListTitle | 不可用券列表标题 | `String` | 不可用优惠 | - |
| inputPlaceholder | 输入框文字提示 | `String` | 请输入优惠码 | - |
### OrderCouponList Event
### CouponList Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|

118
docs/examples-docs/express-way.md
View File

@@ -1,118 +0,0 @@
## ExpressWay 配送方式
<script>
import { Toast } from 'packages';
export default {
data() {
return {
currentExpressType: 1,
expressList: [{
'postage': 10050,
'postage_desc': '由商家门店提供配送服务, 起送价 0.01 元',
'postage_title': '同城配送',
'express_type': 1
}, {
'postage': 0,
'postage_desc': '由商家选择合作快递为您服务',
'postage_title': '快递发货',
'express_type': 2,
'postage_warn_desc': '3天后发货'
}]
};
},
methods: {
onChange(item, index) {
Toast('配送方式更换为:' + item.postage_title);
}
}
}
</script>
### 使用指南
``` javascript
import { ExpressWay } from 'vant';
Vue.component(ExpressWay.name, ExpressWay);
```
### 代码演示
#### 基础用法
:::demo 基础用法
```html
<van-cell-group>
<van-express-way
v-model="currentExpressType"
:express-list="expressList"
@change="onChange"
></van-express-way>
</van-cell-group>
```
```javascript
export default {
data() {
return {
currentExpressType: 1,
expressList: [{
'postage': 10050,
'postage_desc': '由商家门店提供配送服务, 起送价 0.01 元',
'postage_title': '同城配送',
'express_type': 1
}]
};
},
methods: {
onChange(item) {
Toast(`配送方式更换为:${item.postage_title}`);
}
}
}
```
:::
#### 不可修改配送方式
:::demo 不可修改配送方式
```html
<van-cell-group>
<van-express-way
:value="1"
:express-list="expressList"
:editable="false"
@change="onChange"
></van-express-way>
</van-cell-group>
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| v-model | 当前选择的配送类型 | `Number` | | 是 |
| expressList | 配送方式列表数据 | `Array` | | 是 |
| cellTitle | Cell 标题 | `String` | `配送方式` | 否 |
| actionsheetTitle | Actionsheet 标题 | `String` | `配送方式` | 否 |
| editable | 能否修改配送方式 | `Boolean` | `true` | 否 |
### 数据格式
#### expressList中的配送方式字段说明
| key | 说明 | 类型 |
|-----------|-----------|-----------|
| postage | 运费，以分为单位 | Number |
| postage_title | 配送方式 | String |
| postage_desc | 描述信息 | String |
| express_type | 配送类型 | Number |
| postage_warn_desc | 提示信息 | String |
### Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| change | 修改配送方式时触发 | item: 对应的数据, index：对应的索引 |

2
docs/examples-docs/goods-action.md
View File

@@ -21,7 +21,7 @@ export default {
}
</style>
## GoodsAction 商品操作
## GoodsAction 商品页行动点
### 使用指南
``` javascript

81
docs/examples-docs/invalid-goods.md
View File

@@ -1,81 +0,0 @@
## InvalidGoods 不可用商品列表
<script>
const item = {
sku: [{ v: '商品SKU1' }, { v: '商品SKU2' }],
num: 2,
sku_id: 123,
title: "商品名称",
price: 12200,
unavailable_desc: '超出配送区域',
img_url: 'https://img.yzcdn.cn/upload_files/2017/06/29/FnPSAKkEeh4FnDA09oIbmnlzWQrw.png',
};
export default {
data() {
return {
goods: [item, item, item]
}
}
}
</script>
### 使用指南
``` javascript
import { InvalidGoods } from 'vant';
Vue.component(InvalidGoods.name, InvalidGoods);
```
### 代码演示
#### 基础用法
:::demo 基础用法
```html
<van-invalid-goods :goods="goods" />
```
```javascript
const item = {
num: 2,
sku_id: 123,
price: 12200,
title: "商品名称",
img_url: 'https://img.yzcdn.cn/...',
unavailable_desc: '超出配送区域',
sku: [
{ v: '商品SKU1' },
{ v: '商品SKU2' }
]
};
export default {
data() {
return {
goods: [item, item, item]
}
}
}
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| goods | 商品数据 | `Array` | | 是 |
| title | 标题 | `String` | `以下商品无法一起购买，点击查看原因` | 否 |
| actionsheetTitle | 弹出层标题 | `String` | `以下商品无法一起下单` | 否 |
### 数据格式
#### data中的商品字段说明
| key | 说明 | 类型 |
|-----------|-----------|-----------|
| num | 商品数量 | `Number` |
| sku_id | 商品 id | `Number` |
| price | 商品价格，以分为单位 | `Number` |
| title | 商品标题 | `String` |
| img_url | 商品图片 url | `String` |
| unavailable_desc | 不可用原因 | `String` |
| sku | 商品 sku | `Array` |

52
docs/examples-docs/nav-bar.md Normal file
View File

@@ -0,0 +1,52 @@
## NavBar 导航栏
### 使用指南
``` javascript
import { NavBar } from 'vant';
Vue.component(NavBar.name, NavBar);
```
### 代码演示
#### 基础用法
:::demo 基础用法
```html
<van-nav-bar
title="标题"
left-text="返回"
right-text="按钮"
left-arrow
/>
```
:::
#### 高级用法
通过 slot 定制内容
:::demo 高级用法
```html
<van-nav-bar title="标题" left-text="返回" left-arrow>
<van-icon name="search" slot="right" />
</van-nav-bar>
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| title | 标题 | `String` | `''` | - |
| left-text | 左侧文案 | `String` | `''` | - |
| right-text | 右侧文案 | `String` | `''` | - |
| left-arrow | 是否显示左侧箭头 | `Boolean` | `false` | - |
| fixed | 是否固定在顶部 | `Boolean` | `false` | - |
### Slot
| name | 描述 |
|-----------|-----------|
| title | 自定义标题 |
| left | 自定义左侧区域内容 |
| right | 自定义右侧区域内容 |

229
docs/examples-docs/order-goods.md
View File

@@ -1,229 +0,0 @@
## OrderGoods 下单页商品列表
<script>
const item1 = {
img_url: '//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg',
pay_price: 1050,
title: '商品 A',
num: '1'
};
const item2 = {
points_price: 200,
pay_price: 50,
img_url: '//img.yzcdn.cn/upload_files/2017/07/02/e89d56cd92ad8ce3b9d8e1babc3758b6.jpg',
title: '商品 B',
num: '15',
sku: [{ v: '商品SKU1' }, { v: '商品SKU2' }]
}
const item3 = {
pay_price: 50,
img_url: '//img.yzcdn.cn/upload_files/2017/07/02/e89d56cd92ad8ce3b9d8e1babc3758b6.jpg',
title: '商品 C',
num: '15',
is_presale: true,
delivery_time: '三天后发货',
show_delivery_time: true,
is_presale: true,
is_present: true,
message: {
'留言1': '留言1内容',
'留言2': 'https://img.yzcdn.cn/upload_files/2017/07/02/e89d56cd92ad8ce3b9d8e1babc3758b6.jpg'
}
};
export default {
data() {
return {
itemList1: [item1],
itemList2: [item2],
itemList3: [item3],
itemListMulti: [item1, item2, item3],
emptyItemList: [],
message1: '',
message2: '',
message3: '',
message4: ''
}
}
}
</script>
### 使用指南
``` javascript
import { OrderGoods } from 'vant';
Vue.component(OrderGoods.name, OrderGoods);
```
### 代码演示
#### 基础用法
:::demo 基础用法
```html
<van-order-goods
v-model="message1"
shop-name="起码运动馆"
:price="1050"
:item-list="itemList1"
/>
```
```javascript
export default {
data() {
return {
message1: '',
itemList1: [{
img_url: '//img.yzcdn.cn/...',
pay_price: 1050,
title: '商品 A',
num: '1'
}]
}
}
}
```
:::
#### 积分商品
:::demo 积分商品
```html
<van-order-goods
v-model="message2"
shop-name="起码运动馆"
:item-list="itemList2"
:price="50"
:points="200"
/>
```
```javascript
export default {
data() {
return {
message2: '',
itemList2: [{
points_price: 200,
pay_price: 50,
img_url: '//img.yzcdn.cn/...',
title: '商品 B',
num: '15',
sku: [
{ v: '商品SKU1' },
{ v: '商品SKU2' }
]
}]
}
}
}
```
:::
#### 预售商品
:::demo 预售商品
```html
<van-order-goods
v-model="message3"
shop-name="起码运动馆"
:price="1050"
:item-list="itemList3"
/>
```
```javascript
export default {
data() {
return {
message3: '',
itemList3: [{
pay_price: 50,
img_url: '//img.yzcdn.cn/...',
title: '商品 C',
num: '15',
delivery_time: '三天后发货',
show_delivery_time: true,
is_presale: true,
is_present: true
}]
}
}
}
```
:::
#### 商品为空
:::demo 商品为空
```html
<van-order-goods shop-name="起码运动馆" :item-list="[]" />
```
:::
#### 多个商品
:::demo 多个商品
```html
<van-order-goods
v-model="message4"
shop-name="起码运动馆"
:item-list="itemListMulti"
:price="1050"
:message-editable="false"
/>
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|
| shop-name | 店铺名称 | `String` | |
| shop-link | 店铺链接 | `String` | |
| header-icon | 店铺名称左侧的图标类型 | `String` | `shop` |
| header-badge | 店铺名称右侧的徽章链接 | `String` | |
| item-list | 商品列表 | `Array` | `[]` |
| empty-icon | 商品列表为空时的图标 | `String` | |
| empty-message | 商品列表为空时的提示文案 | `String` | `当前没有可购买的商品，请重新选择` |
| empty-button-text | 商品列表为空时的按钮文案 | `String` | `返回重新选择` |
| v-model | 买家留言 | `String` | `''` |
| show-total-price | 是否显示价格栏 | `Boolean` | `true` |
| show-message | 是否显示留言栏 | `Boolean` | `true` |
| message-editable | 留言是否可以编辑 | `Boolean` | `true` |
| price | 合计金额（单位分） | `Number` | |
| points | 合计积分 | `Number` | |
### 数据格式
#### itemList 中的配送方式字段说明
| key | 说明 | 类型 |
|-----------|-----------|-----------|
| title | 商品名称 | `String` |
| img_url | 图片地址 | `String` |
| delivery_time | 发货时间 | `String` |
| num | 商品数量 | `Number` |
| points_price | 积分价格 | `Number` |
| pay_price（单位分） | 金额 | `Number` |
| sku | 商品 sku | `Array` |
| message | 商品留言 | `Array` |
| is_presale | 是否为预售 | `Boolean` |
| is_present | 是否为赠品 | `Boolean` |
| is_period_buy | 是否为周期购 | `Boolean` |
| show_delivery_time | 是否显示发货时间 | `Boolean` |
### Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| clickEmptyButton | 点击商品为空时的按钮时触发 | - |
### Slot
| name | 描述 |
|-----------|-----------|
| 默认 | 在商品列表和留言之间插入内容 |
| top | 在标题和商品列表之间插入内容 |
| bottom | 在合计价格下方插入内容 |

12
docs/examples-docs/popup.md
View File

@@ -73,7 +73,7 @@ export default {
};
</script>
## Popup 弹出菜单
## Popup 弹出层
### 使用指南
``` javascript
@@ -107,11 +107,11 @@ export default {
```
:::
#### 从不同位置弹出菜单
#### 从不同位置弹出层
可以设置`position`属性，`popup`即能从不同位置弹出，`position`的可选值有`top`，`bottom`，`right`，`left`。
:::demo 从不同位置弹出菜单
:::demo 从不同位置弹出层
```html
<van-button @click="popupShow2 = true;">从下方弹出popup</van-button>
<van-popup v-model="popupShow2" position="bottom" class="van-popup-2">
@@ -166,7 +166,7 @@ export default {
| v-model | 当前组件是否显示 | `Boolean` | `false` | - |
| overlay | 是否显示背景遮罩层 | `Boolean` | `true` | - |
| lockOnScroll | 背景是否跟随滚动 | `Boolean` | `false` | - |
| position | 弹出菜单位置 | `String` | - | `top`, `bottom`, `right`, `left` |
| closeOnClickOverlay | 点击遮罩层是否关闭弹出菜单 | `Boolean` | `true` | - |
| transition | 弹出菜单的`transition` | `String` | `popup-slide` | |
| position | 弹出层位置 | `String` | - | `top`, `bottom`, `right`, `left` |
| closeOnClickOverlay | 点击遮罩层是否关闭弹出层 | `Boolean` | `true` | - |
| transition | 弹出层的`transition` | `String` | `popup-slide` | |
| preventScroll | 是否防止滚动穿透 | `Boolean` | `false` | - |

35
docs/examples-docs/quantity.md → docs/examples-docs/stepper.md
View File

@@ -1,10 +1,10 @@
<style>
.demo-quantity {
.van-quantity {
.demo-stepper {
.van-stepper {
margin-left: 15px;
}
.curr-quantity {
.curr-stepper {
margin: 15px;
}
}
@@ -14,20 +14,20 @@
export default {
data() {
return {
quantity1: 1,
quantity2: null,
stepper1: 1,
stepper2: null,
};
}
};
</script>
## Quantity 数量选择
## Stepper 步进器
### 使用指南
``` javascript
import { Quantity } from 'vant';
import { Stepper } from 'vant';
Vue.component(Quantity.name, Quantity);
Vue.component(Stepper.name, Stepper);
```
### 代码演示
@@ -36,29 +36,28 @@ Vue.component(Quantity.name, Quantity);
:::demo 基础用法
```html
<van-quantity v-model="quantity1"></van-quantity>
<p class="curr-quantity">当前值：{{ quantity1 }}</p>
<van-stepper v-model="stepper1"></van-stepper>
<p class="curr-stepper">当前值：{{ stepper1 }}</p>
```
:::
#### 禁用Quantity
#### 禁用状态
通过设置`disabled`属性来禁用 stepper
设置`disabled`属性，此时`quantity`不可改变。
:::demo 禁用Quantity
:::demo 禁用状态
```html
<van-quantity v-model="quantity1" disabled></van-quantity>
<van-stepper v-model="stepper1" disabled></van-stepper>
```
:::
#### 高级用法
默认是每次加减为1，可以对组件设置`step`、`min`、`max`、`defaultValue`属性。
默认是每次加减为1，可以对组件设置`step`、`min`、`max`、`defaultValue`属性
:::demo 高级用法
```html
<van-quantity v-model="quantity2" min="5" max="40" step="2" default-value="9"></van-quantity>
<p class="curr-quantity">当前值：{{ quantity2 || 9 }}</p>
<van-stepper v-model="stepper2" min="5" max="40" step="2" default-value="9"></van-stepper>
<p class="curr-stepper">当前值：{{ stepper2 || 9 }}</p>
```
:::

20
docs/examples-docs/pay-order.md → docs/examples-docs/submit-bar.md
View File

@@ -1,4 +1,4 @@
## PayOrder 提交订单栏
## SubmitBar 提交订单栏
<script>
import { Toast } from 'packages';
@@ -16,8 +16,8 @@ export default {
</script>
<style>
.demo-pay-order {
.van-pay-order {
.demo-submit-bar {
.van-submit-bar {
position: relative;
}
.van-edit-address {
@@ -28,9 +28,9 @@ export default {
### 使用指南
``` javascript
import { PayOrder } from 'vant';
import { SubmitBar } from 'vant';
Vue.component(PayOrder.name, PayOrder);
Vue.component(SubmitBar.name, SubmitBar);
```
### 代码演示
@@ -39,7 +39,7 @@ Vue.component(PayOrder.name, PayOrder);
:::demo 基础用法
```html
<van-pay-order
<van-submit-bar
:price="3050"
button-text="提交订单"
@submit="onClickButton"
@@ -52,7 +52,7 @@ Vue.component(PayOrder.name, PayOrder);
:::demo 禁用状态
```html
<van-pay-order
<van-submit-bar
disabled
:price="3050"
button-text="提交订单"
@@ -66,7 +66,7 @@ Vue.component(PayOrder.name, PayOrder);
加载状态下不会触发`submit`事件
:::demo 加载状态
```html
<van-pay-order
<van-submit-bar
loading
:price="3050"
button-text="提交订单"
@@ -79,7 +79,7 @@ Vue.component(PayOrder.name, PayOrder);
提示文案中的额外操作和说明
:::demo 提示文案中添加操作
```html
<van-pay-order
<van-submit-bar
:price="3050"
button-text="提交订单"
@submit="onClickButton"
@@ -87,7 +87,7 @@ Vue.component(PayOrder.name, PayOrder);
<span slot="tip">
您的收货地址不支持同城送, <span class="van-edit-address" @click="onClickEditAddress">修改地址 ></span>
</span>
</van-pay-order>
</van-submit-bar>
```
:::

10
docs/examples-docs/deep-select.md → docs/examples-docs/tree-select.md
View File

@@ -74,13 +74,13 @@ export default {
}
</script>
## DeepSelect 分类选择组件
## TreeSelect 分类选择
### 使用指南
``` javascript
import { DeepSelect } from 'vant';
import { TreeSelect } from 'vant';
Vue.component(DeepSelect.name, DeepSelect);
Vue.component(TreeSelect.name, TreeSelect);
```
### 代码演示
@@ -89,13 +89,13 @@ Vue.component(DeepSelect.name, DeepSelect);
:::demo 基础用法
```html
<van-deep-select
<van-tree-select
:items="items"
:main-active-index="mainActiveIndex"
:active-id="activeId"
@navclick="onNavClick"
@itemclick="onItemClick"
></van-deep-select>
></van-tree-select>
```
```javascript