mirror of
https://github.com/element-plus/element-plus.git
synced 2025-08-14 18:11:48 +08:00
efb48a61fd
* fix(style): adjust button size & demo spacing * fix(style): adjust input padding & with prefix/suffix * fix(style): adjust button padding horizontal * fix(style): adjust form margin & font-size * refactor(docs): use setup simplify form examples
41 lines
1.0 KiB
Vue
41 lines
1.0 KiB
Vue
<template>
|
|
<el-form
|
|
ref="formRef"
|
|
:model="numberValidateForm"
|
|
label-width="100px"
|
|
class="demo-ruleForm"
|
|
>
|
|
<el-form-item
|
|
label="age"
|
|
prop="age"
|
|
:rules="[
|
|
{ required: true, message: 'age is required' },
|
|
{ type: 'number', message: 'age must be a number' },
|
|
]"
|
|
>
|
|
<el-input
|
|
v-model.number="numberValidateForm.age"
|
|
type="age"
|
|
autocomplete="off"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="submitForm(formRef)">Submit</el-button>
|
|
<el-button @click="resetForm(formRef)">Reset</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { reactive, ref } from 'vue'
|
|
// More info see https://github.com/element-plus/element-plus/blob/dev/docs/examples/form/utils.ts
|
|
import { resetForm, submitForm } from './utils'
|
|
import type { ElForm } from 'element-plus'
|
|
|
|
const formRef = ref<InstanceType<typeof ElForm>>()
|
|
|
|
const numberValidateForm = reactive({
|
|
age: '',
|
|
})
|
|
</script>
|