diff --git a/docs/examples-docs/address-edit.md b/docs/examples-docs/address-edit.md new file mode 100644 index 000000000..a5786cd0d --- /dev/null +++ b/docs/examples-docs/address-edit.md @@ -0,0 +1,96 @@ + + +## AddressEdit 地址编辑 + +### 使用指南 +``` javascript +import { AddressEdit } from 'vant'; + +Vue.component(AddressEdit.name, AddressEdit); +``` + +### 代码演示 + +#### 基础用法 + +:::demo 基础用法 +```html + +``` + +```javascript +export default { + +} +``` +::: + +### API + +| 参数 | 说明 | 类型 | 默认值 | 可选值 | +|-----------|-----------|-----------|-------------|-------------| +| v-model | 当前选中地址的 id | String | - | - | +| list | 地址列表 | Array | `[]` | - | +| addButtonText | 底部按钮文字 | String | `新增收货地址` | - | + +### Event + +| 事件名 | 说明 | 参数 | +|-----------|-----------|-----------| +| add | 点击新增按钮时触发 | - | +| edit | 点击编辑按钮时触发 | item: 当前地址对象,index: 索引 | +| change | 切换选中的地址时触发 | item: 当前地址对象,index: 索引 | + +### 数据格式 +#### 地址列表字段说明 +| key | 说明 | 类型 | +|-----------|-----------|-----------| +| id | 每条地址的唯一标识 | `String | Number` | +| name | 收货人姓名 | `String` | +| tel | 收货人手机号 | `String` | +| address | 收货地址 | `String` | diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js index 619899742..1302676f1 100644 --- a/docs/src/doc.config.js +++ b/docs/src/doc.config.js @@ -214,6 +214,10 @@ module.exports = { { "groupName": "业务组件", "list": [ + { + "path": "/address-edit", + "title": "AddressEdit 地址编辑" + }, { "path": "/address-list", "title": "AddressList 地址列表" diff --git a/packages/address-edit/Detail.vue b/packages/address-edit/Detail.vue new file mode 100644 index 000000000..611409ee7 --- /dev/null +++ b/packages/address-edit/Detail.vue @@ -0,0 +1,104 @@ + + + + + 完成 + + + + + + + + + {{ express.name }} + {{ express.address }} + + + + + + + diff --git a/packages/address-edit/index.vue b/packages/address-edit/index.vue new file mode 100644 index 000000000..24c8c1bfd --- /dev/null +++ b/packages/address-edit/index.vue @@ -0,0 +1,229 @@ + + + + + + + {{ currentInfo.province || '选择省' }} + {{ currentInfo.city || '选择市' }} + {{ currentInfo.county || '选择区' }} + + + + + + + + 保存 + 删除{{ addressText }}地址 + + + + + + + + diff --git a/packages/index.js b/packages/index.js index 8b96fd8b8..83a94d62a 100644 --- a/packages/index.js +++ b/packages/index.js @@ -1,4 +1,5 @@ import Actionsheet from './actionsheet'; +import AddressEdit from './address-edit'; import AddressList from './address-list'; import Area from './area'; import Badge from './badge'; @@ -56,6 +57,7 @@ import Waterfall from './waterfall'; const version = '0.9.7'; const components = [ Actionsheet, + AddressEdit, AddressList, Area, Badge, @@ -123,6 +125,7 @@ export { install, version, Actionsheet, + AddressEdit, AddressList, Area, Badge, diff --git a/packages/vant-css/src/address-edit.css b/packages/vant-css/src/address-edit.css new file mode 100644 index 000000000..f7dce207c --- /dev/null +++ b/packages/vant-css/src/address-edit.css @@ -0,0 +1,60 @@ +@import './common/var.css'; + +.van-address-edit { + &__buttons { + padding: 20px 10px; + } + + &__area { + .van-cell__title { + width: 90px; + } + + .van-cell__value { + text-align: left; + + span { + margin-right: 20px; + } + } + } + + .van-button { + margin-bottom: 10px; + } + + &-detail { + &__finish-edit { + color: $blue; + } + + &__suggest-list { + margin-left: -15px; + + &::after { + border-top-width: 0; + } + } + + &__location { + float: left; + font-size: 18px; + color: #666; + } + + &__item-info { + margin-left: 26px; + line-height: 1.6; + } + + &__title { + font-size: 14px; + margin-bottom: 4px; + } + + &__subtitle { + font-size: 12px; + color: #666; + } + } +} diff --git a/packages/vant-css/src/index.css b/packages/vant-css/src/index.css index 7a008ee7f..cee46fcaa 100644 --- a/packages/vant-css/src/index.css +++ b/packages/vant-css/src/index.css @@ -50,6 +50,7 @@ @import './tree-select.css'; /* business components */ +@import './address-edit.css'; @import './address-list.css'; @import './coupon-list.css'; @import './goods-action.css';
{{ express.name }}
{{ express.address }}