hogwarts-ui 官方网站Form 表单
基础用法
点击查看示例代码
vue
<template>
<h-form-v1 :h_data="h_form"></h-form-v1>
</template>
<script setup>
const h_form = {
component: 'h-form-v1',
items: [
{
name: 'case_text',
display_name: '普通文本输入框',
type: 'text',
component: 'h-text-v1'
},
{
name: 'case_text',
class: 'hogwarts required edit value',
display_name: '普通文本输入框',
type: 'text',
component: 'h-text-v1'
},
{
name: 'case_number',
display_name: '数字输入框',
type: 'number',
component: 'h-number-v1'
},
{
name: 'case_number',
class: 'hogwarts required edit value',
display_name: '数字输入框',
type: 'number',
component: 'h-number-v1'
},
{
name: 'case_textarea',
display_name: '多行文本输入框',
component: 'h-textarea-v1'
},
{
name: 'case_textarea',
class: 'hogwarts required edit value',
display_name: '多行文本输入框',
component: 'h-textarea-v1'
},
{ name: 'case_toggle', display_name: '切换框', component: 'h-toggle-v1' },
{
name: 'case_toggle',
class: 'hogwarts edit value',
display_name: '切换框',
component: 'h-toggle-v1'
},
{ name: 'case_radio', display_name: '单选框', component: 'h-radio-v1' },
{
name: 'case_radio',
class: 'hogwarts required edit value',
display_name: '单选框',
component: 'h-radio-v1'
},
{
name: 'case_radio',
class: 'hogwarts edit value options',
display_name: '单选框',
component: 'h-radio-v1'
},
{
name: 'case_checkbox',
display_name: '复选框',
component: 'h-checkbox-v1'
},
{
name: 'case_checkbox',
class: 'hogwarts required edit value',
display_name: '复选框',
component: 'h-checkbox-v1'
},
{
name: 'case_checkbox',
class: 'hogwarts edit value options',
display_name: '复选框',
component: 'h-checkbox-v1'
},
{
name: 'case_select',
display_name: '单选下拉框',
component: 'h-select-v1',
options: [
{
id: 1348,
name: 'test2'
},
{
id: 442,
name: 'admin admin'
},
{
id: 441,
name: 'hogwarts_student_debug2 dev'
}
]
},
{
name: 'case_select',
class: 'hogwarts edit value',
display_name: '单选下拉框可编辑',
component: 'h-select-v1',
options: [
{
id: 1348,
name: 'test2'
},
{
id: 442,
name: 'admin admin'
},
{
id: 441,
name: 'hogwarts_student_debug2 dev'
}
]
},
{
name: 'case_selectbox',
display_name: '多选下拉框',
component: 'h-selectbox-v1',
options: [
{
id: 1348,
name: 'test2'
},
{
id: 442,
name: 'admin admin'
},
{
id: 441,
name: 'hogwarts_student_debug2 dev'
}
]
},
{
name: 'case_selectbox',
class: 'hogwarts edit value',
display_name: '多选下拉框可编辑',
component: 'h-selectbox-v1',
options: [
{
id: 1348,
name: 'test2'
},
{
id: 442,
name: 'admin admin'
},
{
id: 441,
name: 'hogwarts_student_debug2 dev'
}
]
},
{
name: 'case_selectbox',
class: 'hogwarts edit value drag',
display_name: '多选下拉框可拖拽排序',
component: 'h-selectbox-v1',
options: [
{
id: 1348,
name: 'test2'
},
{
id: 442,
name: 'admin admin'
},
{
id: 441,
name: 'hogwarts_student_debug2 dev'
}
]
},
{
name: 'case_jsoneditor',
display_name: 'json编辑器',
component: 'h-jsoneditor-v1'
},
{
name: 'case_markdown',
display_name: '富文本编辑器',
component: 'h-markdown-v1'
},
{
name: 'case_markdown',
class: 'hogwarts edit value',
display_name: '富文本编辑器',
component: 'h-markdown-v1',
action: [
{
api: {
header: {},
method: 'post',
url: '/issues/:id/edit'
},
icon: 'save',
name: 'save',
link: '#/issues/:id',
display_name: '文件上传url'
}
]
},
{
name: 'case_date',
display_name: '时间日期选择器',
component: 'h-date-v1'
},
{
name: 'case_date',
class: 'hogwarts edit value',
display_name: '时间日期选择器',
component: 'h-date-v1'
},
{
name: 'case_upload',
display_name: '文件上传',
component: 'h-upload-v1',
action: [
{
api: {
header: {},
method: 'post',
url: '/issues/:id/edit'
},
icon: 'save',
name: 'save',
link: '#/issues/:id',
display_name: '去考试'
}
]
},
{
name: 'case_download',
display_name: '文件下载',
component: 'h-download-v1'
}
],
content: {
case_text: '我的数据比较短',
case_number: '123',
case_textarea:
'我的数据比较长，我的数据比较长，我的数据比较长，我的数据比较长，我的数据比较长，我的数据比较长，我的数据比较长，我的数据比较长，我的数据比较长，我的数据比较长，',
case_radio: [
{ name: '单选按钮1', is_selected: true },
{ name: '单选按钮2', is_selected: false },
{ name: '单选按钮3', is_selected: false },
{ name: '单选按钮4', is_selected: false }
],
case_checkbox: [
{ name: '单选按钮1', is_selected: false },
{ name: '单选按钮2', is_selected: true },
{ name: '单选按钮3', is_selected: false },
{ name: '单选按钮4', is_selected: true }
],
case_toggle: true,
case_select: 1348,
case_selectbox: [1348, 442],
case_jsoneditor: { a: 'project_manage', b: 'json编辑器' },
case_markdown: '### 我的数据比较长，我的数据比较长，我的数据比较长，我的数据比较长，我的数据比较长，我的数据比较长，我的数据比较长，我的数据比较长，我的数据比较长，我的数据比较长，',
case_date: '2023-08-09 17:53:00',
case_upload: {
filename: '用例文件.excel',
content_url: '/homework_scores/statistic_download?course_name=xxx'
},
case_download: {
filename: '用例模板.excel',
content_url: '/homework_scores/statistic_download?course_name=xxx'
}
},
action: [
{
api: {
header: {},
method: 'post',
url: '/issues/:id/edit'
},
icon: 'save',
name: 'save',
display_name: 'action去考试1'
},
{
api: {
header: {},
method: 'post',
url: '/issues/:id/edit'
},
icon: 'save',
name: 'save',
display_name: 'action去考试2'
}
],
extra: [
{
api: {
header: {},
method: 'post',
url: '/issues/:id/edit'
},
icon: 'save',
name: 'save',
display_name: 'extra去考试3'
},
{
api: {
header: {},
method: 'post',
url: '/issues/:id/edit'
},
icon: 'save',
name: 'save',
display_name: 'extra去考试4'
}
]
}
</script>