InputGroup
Examples
Arbitrary combination
Available ui
prop values: xs
/ s
/ m
/ l
.
Select + Input + Button
请选择
Label + NumberInput + Button + ui="s"
NumberInput + Span + NumberInput + ui="xs"
Autocomplete + ButtonGroup
Select + SearchBox + ui="l"
By ID
<template>
<article>
<section>
<h4>Select + Input + Button</h4>
<veui-input-group>
<veui-select
:options="protocols"
style="width: 100px"
/>
<veui-input/>
<veui-button ui="primary">
Submit
</veui-button>
</veui-input-group>
</section>
<section>
<h4>Label + NumberInput + Button + <code>ui="s"</code></h4>
<veui-input-group ui="s">
<veui-label for="bid">
USD
</veui-label>
<veui-number-input
ref="bid"
v-model="bid"
style="width: 120px"
/>
<veui-button>Submit</veui-button>
</veui-input-group>
</section>
<section>
<h4>NumberInput + Span + NumberInput + <code>ui="xs"</code></h4>
<veui-input-group ui="xs">
<veui-number-input v-model="width"/>
<veui-span>×</veui-span>
<veui-number-input v-model="height"/>
</veui-input-group>
</section>
<section>
<h4>Autocomplete + ButtonGroup</h4>
<veui-input-group>
<veui-autocomplete :datasource="suggestions"/>
<veui-button-group
:items="ops"
ui="primary"
/>
</veui-input-group>
</section>
<section>
<h4>Select + SearchBox + <code>ui="l"</code></h4>
<veui-input-group ui="l">
<veui-select
:options="types"
:value="type"
style="width: 120px"
/>
<veui-search-box/>
</veui-input-group>
</section>
</article>
</template>
<script>
import {
InputGroup,
ButtonGroup,
Select,
Input,
NumberInput,
Button,
Autocomplete,
SearchBox,
Label,
Span
} from 'veui'
export default {
name: 'text-input',
components: {
'veui-input-group': InputGroup,
'veui-button-group': ButtonGroup,
'veui-input': Input,
'veui-select': Select,
'veui-number-input': NumberInput,
'veui-button': Button,
'veui-autocomplete': Autocomplete,
'veui-search-box': SearchBox,
'veui-label': Label,
'veui-span': Span
},
data () {
return {
protocols: [
{ label: 'https://', value: 'https' },
{ label: 'http://', value: 'http' }
],
bid: 1024,
width: 1024,
height: 768,
ops: [
{ label: 'Save', value: 'save' },
{ label: 'Submit', value: 'submit' }
],
types: [
{ label: 'By ID', value: 'id' },
{ label: 'By Name', value: 'name' }
],
type: 'id',
suggestions: [
{ value: 'Steve Rogers' },
{ value: 'Tony Stark' },
{ value: 'Thor' },
{ value: 'Hulk' },
{ value: 'Stephen Strange' },
{ value: 'Natasha Romanov' },
{ value: 'Loki' }
]
}
}
}
</script>
<style lang="less" scoped>
section {
margin-bottom: 20px;
}
</style>
API
Slots
Name | Description |
---|---|
default | Content area, used to inline input components. |