fixed input cls with group & prepend, close #3089

This commit is contained in:
梁灏 2018-03-05 09:28:50 +08:00
parent 5bb01822df
commit 54c988f211
2 changed files with 34 additions and 9 deletions

View file

@ -1,20 +1,41 @@
<template> <template>
<div> <div>
{{ value1 }} <Input v-model="value11" size="small">
<Input v-model="value1" clearable icon="ios-clock-outline" size="large" placeholder="large size"></Input> <span slot="prepend">http://</span>
<span slot="append">.com</span>
</Input>
<br> <br>
<Input v-model="value2" clearable placeholder="default size"></Input> <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> <br>
<Input v-model="value3" clearable size="small" placeholder="small size"></Input> <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>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
value1: '', value11: '',
value2: '', value12: '',
value3: '' value13: '',
select1: 'http',
select2: 'com',
select3: 'day'
} }
} }
} }

View file

@ -129,11 +129,15 @@
// border-radius: 0; // border-radius: 0;
//} //}
} }
&-with-prepend .@{inputClass} { &-with-prepend .@{inputClass},
&-with-prepend&-small .@{inputClass}
{
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
&-with-append .@{inputClass} { &-with-append .@{inputClass},
&-with-append&-small .@{inputClass}
{
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }