如何使用form-created
时间: 2024-01-02 17:02:27 浏览: 30
使用 Form-create 可以分为以下几个步骤:
1.安装 Form-create
可以通过 npm 或 yarn 安装 Form-create:
```
npm install form-create --save
```
或
```
yarn add form-create
```
2.注册 Form-create 组件
在 Vue 项目中,需要将 Form-create 注册为全局或局部组件。全局注册可以在 main.js 中进行:
```
import Vue from 'vue'
import FormCreate from 'form-create'
Vue.use(FormCreate)
```
局部注册可以在组件中进行:
```
import FormCreate from 'form-create'
export default {
components: {
FormCreate
},
// ...
}
```
3.在组件中使用 Form-create
在组件中,需要定义一个配置对象,该对象中包含了表单需要的各种信息,如表单项、校验规则等。可以使用 Form-create 的 createForm 方法创建表单实例,并传入配置对象:
```
<template>
<form-create :data="formData" :option="formOption" ref="formCreate"></form-create>
</template>
<script>
export default {
data() {
return {
formData: {}, // 表单数据
formOption: {} // 表单配置
}
},
methods: {
submit() {
this.$refs.formCreate.validate(valid => {
if (valid) {
// 提交表单数据
} else {
// 表单校验不通过
}
})
}
}
}
</script>
```
在上面的代码中,通过 createForm 方法创建了一个表单实例,并将其挂载到组件的 $refs 中。可以通过调用 validate 方法来进行表单校验,如果校验通过,则会执行回调函数中的代码。如果校验不通过,则会弹出提示信息。
4.配置表单项
在配置对象中可以定义表单项,如下:
```
{
name: 'input', // 表单项类型
label: 'Input', // 表单项标签
value: '', // 表单项值
rules: { // 表单项校验规则
required: true,
message: '请输入内容',
trigger: 'blur'
}
}
```
Form-create 支持的表单项类型有:input、textarea、select、radio、checkbox、switch、slider、date、time、datetime、rate、upload、tree、custom。
以上是使用 Form-create 的基本步骤和配置方式,更详细的使用方法可以参考官方文档:https://form-create.com/v2/guide/。
相关推荐
<%-- Created by IntelliJ IDEA. User: syp Date: 2023/5/22 Time: 13:59 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Denglu</title> </head> <body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0"> <fieldset style="width: auto; margin: 0px auto"> <legend> 欢迎使用常州工业职业技术学院人员管理系统 </legend>
<form action="loginSuccess.action"> 用户:<input type="text" name="username"/>
密码:<input type="password" name="password"/>
<input type="submit" value="登录"/> 注册 </form> </fieldset> </body> </html>
<form action="loginSuccess.action"> 用户:<input type="text" name="username"/>
密码:<input type="password" name="password"/>
<input type="submit" value="登录"/> 注册 </form> </fieldset>