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>
|
||||
<!--<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: '',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue