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

fixed input cls with group & prepend, close #3089

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

35
examples/routers/input.vue
View file

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

8
src/styles/mixins/input.less
View file

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