support Input

support Input

README.md

@@ -20,7 +20,7 @@
 - [ ] Layout
 - [x] Button
 - [x] Icon
-- [ ] Input
+- [x] Input
 - [ ] Radio
 - [ ] Checkbox
 - [ ] Switch

src/components/input/input.vue

@@ -1,9 +1,11 @@
 <template>
     <div :class="wrapClasses">
         <template v-if="type !== 'textarea'">
-            <div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady" v-el:prepend><slot name="prepend"></slot></div>
+            <div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady" ref="prepend"><slot name="prepend"></slot></div>
             <i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon']" v-if="icon" @click="handleIconClick"></i>
-            <i class="ivu-icon ivu-icon-load-c ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-else transition="fade"></i>
+            <transition name="fade">
+                <i class="ivu-icon ivu-icon-load-c ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
+            </transition>
             <input
                 :type="type"
                 :class="inputClasses"
@@ -12,17 +14,17 @@
                 :maxlength="maxlength"
                 :readonly="readonly"
                 :name="name"
-                v-model="value"
+                :value="currentValue"
                 :number="number"
                 @keyup.enter="handleEnter"
                 @focus="handleFocus"
                 @blur="handleBlur"
-                @change="handleChange">
+                @input="handleInput">
-            <div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady" v-el:append><slot name="append"></slot></div>
+            <div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady" ref="append"><slot name="append"></slot></div>
         </template>
         <textarea
             v-else
-            v-el:textarea
+            ref="textarea"
             :class="textareaClasses"
             :style="textareaStyles"
             :placeholder="placeholder"
@@ -31,11 +33,11 @@
             :maxlength="maxlength"
             :readonly="readonly"
             :name="name"
-            v-model="value"
+            :value="value"
             @keyup.enter="handleEnter"
             @focus="handleFocus"
             @blur="handleBlur"
-            @change="handleChange">
+            @input="handleInput">
         </textarea>
     </div>
 </template>
@@ -55,8 +57,7 @@
             },
             value: {
                 type: [String, Number],
-                default: '',
+                default: ''
-//                twoWay: true
             },
             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);
+                this.textareaStyles = calcTextareaHeight(this.$refs.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();
             }
         },
         watch: {
-            value () {
+            value (val) {
-                this.$nextTick(() => {
+                this.setCurrentValue(val);
-                    this.resizeTextarea();
-                });
-                this.$dispatch('on-form-change', this.value);
             }
         },
-        compiled () {
+        mounted () {
-            this.$nextTick(() => this.init());
+            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();
         }
     };
 </script>

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,

test/app.vue

@@ -27,6 +27,7 @@ li + li {
                 <li><router-link to="/affix">Affix</router-link></li>
                 <li><router-link to="/grid">Grid</router-link></li>
                 <li><router-link to="/button">Button</router-link></li>
+                <li><router-link to="/input">Input</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>

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')
         }
     ]
 });

test/routers/input.vue

@@ -1,131 +1,26 @@
 <template>
-    <Input-number :max="10" :min="1" :value="1"></Input-number>
+    <div>
-    <br><br>
+        <Input v-model="value" placeholder="请输入..." style="width: 300px" icon="ios-clock-outline"></Input>
-    <i-input type="textarea" :autosize="true" placeholder="请输入..."></i-input>
+        <input type="text" v-model="value">
-    <i-input type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></i-input>
+        {{ value }}
-    <i-input name="a" icon="ios-clock-outline" @on-focus="focus" @on-blur="blur" readonly style="width:200px;" :value.sync="v" @on-enter="enter" @on-click="iconclick" size="large" placeholder="请输入"></i-input>
+        <!--<Input v-model="value">-->
-    <i-input icon="ios-clock-outline" style="width:200px;" :value.sync="v" @on-enter="enter" placeholder="请输入"></i-input>
+            <!--<span slot="prepend">http://</span>-->
-    <i-input name="b" icon="ios-clock-outline" style="width:200px;" :value.sync="v" @on-enter="enter" size="small" placeholder="请输入"></i-input>
+            <!--<span slot="append">.com</span>-->
-    <br>
+        <!--</Input>-->
-    <br>
-    <i-input style="width:200px;" :value.sync="v" @on-enter="enter" size="large" placeholder="请输入"></i-input>
-    <i-input style="width:200px;" :value.sync="v" @on-enter="enter" placeholder="请输入"></i-input>
-    <i-input style="width:200px;" :value.sync="v" @on-enter="enter" @on-change="change" size="small" placeholder="请输入"></i-input>
-    {{ v }}
-    <br>
-    <br>
-    <i-input readonly placeholder="this is something" style="width:200px;" :value.sync="t" type="textarea" :autosize="autosize"></i-input>
-    {{ t }}
-    <br>
-    <br>
-    <div style="width: 400px">
-        <i-input :value.sync="v" type="password">
-            <span slot="prepend">http://</span>
-            <span slot="append">
-                <i-button icon="ios-search"></i-button>
-            </span>
-        </i-input>
         <br>
-        <i-input :value.sync="v">
+        <Input type="textarea" v-model="value" placeholder="请输入..."></Input>
-            <span slot="prepend">http://</span>
+        <Input type="textarea" v-model="value" :rows="4" placeholder="请输入..."></Input>
-            <span slot="append"><Icon type="ios-search"></Icon></span>
-        </i-input>
         <br>
-        <i-input :value.sync="v" size="small">
-            <span slot="prepend">http://</span>
-            <span slot="append"><Icon type="ios-search"></Icon></span>
-        </i-input>
-
         <br>
-        <i-input :value.sync="v" size="large">
+        <Input type="textarea" v-model="value" :autosize="true" placeholder="请输入..."></Input>
-            <i-select :model.sync="select1" slot="prepend" style="width: 80px">
+        <Input type="textarea" v-model="value" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
-                <i-option value="http">http://</i-option>
-                <i-option value="https">https://</i-option>
-            </i-select>
-            <i-select :model.sync="select2" slot="append" style="width: 70px">
-                <i-option value="com">.com</i-option>
-                <i-option value="cn">.cn</i-option>
-                <i-option value="net">.net</i-option>
-                <i-option value="io">.io</i-option>
-            </i-select>
-        </i-input>
-        <br>
-        <i-input :value.sync="v">
-            <i-select :model.sync="select1" slot="prepend" style="width: 80px">
-                <i-option value="http">http://</i-option>
-                <i-option value="https">https://</i-option>
-            </i-select>
-            <i-select :model.sync="select2" slot="append" style="width: 70px">
-                <i-option value="com">.com</i-option>
-                <i-option value="cn">.cn</i-option>
-                <i-option value="net">.net</i-option>
-                <i-option value="io">.io</i-option>
-            </i-select>
-        </i-input>
-        <br>
-        <i-input :value.sync="v" size="small">
-            <i-select :model.sync="select1" slot="prepend" style="width: 80px">
-                <i-option value="http">http://</i-option>
-                <i-option value="https">https://</i-option>
-            </i-select>
-            <i-select :model.sync="select2" slot="append" style="width: 70px">
-                <i-option value="com">.com</i-option>
-                <i-option value="cn">.cn</i-option>
-                <i-option value="net">.net</i-option>
-                <i-option value="io">.io</i-option>
-            </i-select>
-        </i-input>
-        <Input-number :value="2" size="small"></Input-number>
-        <Input-number :value="2"></Input-number>
-        <Input-number :value="2" size="large"></Input-number>
-        <i-input type="password"></i-input>
     </div>
 </template>
 <script>
-    import { iInput, Icon, iButton, iSelect, iOption, InputNumber } from 'iview';
-
     export default {
-        components: {
-            iInput,
-            Icon,
-            iButton,
-            iSelect,
-            iOption,
-            InputNumber
-        },
-        props: {
-
-        },
         data () {
             return {
-                v: 'hello',
+                value: ''
-                t: '',
-                autosize: {
-                    minRows: 2,
-                    maxRows: 5
-                },
-                select1: 'http',
-                select2: 'com'
-            }
-        },
-        computed: {
-
-        },
-        methods: {
-            enter () {
-                console.log(123)
-            },
-            iconclick () {
-                console.log('iconclicked')
-            },
-            change (val) {
-                console.log(val)
-            },
-            focus () {
-                this.$Message.info('focus');
-            },
-            blur () {
-                this.$Message.info('blur');
             }
         }
     }