fixed input cls with group & prepend, close #3089
This commit is contained in:
parent
5bb01822df
commit
54c988f211
2 changed files with 34 additions and 9 deletions
|
@ -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'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue