-
+
-
-
- 
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/cell/index.vue b/packages/cell/index.vue
index aa50d3020..0f43adcef 100644
--- a/packages/cell/index.vue
+++ b/packages/cell/index.vue
@@ -27,6 +27,7 @@
{{ item.name }}，{{ item.tel }}
+ 收货地址：{{ item.address }}
+
+ :value="value"
+ @input="onInput"
+ />
+
-
@@ -70,80 +66,52 @@ export default {
value: {},
icon: String,
label: String,
- placeholder: String,
error: Boolean,
- disabled: Boolean,
- readonly: Boolean,
required: Boolean,
- maxlength: [String, Number],
border: Boolean,
- rows: [String, Number],
- cols: [String, Number],
- autosize: {
- type: Boolean,
- default: false
- },
+ autosize: Boolean,
onIconClick: {
type: Function,
default: () => {}
}
},
- data() {
- return {
- currentValue: this.value
- };
+ watch: {
+ value() {
+ if (this.autosize && this.type === 'textarea') {
+ this.$nextTick(this.adjustSize);
+ }
+ }
},
mounted() {
if (this.autosize && this.type === 'textarea') {
- const el = this.$refs.textareaElement;
+ const el = this.$refs.textarea;
el.style.height = el.scrollHeight + 'px';
el.style.overflowY = 'hidden';
}
},
- watch: {
- value(val) {
- this.currentValue = val;
- },
-
- currentValue(val) {
- if (this.autosize && this.type === 'textarea') {
- this.$nextTick(this.sizeAdjust);
- }
- this.$emit('input', val);
- }
- },
-
computed: {
- showIcon() {
- // 有icon的slot，就认为一直展示
- if (this.$slots.icon) {
- return true;
- }
-
- return this.icon && this.currentValue;
+ hasIcon() {
+ return this.$slots.icon || this.icon;
}
},
methods: {
- handleInput(event) {
- this.currentValue = event.target.value;
+ onInput(event) {
+ this.$emit('input', event.target.value);
},
- sizeAdjust() {
- const el = this.$refs.textareaElement;
+ onClickIcon() {
+ this.$emit('click-icon');
+ this.onIconClick();
+ },
+
+ adjustSize() {
+ const el = this.$refs.textarea;
el.style.height = 'auto';
el.style.height = el.scrollHeight + 'px';
- },
-
- handleInputFocus() {
- this.$emit('focus');
- },
-
- handleInputBlur() {
- this.$emit('blur');
}
}
};
diff --git a/packages/index.js b/packages/index.js
index 082f0322c..8b96fd8b8 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.7';
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/cell.css b/packages/vant-css/src/cell.css
index 2ceddb55d..8f3276228 100644
--- a/packages/vant-css/src/cell.css
+++ b/packages/vant-css/src/cell.css
@@ -25,9 +25,14 @@
.van-icon {
margin-right: 5px;
+ vertical-align: middle;
}
}
+ &__text {
+ vertical-align: middle;
+ }
+
&__label {
display: block;
font-size: 12px;
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/field.css b/packages/vant-css/src/field.css
index 6d179f155..909aaaf08 100644
--- a/packages/vant-css/src/field.css
+++ b/packages/vant-css/src/field.css
@@ -22,7 +22,7 @@
padding-left: 90px;
}
- &--hastextarea {
+ &--has-textarea {
.van-field__control {
min-height: 60px;
}
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');
+ });
+});
diff --git a/test/unit/specs/field.spec.js b/test/unit/specs/field.spec.js
index 9b38bf891..5da380573 100644
--- a/test/unit/specs/field.spec.js
+++ b/test/unit/specs/field.spec.js
@@ -38,16 +38,12 @@ describe('Field', () => {
}
});
- expect(wrapper.hasClass('van-field')).to.be.true;
- expect(wrapper.data().currentValue).to.equal('test');
-
const eventStub = sinon.stub(wrapper.vm, '$emit');
wrapper.vm.value = 'test2';
- wrapper.update();
wrapper.vm.$nextTick(() => {
- expect(wrapper.data().currentValue).to.equal('test2');
expect(eventStub.calledWith('input'));
+ expect(wrapper.find('.van-field__control')[0].element.value).to.equal('test2');
done();
});
});
@@ -70,25 +66,6 @@ describe('Field', () => {
});
});
- it('input something to field', (done) => {
- wrapper = mount(Field, {
- propsData: {
- value: ''
- }
- });
-
- const input = wrapper.find('.van-field__control')[0];
-
- input.element.value = 'test';
- input.trigger('input');
-
- wrapper.update();
- wrapper.vm.$nextTick(() => {
- expect(wrapper.data().currentValue).to.equal('test');
- done();
- });
- });
-
it('create a textarea field', () => {
wrapper = mount(Field, {
propsData: {
@@ -98,7 +75,7 @@ describe('Field', () => {
});
expect(wrapper.hasClass('van-field')).to.be.true;
- expect(wrapper.hasClass('van-field--hastextarea')).to.be.true;
+ expect(wrapper.hasClass('van-field--has-textarea')).to.be.true;
});
it('create a autosize textarea field', (done) => {
@@ -109,6 +86,10 @@ describe('Field', () => {
}
});
+ wrapper.vm.$on('input', val => {
+ wrapper.vm.value = val;
+ });
+
expect(wrapper.hasClass('van-field')).to.be.true;
expect(wrapper.hasClass('van-field--autosize')).to.be.true;
@@ -122,7 +103,7 @@ describe('Field', () => {
wrapper.update();
setTimeout(() => {
- expect(wrapper.data().currentValue).to.equal('test');
+ expect(wrapper.find('.van-field__control')[0].element.value).to.equal('test');
expect(textareaElement.style.height).to.equal((textareaElement.scrollHeight - textAreaDiff) + 'px');
done();
}, 500);
@@ -136,6 +117,7 @@ describe('Field', () => {
}
});
+ wrapper.find('.van-field__icon')[0].trigger('touchstart');
expect(wrapper.find('.van-field__icon').length).to.equal(1);
});
@@ -148,7 +130,7 @@ describe('Field', () => {
}
});
- wrapper.find('.van-field__icon')[0].trigger('click');
+ wrapper.find('.van-field__icon')[0].trigger('touchstart');
expect(fn.calledOnce).to.be.true;
});
diff --git a/yarn.lock b/yarn.lock
index b7835ddc1..239a9615c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7660,8 +7660,8 @@ yeast@0.1.2:
resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
zan-doc@^0.2.12:
- version "0.2.15"
- resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.2.15.tgz#f169ce77fce1323e257f7b5c674fc56092bf83ec"
+ version "0.2.16"
+ resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.2.16.tgz#dd458f0a807dea814b412a609679a63a20960077"
dependencies:
cheerio "0.22.0"
decamelize "^1.2.0"