Input add search & enterButton prop

梁灏
1 parent 1044a56b
Showing 3 changed files with 77 additions and 7 deletions Show diff stats
examples/routers/input.vue
src/components/input/input.vue
src/styles/components/input.less
@@ -128,14 +128,19 @@
             <Icon type="ios-alarm-outline" slot="suffix" />
             <Icon type="ios-aperture" slot="prefix" />
         </Input>
-        <br>
+        <br><br><br><br>
+        <Input v-model="value" search enter-button style="width: 300px" />
+        <br><br>
+        <Input v-model="value" search style="width: 300px" />
+        <br><br>
+        <Input v-model="value" search enter-button="搜索" style="width: 300px" />
     </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                value: '你好你好你真好你好你好你真好你好你好你真好你好你好你真好',
+                value: '',
                 value11: '',
                 value12: '',
                 value13: '',
@@ -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>
+            <i class="ivu-icon ivu-icon-ios-search" :class="[prefixCls + '-icon', prefixCls + '-icon-normal', prefixCls + '-search-icon']" v-else-if="search && enterButton === false" @click="handleSearch"></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>
@@ -32,6 +33,10 @@
                 @input="handleInput"
                 @change="handleChange">
             <div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady"><slot name="append"></slot></div>
+            <div :class="[prefixCls + '-group-append', prefixCls + '-search']" v-else-if="search && enterButton" @click="handleSearch">
+                <i class="ivu-icon ivu-icon-ios-search" v-if="enterButton === true"></i>
+                <template v-else>{{ enterButton }}</template>
+            </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
@@ -152,6 +157,14 @@
             suffix: {
                 type: String,
                 default: ''
+            },
+            search: {
+                type: Boolean,
+                default: false
+            },
+            enterButton: {
+                type: [Boolean, String],
+                default: false
             }
         },
         data () {
@@ -173,11 +186,12 @@
                     {
                         [`${prefixCls}-wrapper-${this.size}`]: !!this.size,
                         [`${prefixCls}-type`]: this.type,
-                        [`${prefixCls}-group`]: this.prepend || this.append,
-                        [`${prefixCls}-group-${this.size}`]: (this.prepend || this.append) && !!this.size,
+                        [`${prefixCls}-group`]: this.prepend || this.append || (this.search && this.enterButton),
+                        [`${prefixCls}-group-${this.size}`]: (this.prepend || this.append || (this.search && this.enterButton)) && !!this.size,
                         [`${prefixCls}-group-with-prepend`]: this.prepend,
-                        [`${prefixCls}-group-with-append`]: this.append,
-                        [`${prefixCls}-hide-icon`]: this.append  // #554
+                        [`${prefixCls}-group-with-append`]: this.append || (this.search && this.enterButton),
+                        [`${prefixCls}-hide-icon`]: this.append,  // #554
+                        [`${prefixCls}-with-search`]: (this.search && this.enterButton)
                     }
                 ];
             },
@@ -188,7 +202,7 @@
                         [`${prefixCls}-${this.size}`]: !!this.size,
                         [`${prefixCls}-disabled`]: this.disabled,
                         [`${prefixCls}-with-prefix`]: this.showPrefix,
-                        [`${prefixCls}-with-suffix`]: this.showSuffix
+                        [`${prefixCls}-with-suffix`]: this.showSuffix || (this.search && this.enterButton === false)
                     }
                 ];
             },
@@ -276,6 +290,10 @@
                 this.$emit('input', '');
                 this.setCurrentValue('');
                 this.$emit('on-change', e);
+            },
+            handleSearch () {
+                if (this.disable) return false;
+                this.$refs.input.focus();
             }
         },
         watch: {
@@ -101,6 +101,53 @@
     &-with-suffix{
         padding-right: 32px;
     }
+
+    // search
+    &-search{
+        cursor: pointer;
+        padding: 0 16px !important;
+        background: @primary-color !important;
+        color: #fff !important;
+        border-color: @primary-color !important;
+        transition: all @transition-time @ease-in-out;
+        position: relative;
+        z-index: 2;
+
+        &:hover{
+            background: tint(@primary-color, 20%) !important;
+            border-color: tint(@primary-color, 20%) !important;
+        }
+        &:active{
+            background: shade(@primary-color, 5%) !important;
+            border-color: shade(@primary-color, 5%) !important;
+        }
+
+        &-icon{
+            cursor: pointer;
+            transition: color @transition-time @ease-in-out;
+            &:hover{
+                color: inherit;
+            }
+        }
+
+        &:before{
+            content: '';
+            display: block;
+            width: 1px;
+            position: absolute;
+            top: -1px;
+            bottom: -1px;
+            left: -1px;
+            background: inherit;
+        }
+    }
+    &-with-search{
+        &:hover{
+            .@{input-prefix-cls} {
+                border-color: tint(@primary-color, 20%);
+            }
+        }
+    }
 }
 .@{input-prefix-cls}-group{