From 42d5412a07727137bc9cf0a708e364b6a1967a39 Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Wed, 27 Jun 2018 14:23:09 +0800
Subject: [PATCH] Input add prop prefix & suffix, also add slot prefix & suffix

---
 examples/routers/input.vue       | 194 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------------------
 src/components/input/input.vue   |  20 ++++++++++++++++++--
 src/styles/components/input.less |  39 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 177 insertions(+), 76 deletions(-)

diff --git a/examples/routers/input.vue b/examples/routers/input.vue
index 81392c6..99fef1c 100644
--- a/examples/routers/input.vue
+++ b/examples/routers/input.vue
@@ -1,82 +1,128 @@
 <template>
-    <div>
-        <Input v-model="value" placeholder="Enter something..." style="width: 300px"></Input>
-        <Input v-model="value11">
-            <span slot="prepend">http://</span>
-            <span slot="append">.com</span>
-        </Input>
-        <br>
-        <Input v-model="value12">
-            <Select v-model="select1" slot="prepend" style="width: 80px">
-                <Option value="http">http://</Option>
-                <Option value="https">https://</Option>
-            </Select>
-            <Select v-model="select2" slot="append" style="width: 70px">
-                <Option value="com">.com</Option>
-                <Option value="org">.org</Option>
-                <Option value="io">.io</Option>
-            </Select>
-        </Input>
-        <br>
-        <Input v-model="value13">
-            <Select v-model="select3" slot="prepend" style="width: 80px">
-                <Option value="day">Day</Option>
-                <Option value="month">Month</Option>
-            </Select>
-            <Button slot="append" icon="ios-search"></Button>
-        </Input>
-        <br>
+    <!--<div>-->
+        <!--<Input v-model="value" placeholder="Enter something..." style="width: 300px"></Input>-->
+        <!--<Input v-model="value11">-->
+            <!--<span slot="prepend">http://</span>-->
+            <!--<span slot="append">.com</span>-->
+        <!--</Input>-->
+        <!--<br>-->
+        <!--<Input v-model="value12">-->
+            <!--<Select v-model="select1" slot="prepend" style="width: 80px">-->
+                <!--<Option value="http">http://</Option>-->
+                <!--<Option value="https">https://</Option>-->
+            <!--</Select>-->
+            <!--<Select v-model="select2" slot="append" style="width: 70px">-->
+                <!--<Option value="com">.com</Option>-->
+                <!--<Option value="org">.org</Option>-->
+                <!--<Option value="io">.io</Option>-->
+            <!--</Select>-->
+        <!--</Input>-->
+        <!--<br>-->
+        <!--<Input v-model="value13">-->
+            <!--<Select v-model="select3" slot="prepend" style="width: 80px">-->
+                <!--<Option value="day">Day</Option>-->
+                <!--<Option value="month">Month</Option>-->
+            <!--</Select>-->
+            <!--<Button slot="append" icon="ios-search"></Button>-->
+        <!--</Input>-->
+        <!--<br>-->
 
-        <Input v-model="value11" size="small">
-        <span slot="prepend">http://</span>
-        <span slot="append">.com</span>
-        </Input>
-        <br>
-        <Input v-model="value12" size="small">
-        <Select v-model="select1" slot="prepend" style="width: 80px">
-            <Option value="http">http://</Option>
-            <Option value="https">https://</Option>
-        </Select>
-        <Select v-model="select2" slot="append" style="width: 70px">
-            <Option value="com">.com</Option>
-            <Option value="org">.org</Option>
-            <Option value="io">.io</Option>
-        </Select>
-        </Input>
+        <!--<Input v-model="value11" size="small">-->
+        <!--<span slot="prepend">http://</span>-->
+        <!--<span slot="append">.com</span>-->
+        <!--</Input>-->
+        <!--<br>-->
+        <!--<Input v-model="value12" size="small">-->
+        <!--<Select v-model="select1" slot="prepend" style="width: 80px">-->
+            <!--<Option value="http">http://</Option>-->
+            <!--<Option value="https">https://</Option>-->
+        <!--</Select>-->
+        <!--<Select v-model="select2" slot="append" style="width: 70px">-->
+            <!--<Option value="com">.com</Option>-->
+            <!--<Option value="org">.org</Option>-->
+            <!--<Option value="io">.io</Option>-->
+        <!--</Select>-->
+        <!--</Input>-->
+        <!--<br>-->
+        <!--<Input v-model="value13" size="small">-->
+        <!--<Select v-model="select3" slot="prepend" style="width: 80px">-->
+            <!--<Option value="day">Day</Option>-->
+            <!--<Option value="month">Month</Option>-->
+        <!--</Select>-->
+        <!--<Button slot="append" icon="ios-search"></Button>-->
+        <!--</Input>-->
+        <!--<br>-->
+
+        <!--<Input v-model="value11" size="large">-->
+        <!--<span slot="prepend">http://</span>-->
+        <!--<span slot="append">.com</span>-->
+        <!--</Input>-->
+        <!--<br>-->
+        <!--<Input v-model="value12" size="large">-->
+        <!--<Select v-model="select1" slot="prepend" style="width: 80px">-->
+            <!--<Option value="http">http://</Option>-->
+            <!--<Option value="https">https://</Option>-->
+        <!--</Select>-->
+        <!--<Select v-model="select2" slot="append" style="width: 70px">-->
+            <!--<Option value="com">.com</Option>-->
+            <!--<Option value="org">.org</Option>-->
+            <!--<Option value="io">.io</Option>-->
+        <!--</Select>-->
+        <!--</Input>-->
+        <!--<br>-->
+        <!--<Input v-model="value13" size="large">-->
+        <!--<Select v-model="select3" slot="prepend" style="width: 80px">-->
+            <!--<Option value="day">Day</Option>-->
+            <!--<Option value="month">Month</Option>-->
+        <!--</Select>-->
+        <!--<Button slot="append" icon="ios-search"></Button>-->
+        <!--</Input>-->
+        <!--<br>-->
+    <!--</div>-->
+
+    <div>
+        <Input
+                v-model="value"
+                size="small"
+                prefix="ios-contact"
+                suffix="ios-search"
+                placeholder="Enter something..."
+                style="width: 300px"></Input>
         <br>
-        <Input v-model="value13" size="small">
-        <Select v-model="select3" slot="prepend" style="width: 80px">
-            <Option value="day">Day</Option>
-            <Option value="month">Month</Option>
-        </Select>
-        <Button slot="append" icon="ios-search"></Button>
-        </Input>
+        <Input
+                v-model="value"
+                prefix="ios-contact"
+                suffix="ios-search"
+                placeholder="Enter something..."
+                style="width: 300px"></Input>
         <br>
-
-        <Input v-model="value11" size="large">
-        <span slot="prepend">http://</span>
-        <span slot="append">.com</span>
-        </Input>
+        <Input
+                v-model="value"
+                size="large"
+                prefix="ios-contact"
+                suffix="ios-search"
+                placeholder="Enter something..."
+                style="width: 300px"></Input>
+        <br><br>
+        <Input
+                v-model="value"
+                size="small"
+                icon="ios-search"
+                placeholder="Enter something..."
+                style="width: 300px"></Input>
         <br>
-        <Input v-model="value12" size="large">
-        <Select v-model="select1" slot="prepend" style="width: 80px">
-            <Option value="http">http://</Option>
-            <Option value="https">https://</Option>
-        </Select>
-        <Select v-model="select2" slot="append" style="width: 70px">
-            <Option value="com">.com</Option>
-            <Option value="org">.org</Option>
-            <Option value="io">.io</Option>
-        </Select>
-        </Input>
+        <Input
+                v-model="value"
+                icon="ios-search"
+                placeholder="Enter something..."
+                style="width: 300px"></Input>
         <br>
-        <Input v-model="value13" size="large">
-        <Select v-model="select3" slot="prepend" style="width: 80px">
-            <Option value="day">Day</Option>
-            <Option value="month">Month</Option>
-        </Select>
-        <Button slot="append" icon="ios-search"></Button>
-        </Input>
+        <Input
+                v-model="value"
+                size="large"
+                icon="ios-search"
+                placeholder="Enter something..."
+                style="width: 300px"></Input>
         <br>
     </div>
 </template>
@@ -84,7 +130,7 @@
     export default {
         data () {
             return {
-                value: '',
+                value: '你好你好你真好你好你好你真好你好你好你真好你好你好你真好',
                 value11: '',
                 value12: '',
                 value13: '',
diff --git a/src/components/input/input.vue b/src/components/input/input.vue
index 8545c3c..1f9e6cc 100644
--- a/src/components/input/input.vue
+++ b/src/components/input/input.vue
@@ -4,6 +4,7 @@
             <div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady"><slot name="prepend"></slot></div>
             <i class="ivu-icon" :class="['ivu-icon-ios-close-circle', prefixCls + '-icon', prefixCls + '-icon-clear' , prefixCls + '-icon-normal']" v-if="clearable && currentValue" @click="handleClear"></i>
             <i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-else-if="icon" @click="handleIconClick"></i>
+            <span class="ivu-input-suffix" v-else-if="showSuffix"><slot name="suffix"><i class="ivu-icon" :class="['ivu-icon-' + suffix]" v-if="suffix"></i></slot></span>
             <transition name="fade">
                 <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
             </transition>
@@ -31,6 +32,7 @@
                 @input="handleInput"
                 @change="handleChange">
             <div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady"><slot name="append"></slot></div>
+            <span class="ivu-input-prefix" v-else-if="showPrefix"><slot name="prefix"><i class="ivu-icon" :class="['ivu-icon-' + prefix]" v-if="prefix"></i></slot></span>
         </template>
         <textarea
             v-else
@@ -142,6 +144,14 @@
                     return oneOf(value, ['hard', 'soft']);
                 },
                 default: 'soft'
+            },
+            prefix: {
+                type: String,
+                default: ''
+            },
+            suffix: {
+                type: String,
+                default: ''
             }
         },
         data () {
@@ -151,7 +161,9 @@
                 prepend: true,
                 append: true,
                 slotReady: false,
-                textareaStyles: {}
+                textareaStyles: {},
+                showPrefix: false,
+                showSuffix: false
             };
         },
         computed: {
@@ -174,7 +186,9 @@
                     `${prefixCls}`,
                     {
                         [`${prefixCls}-${this.size}`]: !!this.size,
-                        [`${prefixCls}-disabled`]: this.disabled
+                        [`${prefixCls}-disabled`]: this.disabled,
+                        [`${prefixCls}-with-prefix`]: this.showPrefix,
+                        [`${prefixCls}-with-suffix`]: this.showSuffix
                     }
                 ];
             },
@@ -273,6 +287,8 @@
             if (this.type !== 'textarea') {
                 this.prepend = this.$slots.prepend !== undefined;
                 this.append = this.$slots.append !== undefined;
+                this.showPrefix = this.prefix !== '' || this.$slots.prefix !== undefined;
+                this.showSuffix = this.suffix !== '' || this.$slots.suffix !== undefined;
             } else {
                 this.prepend = false;
                 this.append = false;
diff --git a/src/styles/components/input.less b/src/styles/components/input.less
index 92ddbc0..4981954 100644
--- a/src/styles/components/input.less
+++ b/src/styles/components/input.less
@@ -62,6 +62,45 @@
         //    padding-right: 24px;
         //}
     }
+
+    // prefix & suffix
+    &-prefix, &-suffix{
+        width: 32px;
+        height: 100%;
+        text-align: center;
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 1;
+        i{
+            font-size: 16px;
+            line-height: @input-height-base;
+            color: @subsidiary-color;
+        }
+    }
+    &-suffix{
+        left: auto;
+        right: 0;
+    }
+    &-wrapper-small &-prefix, &-wrapper-small &-suffix{
+        i{
+            font-size: 14px;
+            line-height: @input-height-small;
+        }
+    }
+    &-wrapper-large &-prefix, &-wrapper-large &-suffix{
+        i{
+            font-size: 18px;
+            line-height: @input-height-large;
+        }
+    }
+
+    &-with-prefix{
+        padding-left: 32px;
+    }
+    &-with-suffix{
+        padding-right: 32px;
+    }
 }
 
 .@{input-prefix-cls}-group{
--
libgit2 0.21.4