From fc7ef072167e0e8598c51b2fa1203def11606281 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= Date: Wed, 1 Mar 2017 15:23:12 +0800 Subject: [PATCH] support Input support Input --- README.md | 2 +- src/components/input/input.vue | 71 ++++++++++-------- src/index.js | 3 +- test/app.vue | 1 + test/main.js | 4 + test/routers/input.vue | 133 ++++----------------------------- 6 files changed, 62 insertions(+), 152 deletions(-) diff --git a/README.md b/README.md index 2a19f01c..ba1e3a22 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ - [ ] Layout - [x] Button - [x] Icon -- [ ] Input +- [x] Input - [ ] Radio - [ ] Checkbox - [ ] Switch diff --git a/src/components/input/input.vue b/src/components/input/input.vue index 8b92a9c7..ca181987 100644 --- a/src/components/input/input.vue +++ b/src/components/input/input.vue @@ -1,9 +1,11 @@ @@ -55,8 +57,7 @@ }, value: { type: [String, Number], - default: '', -// twoWay: true + default: '' }, size: { validator (value) { @@ -97,6 +98,7 @@ }, data () { return { + currentValue: this.value, prefixCls: prefixCls, prepend: true, append: true, @@ -146,11 +148,24 @@ }, handleBlur () { this.$emit('on-blur'); - this.$dispatch('on-form-blur', this.value); + // todo 事件 +// this.$dispatch('on-form-blur', this.currentValue); }, - handleChange (event) { + handleInput (event) { + const value = event.target.value; + this.$emit('input', value); + this.setCurrentValue(value); this.$emit('on-change', event); }, + setCurrentValue (value) { + if (value === this.currentValue) return; + this.$nextTick(() => { + this.resizeTextarea(); + }); + this.currentValue = value; + // todo 事件 +// this.$dispatch('on-form-change', value); + }, resizeTextarea () { const autosize = this.autosize; if (!autosize || this.type !== 'textarea') { @@ -160,30 +175,24 @@ const minRows = autosize.minRows; const maxRows = autosize.maxRows; - this.textareaStyles = calcTextareaHeight(this.$els.textarea, minRows, maxRows); - }, - init () { - if (this.type !== 'textarea') { - this.prepend = this.$els.prepend.innerHTML !== ''; - this.append = this.$els.append.innerHTML !== ''; - } else { - this.prepend = false; - this.append = false; - } - this.slotReady = true; - this.resizeTextarea(); + this.textareaStyles = calcTextareaHeight(this.$refs.textarea, minRows, maxRows); } }, watch: { - value () { - this.$nextTick(() => { - this.resizeTextarea(); - }); - this.$dispatch('on-form-change', this.value); + value (val) { + this.setCurrentValue(val); } }, - compiled () { - this.$nextTick(() => this.init()); + mounted () { + if (this.type !== 'textarea') { + this.prepend = this.$slots.prepend !== undefined; + this.append = this.$slots.append !== undefined; + } else { + this.prepend = false; + this.append = false; + } + this.slotReady = true; + this.resizeTextarea(); } }; diff --git a/src/index.js b/src/index.js index b8947301..c0ab29d3 100644 --- a/src/index.js +++ b/src/index.js @@ -17,7 +17,7 @@ import Button from './components/button'; // import Dropdown from './components/dropdown'; // import Form from './components/form'; import Icon from './components/icon'; -// import Input from './components/input'; +import Input from './components/input'; // import InputNumber from './components/input-number'; // import LoadingBar from './components/loading-bar'; // import Menu from './components/menu'; @@ -73,6 +73,7 @@ const iview = { // Collapse, Icon, // iInput: Input, + Input, // InputNumber, // LoadingBar, // Menu, diff --git a/test/app.vue b/test/app.vue index a6732d6f..83b38a35 100644 --- a/test/app.vue +++ b/test/app.vue @@ -27,6 +27,7 @@ li + li {
  • Affix
  • Grid
  • Button
    • +
  • Input
    • diff --git a/test/main.js b/test/main.js index e42a8ddc..2c89d5ea 100644 --- a/test/main.js +++ b/test/main.js @@ -28,6 +28,10 @@ const router = new VueRouter({ { path: '/button', component: require('./routers/button.vue') + }, + { + path: '/input', + component: require('./routers/input.vue') } ] }); diff --git a/test/routers/input.vue b/test/routers/input.vue index 1d0bb215..6b8418d7 100644 --- a/test/routers/input.vue +++ b/test/routers/input.vue @@ -1,132 +1,27 @@ \ No newline at end of file +