support Input

2017-03-01 15:23:12 +08:00 · 2017-03-01 15:23:12 +08:00 · fc7ef07216
commit fc7ef07216
parent d47ea998d6
6 changed files with 62 additions and 152 deletions
--- a/README.md
+++ b/README.md
@ -20,7 +20,7 @@
 - [ ] Layout
 - [x] Button
 - [x] Icon
- [ ] Input
+- [x] Input
 - [ ] Radio
 - [ ] Checkbox
 - [ ] Switch
--- a/src/components/input/input.vue
+++ b/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">
-            <div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady" v-el:append><slot name="append"></slot></div>
+                @input="handleInput">
+            <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: '',
-//                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();
        }
    };
 </script>
--- 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,
--- a/test/app.vue
+++ b/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>
--- 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')
        }
    ]
 });
--- a/test/routers/input.vue
+++ b/test/routers/input.vue
@ -1,132 +1,27 @@
 <template>
-    <Input-number :max="10" :min="1" :value="1"></Input-number>
-    <br><br>
-    <i-input type="textarea" :autosize="true" placeholder="请输入..."></i-input>
-    <i-input type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></i-input>
-    <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>
-    <i-input icon="ios-clock-outline" style="width:200px;" :value.sync="v" @on-enter="enter" placeholder="请输入"></i-input>
-    <i-input name="b" icon="ios-clock-outline" style="width:200px;" :value.sync="v" @on-enter="enter" size="small" placeholder="请输入"></i-input>
-    <br>
-    <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>
+    <div>
+        <Input v-model="value" placeholder="请输入..." style="width: 300px" icon="ios-clock-outline"></Input>
+        <input type="text" v-model="value">
+        {{ value }}
+        <!--<Input v-model="value">-->
+            <!--<span slot="prepend">http://</span>-->
+            <!--<span slot="append">.com</span>-->
+        <!--</Input>-->
        <br>
-        <i-input :value.sync="v">
-            <span slot="prepend">http://</span>
-            <span slot="append"><Icon type="ios-search"></Icon></span>
-        </i-input>
+        <Input type="textarea" v-model="value" placeholder="请输入..."></Input>
+        <Input type="textarea" v-model="value" :rows="4" placeholder="请输入..."></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">
-            <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">
-            <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>
+        <Input type="textarea" v-model="value" :autosize="true" placeholder="请输入..."></Input>
+        <Input type="textarea" v-model="value" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></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',
-                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');
+                value: ''
            }
        }
    }
-</script>
+</script>