Input add prop prefix & suffix, also add slot prefix & suffix
This commit is contained in:
梁灏
parent
d8fc256822
commit
42d5412a07
3 changed files with 177 additions and 76 deletions
|
|
@ -1,82 +1,128 @@
|
||||||
<template>
|
<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>-->
|
||||||
|
|
||||||
|
<!--<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>
|
<div>
|
||||||
<Input v-model="value" placeholder="Enter something..." style="width: 300px"></Input>
|
<Input
|
||||||
<Input v-model="value11">
|
v-model="value"
|
||||||
<span slot="prepend">http://</span>
|
size="small"
|
||||||
<span slot="append">.com</span>
|
prefix="ios-contact"
|
||||||
</Input>
|
suffix="ios-search"
|
||||||
|
placeholder="Enter something..."
|
||||||
|
style="width: 300px"></Input>
|
||||||
<br>
|
<br>
|
||||||
<Input v-model="value12">
|
<Input
|
||||||
<Select v-model="select1" slot="prepend" style="width: 80px">
|
v-model="value"
|
||||||
<Option value="http">http://</Option>
|
prefix="ios-contact"
|
||||||
<Option value="https">https://</Option>
|
suffix="ios-search"
|
||||||
</Select>
|
placeholder="Enter something..."
|
||||||
<Select v-model="select2" slot="append" style="width: 70px">
|
style="width: 300px"></Input>
|
||||||
<Option value="com">.com</Option>
|
|
||||||
<Option value="org">.org</Option>
|
|
||||||
<Option value="io">.io</Option>
|
|
||||||
</Select>
|
|
||||||
</Input>
|
|
||||||
<br>
|
<br>
|
||||||
<Input v-model="value13">
|
<Input
|
||||||
<Select v-model="select3" slot="prepend" style="width: 80px">
|
v-model="value"
|
||||||
<Option value="day">Day</Option>
|
size="large"
|
||||||
<Option value="month">Month</Option>
|
prefix="ios-contact"
|
||||||
</Select>
|
suffix="ios-search"
|
||||||
<Button slot="append" icon="ios-search"></Button>
|
placeholder="Enter something..."
|
||||||
</Input>
|
style="width: 300px"></Input>
|
||||||
|
<br><br>
|
||||||
|
<Input
|
||||||
|
v-model="value"
|
||||||
|
size="small"
|
||||||
|
icon="ios-search"
|
||||||
|
placeholder="Enter something..."
|
||||||
|
style="width: 300px"></Input>
|
||||||
<br>
|
<br>
|
||||||
|
<Input
|
||||||
<Input v-model="value11" size="small">
|
v-model="value"
|
||||||
<span slot="prepend">http://</span>
|
icon="ios-search"
|
||||||
<span slot="append">.com</span>
|
placeholder="Enter something..."
|
||||||
</Input>
|
style="width: 300px"></Input>
|
||||||
<br>
|
<br>
|
||||||
<Input v-model="value12" size="small">
|
<Input
|
||||||
<Select v-model="select1" slot="prepend" style="width: 80px">
|
v-model="value"
|
||||||
<Option value="http">http://</Option>
|
size="large"
|
||||||
<Option value="https">https://</Option>
|
icon="ios-search"
|
||||||
</Select>
|
placeholder="Enter something..."
|
||||||
<Select v-model="select2" slot="append" style="width: 70px">
|
style="width: 300px"></Input>
|
||||||
<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>
|
<br>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -84,7 +130,7 @@
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
value: '',
|
value: '你好你好你真好你好你好你真好你好你好你真好你好你好你真好',
|
||||||
value11: '',
|
value11: '',
|
||||||
value12: '',
|
value12: '',
|
||||||
value13: '',
|
value13: '',
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
<div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady"><slot name="prepend"></slot></div>
|
<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-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" :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">
|
<transition name="fade">
|
||||||
<i class="ivu-icon ivu-icon-ios-loading ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
|
<i class="ivu-icon ivu-icon-ios-loading ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
|
||||||
</transition>
|
</transition>
|
||||||
|
|
@ -31,6 +32,7 @@
|
||||||
@input="handleInput"
|
@input="handleInput"
|
||||||
@change="handleChange">
|
@change="handleChange">
|
||||||
<div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady"><slot name="append"></slot></div>
|
<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>
|
</template>
|
||||||
<textarea
|
<textarea
|
||||||
v-else
|
v-else
|
||||||
|
|
@ -142,6 +144,14 @@
|
||||||
return oneOf(value, ['hard', 'soft']);
|
return oneOf(value, ['hard', 'soft']);
|
||||||
},
|
},
|
||||||
default: 'soft'
|
default: 'soft'
|
||||||
|
},
|
||||||
|
prefix: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
suffix: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
|
|
@ -151,7 +161,9 @@
|
||||||
prepend: true,
|
prepend: true,
|
||||||
append: true,
|
append: true,
|
||||||
slotReady: false,
|
slotReady: false,
|
||||||
textareaStyles: {}
|
textareaStyles: {},
|
||||||
|
showPrefix: false,
|
||||||
|
showSuffix: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
@ -174,7 +186,9 @@
|
||||||
`${prefixCls}`,
|
`${prefixCls}`,
|
||||||
{
|
{
|
||||||
[`${prefixCls}-${this.size}`]: !!this.size,
|
[`${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') {
|
if (this.type !== 'textarea') {
|
||||||
this.prepend = this.$slots.prepend !== undefined;
|
this.prepend = this.$slots.prepend !== undefined;
|
||||||
this.append = this.$slots.append !== undefined;
|
this.append = this.$slots.append !== undefined;
|
||||||
|
this.showPrefix = this.prefix !== '' || this.$slots.prefix !== undefined;
|
||||||
|
this.showSuffix = this.suffix !== '' || this.$slots.suffix !== undefined;
|
||||||
} else {
|
} else {
|
||||||
this.prepend = false;
|
this.prepend = false;
|
||||||
this.append = false;
|
this.append = false;
|
||||||
|
|
|
||||||
|
|
@ -62,6 +62,45 @@
|
||||||
// padding-right: 24px;
|
// 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{
|
.@{input-prefix-cls}-group{
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue