73 lines
2.0 KiB
Vue
73 lines
2.0 KiB
Vue
<template>
|
|
<div class="demo-form">
|
|
<tiny-form :disabled="false" label-position="right" ref="createData" label-width="100px">
|
|
<tiny-form-item label="数字">
|
|
<tiny-numeric v-model="createData.quantity"></tiny-numeric>
|
|
</tiny-form-item>
|
|
<tiny-form-item label="单选">
|
|
<tiny-radio v-model="createData.sex" label="1">男</tiny-radio>
|
|
<tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
|
|
</tiny-form-item>
|
|
<tiny-form-item label="日期">
|
|
<tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
|
|
</tiny-form-item>
|
|
<tiny-form-item label="时间">
|
|
<tiny-drop-times v-model="createData.dropTimes"></tiny-drop-times>
|
|
</tiny-form-item>
|
|
<tiny-form-item label="提示">
|
|
<tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
|
|
<tiny-input v-model="createData.input" placeholder="click"></tiny-input>
|
|
</tiny-tooltip>
|
|
</tiny-form-item>
|
|
<tiny-form-item label="文本">
|
|
<tiny-input v-model="createData.textarea" type="textarea" maxlength="15"> </tiny-input>
|
|
</tiny-form-item>
|
|
<tiny-form-item>
|
|
<tiny-button type="primary" @click="submitClick">提交</tiny-button>
|
|
</tiny-form-item>
|
|
</tiny-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="jsx">
|
|
import { Form, FormItem, Numeric, Radio, DatePicker, DropTimes, Tooltip, Input, Button } from '@opentiny/vue'
|
|
import { alert } from '@opentiny/vue-modal'
|
|
|
|
export default {
|
|
components: {
|
|
TinyForm: Form,
|
|
TinyFormItem: FormItem,
|
|
TinyNumeric: Numeric,
|
|
TinyRadio: Radio,
|
|
TinyDatePicker: DatePicker,
|
|
TinyDropTimes: DropTimes,
|
|
TinyTooltip: Tooltip,
|
|
TinyInput: Input,
|
|
TinyButton: Button
|
|
},
|
|
data() {
|
|
return {
|
|
createData: {
|
|
quantity: '',
|
|
sex: '1',
|
|
datepicker: '',
|
|
textarea: '',
|
|
dropTimes: '',
|
|
input: ''
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
submitClick() {
|
|
alert('提交')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.demo-form {
|
|
width: 380px;
|
|
}
|
|
</style>
|