drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Input add prop prefix & suffix, also add slot prefix & suffix

Browse source
This commit is contained in:
梁灏 2018-06-27 14:23:09 +08:00
parent d8fc256822
commit 42d5412a07
3 changed files with 177 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

194
examples/routers/input.vue
View file

@ -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>-->
<!--<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" placeholder="Enter something..." style="width: 300px"></Input>
<Input v-model="value11">
<span slot="prepend">http://</span>
<span slot="append">.com</span>
</Input>
<Input
v-model="value"
size="small"
prefix="ios-contact"
suffix="ios-search"
placeholder="Enter something..."
style="width: 300px"></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>
<Input
v-model="value"
prefix="ios-contact"
suffix="ios-search"
placeholder="Enter something..."
style="width: 300px"></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>
<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="value11" size="small">
<span slot="prepend">http://</span>
<span slot="append">.com</span>
</Input>
<Input
v-model="value"
icon="ios-search"
placeholder="Enter something..."
style="width: 300px"></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>
<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: '',

20
src/components/input/input.vue
View file

@ -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;

39
src/styles/components/input.less
View file

@ -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{