@evue/schema-form
v0.2.8
Published
## 简介
Downloads
22
Maintainers
Readme
@evue/schema-form
简介
基于 vue3 与 element-plus 的表格插件,数据驱动模型,渲染视图,并通过数据模型来实现各种交互。
安装
npm instll @evue/schema-form -S
使用
全局引用
import {SchemaForm} from "@evue/schema-form"
app.component(SchemaForm)
局部引用
注:全局引用后,无需局部引用。
<template>
<schema-form ref="formSchemaRef" :fields="fields" :form-schema="formSchema">
<template v-slot:operate-button>
<div style="text-align: center">
<el-button type="primary" @click="submit">提 交</el-button>
<el-button type="default" @click="clear">清 空</el-button>
</div>
</template>
</schema-form>
</template>
<script>
import { defineComponent, ref } from "vue"
import { SchemaForm } from "@evue/schema-form"
export default defineComponent({
name: "ServeDev",
components: { SchemaForm },
setup() {
const formSchema = {
formItem: [
{ type: "input", label: "用户名", prop: "username", span: 12 },
{ type: "input", label: "姓名", prop: "name", span: 12 },
{ type: "input-password", label: "密码", prop: "password", span: 24 },
{
type: "select",
label: "角色",
prop: "role",
options: [
{ label: "超级管理员", value: 1 },
{ label: "普通管理员", value: 2 },
],
span: 24,
},
{
type: "radio",
label: "性别",
prop: "sex",
options: [
{ label: "男", value: 1 },
{ label: "女", value: 2 },
],
span: 12,
value: 1,
},
{
type: "input-number",
label: "年龄",
prop: "age",
value: 1,
props: {
controlsPosition: "right",
},
span: 12,
},
{
type: "file",
label: "头像",
prop: "avatar",
span: 12,
success: (file) => {
console.log("这里是上传 的文件", file)
},
},
{
type: "file",
label: "照片",
prop: "image",
span: 12,
action: "/api/file/upload",
maxsize: 1024 * 1024 * 50,
fileType: "image",
success: (res, file) => {
console.log(res, file)
},
},
],
rules: {
username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
},
}
const fields = {}
const formSchemaRef = ref()
const submit = () => {
formSchemaRef.value.validate((valid) => {
if (valid) {
console.log("提交成功")
}
})
}
const clear = () => {
formSchemaRef.value.schemaFormRef.resetFields()
}
return {
formSchema,
fields,
submit,
clear,
formSchemaRef,
}
},
})
</script>
弹窗表单
函数式调用可以直接引入FormDialog
组件,传参形式与schemaForm一致。
需全局注册,否则无法继承全局组件与配置
// main.js
import { FormDialog } from "@evue/schema-form"
app.use(FormDialog.install)
使用样例
<template>
<el-button type="primary" @click="showDialogForm">打开弹窗表单</el-button>
</template>
<script>
import { defineComponent, ref } from "vue"
import { FormDialog } from "@evue/schema-form"
export default defineComponent({
name: "ServeDev",
components: { SchemaForm },
setup() {
const formSchema = {
formItem: [
{ type: "input", label: "用户名", prop: "username", span: 12 },
{ type: "input", label: "姓名", prop: "name", span: 12 },
{ type: "input-password", label: "密码", prop: "password", span: 24 },
{
type: "select",
label: "角色",
prop: "role",
options: [
{ label: "超级管理员", value: 1 },
{ label: "普通管理员", value: 2 },
],
span: 24,
},
{
type: "radio",
label: "性别",
prop: "sex",
options: [
{ label: "男", value: 1 },
{ label: "女", value: 2 },
],
span: 12,
value: 1,
},
{
type: "input-number",
label: "年龄",
prop: "age",
value: 1,
props: {
controlsPosition: "right",
},
span: 12,
},
{
type: "file",
label: "头像",
prop: "avatar",
span: 12,
success: (file) => {
console.log("这里是上传 的文件", file)
},
},
{
type: "file",
label: "照片",
prop: "image",
span: 12,
action: "/api/file/upload",
maxsize: 1024 * 1024 * 50,
fileType: "image",
success: (res, file) => {
console.log(res, file)
},
},
],
rules: {
username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
},
}
const fields = {}
const showDialogForm = () => {
FormDialog.show({
title:"修改信息",
fields,
formSchema,
})
}
return {
showDialogForm
}
},
})
</script>
Keywords
form vue3-form schema-form