103 lines
3.5 KiB
Vue
103 lines
3.5 KiB
Vue
<template>
|
|
<Form :model="formItem" :label-width="80">
|
|
<FormItem label="Input">
|
|
<Input v-model="formItem.input" placeholder="Enter something..."></Input>
|
|
</FormItem>
|
|
<FormItem label="Select">
|
|
<Select v-model="formItem.select">
|
|
<Option value="beijing">New York</Option>
|
|
<Option value="shanghai">London</Option>
|
|
<Option value="shenzhen">Sydney</Option>
|
|
</Select>
|
|
</FormItem>
|
|
<FormItem label="DatePicker">
|
|
<Row>
|
|
<Col span="11">
|
|
<DatePicker type="date" placeholder="Select date" v-model="formItem.date"></DatePicker>
|
|
</Col>
|
|
<Col span="2" style="text-align: center">-</Col>
|
|
<Col span="11">
|
|
<TimePicker type="time" placeholder="Select time" v-model="formItem.time"></TimePicker>
|
|
</Col>
|
|
</Row>
|
|
</FormItem>
|
|
<FormItem label="Radio">
|
|
<RadioGroup v-model="formItem.radio">
|
|
<Radio label="male">Male</Radio>
|
|
<Radio label="female">Female</Radio>
|
|
</RadioGroup>
|
|
</FormItem>
|
|
<FormItem label="Checkbox">
|
|
<CheckboxGroup v-model="formItem.checkbox">
|
|
<Checkbox label="Eat"></Checkbox>
|
|
<Checkbox label="Sleep"></Checkbox>
|
|
<Checkbox label="Run"></Checkbox>
|
|
<Checkbox label="Movie"></Checkbox>
|
|
</CheckboxGroup>
|
|
</FormItem>
|
|
<FormItem label="Switch">
|
|
<i-switch v-model="formItem.switch" size="large">
|
|
<span slot="open">On</span>
|
|
<span slot="close">Off</span>
|
|
</i-switch>
|
|
</FormItem>
|
|
<FormItem label="Slider">
|
|
<Slider v-model="formItem.slider" range></Slider>
|
|
</FormItem>
|
|
<FormItem label="Text">
|
|
<Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
|
|
</FormItem>
|
|
<FormItem>
|
|
<Button type="primary">Submit</Button>
|
|
<Button type="default" ghost style="margin-left: 8px">Cancel</Button>
|
|
</FormItem>
|
|
</Form>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
formItem: {
|
|
input: '',
|
|
select: '',
|
|
radio: 'male',
|
|
checkbox: [],
|
|
switch: true,
|
|
date: '',
|
|
time: '',
|
|
slider: [20, 50],
|
|
textarea: ''
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
|
|
<!--<template>-->
|
|
<!--<div>-->
|
|
<!--<Button type="primary" @click="modal1 = true">Display dialog box</Button>-->
|
|
<!--<Modal v-model="modal1">-->
|
|
<!--<Slider v-model="value2" range show-tip="always"></Slider>-->
|
|
<!--</Modal>-->
|
|
<!--</div>-->
|
|
<!--</template>-->
|
|
<!--<script>-->
|
|
<!--export default {-->
|
|
<!--data () {-->
|
|
<!--return {-->
|
|
<!--modal1: false,-->
|
|
<!--value2: [20, 50],-->
|
|
<!--}-->
|
|
<!--},-->
|
|
<!--methods: {-->
|
|
<!--ok () {-->
|
|
<!--this.$Message.info('Clicked ok');-->
|
|
<!--},-->
|
|
<!--cancel () {-->
|
|
<!--this.$Message.info('Clicked cancel');-->
|
|
<!--}-->
|
|
<!--}-->
|
|
<!--}-->
|
|
<!--</script>-->
|