Input add search & enterButton prop
This commit is contained in:
梁灏
parent
1044a56b48
commit
e2a877c46a
3 changed files with 77 additions and 7 deletions
|
|
@ -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{
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue