127 lines
2.7 KiB
Vue
127 lines
2.7 KiB
Vue
<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>
|