+ :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/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/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"
-