chenhaodong / mew-iview

Commit e2a877c46abf9be9b7d436c307485f4e4f7712dd

Authored by 梁灏
1 parent 1044a56b

Input add search & enterButton prop

Showing 3 changed files with 77 additions and 7 deletions   Show diff stats
Inline Side-by-side
examples/routers/input.vue
  Show/Hide comments   View file @e2a877c
... ... @@ -128,14 +128,19 @@
128 128 <Icon type="ios-alarm-outline" slot="suffix" />
129 129 <Icon type="ios-aperture" slot="prefix" />
130 130 </Input>
131   - <br>
  131 + <br><br><br><br>
  132 + <Input v-model="value" search enter-button style="width: 300px" />
  133 + <br><br>
  134 + <Input v-model="value" search style="width: 300px" />
  135 + <br><br>
  136 + <Input v-model="value" search enter-button="搜索" style="width: 300px" />
132 137 </div>
133 138 </template>
134 139 <script>
135 140 export default {
136 141 data () {
137 142 return {
138   - value: '你好你好你真好你好你好你真好你好你好你真好你好你好你真好',
  143 + value: '',
139 144 value11: '',
140 145 value12: '',
141 146 value13: '',
... ...
src/components/input/input.vue
  Show/Hide comments   View file @e2a877c
... ... @@ -4,6 +4,7 @@
4 4 <div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady"><slot name="prepend"></slot></div>
5 5 <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>
6 6 <i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-else-if="icon" @click="handleIconClick"></i>
  7 + <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>
7 8 <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>
8 9 <transition name="fade">
9 10 <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 @@
32 33 @input="handleInput"
33 34 @change="handleChange">
34 35 <div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady"><slot name="append"></slot></div>
  36 + <div :class="[prefixCls + '-group-append', prefixCls + '-search']" v-else-if="search && enterButton" @click="handleSearch">
  37 + <i class="ivu-icon ivu-icon-ios-search" v-if="enterButton === true"></i>
  38 + <template v-else>{{ enterButton }}</template>
  39 + </div>
35 40 <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>
36 41 </template>
37 42 <textarea
... ... @@ -152,6 +157,14 @@
152 157 suffix: {
153 158 type: String,
154 159 default: ''
  160 + },
  161 + search: {
  162 + type: Boolean,
  163 + default: false
  164 + },
  165 + enterButton: {
  166 + type: [Boolean, String],
  167 + default: false
155 168 }
156 169 },
157 170 data () {
... ... @@ -173,11 +186,12 @@
173 186 {
174 187 [`${prefixCls}-wrapper-${this.size}`]: !!this.size,
175 188 [`${prefixCls}-type`]: this.type,
176   - [`${prefixCls}-group`]: this.prepend || this.append,
177   - [`${prefixCls}-group-${this.size}`]: (this.prepend || this.append) && !!this.size,
  189 + [`${prefixCls}-group`]: this.prepend || this.append || (this.search && this.enterButton),
  190 + [`${prefixCls}-group-${this.size}`]: (this.prepend || this.append || (this.search && this.enterButton)) && !!this.size,
178 191 [`${prefixCls}-group-with-prepend`]: this.prepend,
179   - [`${prefixCls}-group-with-append`]: this.append,
180   - [`${prefixCls}-hide-icon`]: this.append // #554
  192 + [`${prefixCls}-group-with-append`]: this.append || (this.search && this.enterButton),
  193 + [`${prefixCls}-hide-icon`]: this.append, // #554
  194 + [`${prefixCls}-with-search`]: (this.search && this.enterButton)
181 195 }
182 196 ];
183 197 },
... ... @@ -188,7 +202,7 @@
188 202 [`${prefixCls}-${this.size}`]: !!this.size,
189 203 [`${prefixCls}-disabled`]: this.disabled,
190 204 [`${prefixCls}-with-prefix`]: this.showPrefix,
191   - [`${prefixCls}-with-suffix`]: this.showSuffix
  205 + [`${prefixCls}-with-suffix`]: this.showSuffix || (this.search && this.enterButton === false)
192 206 }
193 207 ];
194 208 },
... ... @@ -276,6 +290,10 @@
276 290 this.$emit('input', '');
277 291 this.setCurrentValue('');
278 292 this.$emit('on-change', e);
  293 + },
  294 + handleSearch () {
  295 + if (this.disable) return false;
  296 + this.$refs.input.focus();
279 297 }
280 298 },
281 299 watch: {
... ...
src/styles/components/input.less
  Show/Hide comments   View file @e2a877c
... ... @@ -101,6 +101,53 @@
101 101 &-with-suffix{
102 102 padding-right: 32px;
103 103 }
  104 +
  105 + // search
  106 + &-search{
  107 + cursor: pointer;
  108 + padding: 0 16px !important;
  109 + background: @primary-color !important;
  110 + color: #fff !important;
  111 + border-color: @primary-color !important;
  112 + transition: all @transition-time @ease-in-out;
  113 + position: relative;
  114 + z-index: 2;
  115 +
  116 + &:hover{
  117 + background: tint(@primary-color, 20%) !important;
  118 + border-color: tint(@primary-color, 20%) !important;
  119 + }
  120 + &:active{
  121 + background: shade(@primary-color, 5%) !important;
  122 + border-color: shade(@primary-color, 5%) !important;
  123 + }
  124 +
  125 + &-icon{
  126 + cursor: pointer;
  127 + transition: color @transition-time @ease-in-out;
  128 + &:hover{
  129 + color: inherit;
  130 + }
  131 + }
  132 +
  133 + &:before{
  134 + content: '';
  135 + display: block;
  136 + width: 1px;
  137 + position: absolute;
  138 + top: -1px;
  139 + bottom: -1px;
  140 + left: -1px;
  141 + background: inherit;
  142 + }
  143 + }
  144 + &-with-search{
  145 + &:hover{
  146 + .@{input-prefix-cls} {
  147 + border-color: tint(@primary-color, 20%);
  148 + }
  149 + }
  150 + }
104 151 }
105 152  
106 153 .@{input-prefix-cls}-group{
... ...