diff --git a/docs/examples-docs/address-list.md b/docs/examples-docs/address-list.md new file mode 100644 index 000000000..419621805 --- /dev/null +++ b/docs/examples-docs/address-list.md @@ -0,0 +1,122 @@ + + +## AddressList 地址列表 + +### 使用指南 +``` javascript +import { AddressList } from 'vant'; + +Vue.component(AddressList.name, AddressList); +``` + +### 代码演示 + +#### 基础用法 + +:::demo 基础用法 +```html + +``` + +```javascript +export default { + data() { + return { + chosenAddressId: '1', + list: [ + { + id: '1', + name: '张三', + tel: '13000000000', + address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室' + }, + { + id: '2', + name: '李四', + tel: '1310000000', + address: '浙江省杭州市拱墅区莫干山路 50 号' + } + ] + } + }, + + methods: { + onAdd() { + Toast('新增收货地址'); + }, + onEdit(item, index) { + Toast('编辑收货地址:' + index); + } + } +} +``` +::: + +### 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/examples-docs/notice-bar.md b/docs/examples-docs/notice-bar.md index 7da1faa12..61933d463 100644 --- a/docs/examples-docs/notice-bar.md +++ b/docs/examples-docs/notice-bar.md @@ -21,7 +21,7 @@ Vue.component(NoticeBar.name, NoticeBar); :::demo 基础用法 ```html - + ``` ::: diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js index 7ab9edcd7..619899742 100644 --- a/docs/src/doc.config.js +++ b/docs/src/doc.config.js @@ -214,6 +214,10 @@ module.exports = { { "groupName": "业务组件", "list": [ + { + "path": "/address-list", + "title": "AddressList 地址列表" + }, { "path": "/area", "title": "Area 省市区选择" diff --git a/docs/src/examples.js b/docs/src/examples.js index 674f838a2..50a74e6e4 100644 --- a/docs/src/examples.js +++ b/docs/src/examples.js @@ -36,6 +36,10 @@ router.afterEach(() => { window.vueRouter = router; +if (process.env.NODE_ENV !== 'production') { + Vue.config.productionTip = false; +} + new Vue({ // eslint-disable-line render: h => h(App), router diff --git a/docs/src/index.js b/docs/src/index.js index 6c6b36dd6..2133b5ed0 100644 --- a/docs/src/index.js +++ b/docs/src/index.js @@ -35,6 +35,10 @@ router.afterEach(() => { window.vueRouter = router; +if (process.env.NODE_ENV !== 'production') { + Vue.config.productionTip = false; +} + new Vue({ // eslint-disable-line render: h => h(App), router diff --git a/packages/address-list/index.vue b/packages/address-list/index.vue new file mode 100644 index 000000000..9088f2489 --- /dev/null +++ b/packages/address-list/index.vue @@ -0,0 +1,48 @@ + + + diff --git a/packages/index.js b/packages/index.js index 05c34ce75..de34c9216 100644 --- a/packages/index.js +++ b/packages/index.js @@ -1,4 +1,5 @@ import Actionsheet from './actionsheet'; +import AddressList from './address-list'; import Area from './area'; import Badge from './badge'; import BadgeGroup from './badge-group'; @@ -55,6 +56,7 @@ import Waterfall from './waterfall'; const version = '0.9.6'; const components = [ Actionsheet, + AddressList, Area, Badge, BadgeGroup, @@ -121,6 +123,7 @@ export { install, version, Actionsheet, + AddressList, Area, Badge, BadgeGroup, diff --git a/packages/notice-bar/index.vue b/packages/notice-bar/index.vue index 4060dccc6..3513e55ba 100644 --- a/packages/notice-bar/index.vue +++ b/packages/notice-bar/index.vue @@ -57,10 +57,10 @@ export default { }, contentStyle() { return { - left: -this.offsetWidth + 'px', + transform: `translate3d(${-this.offsetWidth}px, 0, 0)`, transitionDelay: this.delay + 's', transitionDuration: this.duration + 's', - transitionProperty: this.diableTransition ? 'none' : 'left' + transitionProperty: this.diableTransition ? 'none' : 'all' }; } }, diff --git a/packages/vant-css/src/address-list.css b/packages/vant-css/src/address-list.css new file mode 100644 index 000000000..8354ed70d --- /dev/null +++ b/packages/vant-css/src/address-list.css @@ -0,0 +1,69 @@ +@import './common/var.css'; + +.van-address-list { + height: 100%; + + .van-cell__value { + color: $text-color; + padding-right: 34px; + position: relative; + } + + .van-radio__label { + margin-left: 32px; + } + + .van-radio__input { + top: 50%; + left: 0; + position: absolute; + transform: translate(0, -50%); + } + + .van-icon-checked { + color: $blue; + } + + &__group { + height: 100%; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; + } + + &__name { + font-size: 14px; + line-height: 1.5; + } + + &__address { + font-size: 12px; + line-height: 1.5; + color: $gray-darker; + } + + &__edit { + position: absolute; + top: 50%; + right: 4px; + font-size: 24px; + color: $gray-dark; + transform: translate(0, -50%); + } + + &__add { + position: fixed; + left: 0; + bottom: 0; + z-index: 9999; + padding-left: 15px; + + .van-cell__text { + font-size: 16px; + } + + .van-icon-add { + color: $blue; + font-size: 20px; + } + } +} \ No newline at end of file diff --git a/packages/vant-css/src/base.css b/packages/vant-css/src/base.css index 5609574e8..940055af6 100644 --- a/packages/vant-css/src/base.css +++ b/packages/vant-css/src/base.css @@ -1,5 +1,5 @@ /** - * 基本样式入口 + * Entry of basic styles */ @import "./common/var.css"; diff --git a/packages/vant-css/src/checkbox.css b/packages/vant-css/src/checkbox.css index bf70b993a..3272dcfd2 100644 --- a/packages/vant-css/src/checkbox.css +++ b/packages/vant-css/src/checkbox.css @@ -8,6 +8,7 @@ $van-checkbox-size: 18px; .van-icon-success { color: #fff; display: block; + line-height: 1; font-size: 14px; text-align: center; pointer-events: none; diff --git a/packages/vant-css/src/index.css b/packages/vant-css/src/index.css index dc819043f..7a008ee7f 100644 --- a/packages/vant-css/src/index.css +++ b/packages/vant-css/src/index.css @@ -1,5 +1,5 @@ /** - * style entry + * Entry of all component's style */ /* base */ @@ -50,6 +50,7 @@ @import './tree-select.css'; /* business components */ +@import './address-list.css'; @import './coupon-list.css'; @import './goods-action.css'; @import './submit-bar.css'; diff --git a/packages/vant-css/src/notice-bar.css b/packages/vant-css/src/notice-bar.css index 97710ca64..8c9d62a70 100644 --- a/packages/vant-css/src/notice-bar.css +++ b/packages/vant-css/src/notice-bar.css @@ -30,7 +30,6 @@ &__content { position: absolute; white-space: nowrap; - transition-property: left; transition-timing-function: linear; } } diff --git a/test/unit/specs/address-list.spec.js b/test/unit/specs/address-list.spec.js new file mode 100644 index 000000000..8e2caa176 --- /dev/null +++ b/test/unit/specs/address-list.spec.js @@ -0,0 +1,80 @@ +import { mount } from 'avoriaz'; +import AddressList from 'packages/address-list'; + +const list = [ + { + id: '1', + name: '张三', + tel: '13000000000', + address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室' + }, + { + id: '2', + name: '李四', + tel: '1310000000', + address: '浙江省杭州市拱墅区莫干山路 50 号' + }, + { + id: '3', + name: '王五', + tel: '1320000000', + address: '浙江省杭州市滨江区江南大道 15 号' + } +]; + +describe('AddressList', () => { + let wrapper; + afterEach(() => { + wrapper && wrapper.destroy(); + }); + + it('create a AddressList', () => { + wrapper = mount(AddressList); + expect(wrapper.hasClass('van-address-list')).to.be.true; + }); + + it('create a AddressList with three items', () => { + wrapper = mount(AddressList, { + propsData: { + value: '1', + list + } + }); + expect(wrapper.find('.van-address-list__group .van-cell').length).to.equal(3); + expect(wrapper.find('.van-icon-checked').length).to.equal(1); + }); + + it('listen to add & edit event', (done) => { + wrapper = mount(AddressList, { + propsData: { + list + } + }); + + const add = sinon.spy(); + wrapper.vm.$on('add', add); + wrapper.find('.van-address-list__add')[0].trigger('click'); + expect(add.calledOnce).to.be.true; + + wrapper.vm.$on('edit', (item, index) => { + expect(index).to.equal(0); + done(); + }); + wrapper.find('.van-address-list__edit')[0].trigger('click'); + }); + + it('listen to change event', (done) => { + wrapper = mount(AddressList, { + propsData: { + value: '1', + list + } + }); + + wrapper.vm.$on('change', (item, index) => { + expect(item.id).to.equal('3'); + done(); + }); + wrapper.find('.van-radio')[2].trigger('click'); + }); +});