dyform可视化表单拖拽json生成器代码
代码语言：html
所属分类：表单美化
代码描述：dyform可视化表单拖拽json生成器代码，可通过可视化拖拽的形式生成json表单元素配置，适合dyform表单生成器插件。
代码标签： dyform 可视化 表单 拖拽 json 生成器 代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON 表单设计器</title>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css">
<style>
:root {
--primary: #4e73df;
--primary-light: #6f8bee;
--primary-dark: #3a5dd1;
--success: #1cc88a;
--info: #36b9cc;
--warning: #f6c23e;
--danger: #e74a3b;
--secondary: #858796;
--light: #f8f9fc;
--dark: #5a5c69;
--border-color: #e3e6f0;
--bg-light: #f8f9fc;
--shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15);
--radius: 0.35rem;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #333;
background-color: var(--bg-light);
line-height: 1.5;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 300px 1fr;
gap: 20px;
}
.sidebar {
display: flex;
flex-direction: column;
gap: 20px;
}
.panel {
background-color: white;
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
}
.panel-header {
background-color: var(--primary);
color: white;
padding: 15px 20px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
}
.panel-header i {
margin-right: 8px;
}
.panel-content {
padding: 15px;
}
#types-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.type-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(--light);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 12px 8px;
cursor: move;
font-size: 14px;
transition: all 0.2s;
text-align: center;
min-height: 90px;
}
.type-item:hover {
background-color: var(--primary-light);
color: white;
transform: translateY(-2px);
}
.type-item i {
font-size: 24px;
margin-bottom: 8px;
}
#form-container {
height: calc(100vh - 40px);
display: flex;
flex-direction: column;
}
.form-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid var(--border-color);
}
.form-header h2 {
margin: 0;
font-size: 18px;
}
#form-list {
flex: 1;
overflow-y: auto;
padding: 15px;
min-height: 400px;
}
.form-item {
display: flex;
align-items: center;
background-color: white;
border: 1px solid var(--border-color);
border-left: 4px solid var(--primary);
border-radius: var(--radius);
padding: 15px;
margin-bottom: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
transition: all 0.2s;
}
.form-item:hover {
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transform: translateY(-2px);
}
.form-item-handle {
cursor: move;
color: var(--secondary);
margin-right: 10px;
font-size: 18px;
}
.form-item-content {
flex: 1;
}
.form-item-name {
font-weight: 600;
font-size: 16px;
}
.form-item-type {
font-size: 14px;
color: var(--secondary);
}
.form-item-actions {
display: flex;
gap: 8px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
border: none;
border-radius: var(--radius);
cursor: pointer;
font-weight: 500;
transition: all 0.2s;
font-size: 14px;
}
.btn i {
margin-right: 5px;
}
.btn-primary {
background-color: var(--primary);
color: white;
}
.btn-primary:hover {
background-color: var(--primary-dark);
}
.btn-danger {
background-color: var(--danger);
color: white;
}
.btn-danger:hover {
background-color: #d03b2d;
}
.btn-success {
background-color: var(--success);
color: white;
}
.btn-success:hover {
background-color: #17a673;
}
.btn-info {
background-color: var(--info);
color: white;
}
.btn-info:hover {
background-color: #2ca8c9;
}
.btn-sm {
padding: 5px 10px;
font-size: 12px;
}
.form-footer {
border-top: 1px solid var(--border-color);
padding: 15px;
display: flex;
justify-content: flex-end;
}
/* Modal styles */
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.modal {
background-color: white;
border-radius: var(--radius);
box-shadow: var(--shadow);
width: 90%;
max-width: 700px;
max-height: 90vh;
overflow-y: auto;
animation: modal-appear 0.3s ease;
}
@keyframes modal-appear {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid var(--border-color);
background-color: var(--primary);
color: white;
}
.modal-title {
font-size: 18px;
font-weight: 600;
margin: 0;
}
.modal-close {
background: none;
border: none;
color: white;
font-size: 20px;
cursor: pointer;
opacity: 0.8;
}
.modal-close:hover {
opacity: 1;
}
.modal-body {
padding: 20px;
}
.modal-footer {
padding: 15px 20px;
border-top: 1px solid var(--border-color);
display: flex;
justify-content: flex-end;
gap: 10px;
}
/* Form styles */
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: 500;
}
.form-control {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: var(--radius);
font-size: 14px;
}
.form-control:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}
.form-check {
display: flex;
align-items: center;
}
.form-check-input {
margin-right: 8px;
}
.options-list {
margin-top: 20px;
border-top: 1px solid var(--border-color);
padding-top: 20px;
}
.options-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.option-item {
background-color: var(--light);
border-radius: var(--radius);
padding: 15px;
margin-bottom: 10px;
position: relative;
}
.option-remove {
position: absolute;
top: 5px;
right: 5px;
background: none;
border: none;
color: var(--danger);
cursor: pointer;
font-size: 16px;
}
.option-handle {
cursor: move;
color: var(--secondary);
margin-right: 8px;
}
.form-tabs {
display: flex;
border-bottom: 1px solid var(--border-color);
margin-bottom: 20px;
}
.form-tab {
padding: 10px 15px;
cursor: pointer;
border-bottom: 2px solid transparent;
}
.form-tab.active {
border-bottom-color: var(--primary);
color: var(--primary);
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.dropzone {
border: 2px dashed var(--border-color);
border-radius: var(--radius);
padding: 20px;
text-align: center;
color: var(--secondary);
transition: all 0.2s;
}
.dropzone.drag-over {
background-color: rgba(78, 115, 223, 0.1);
border-color: var(--primary);
}
/* Responsive */
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
.card {
min-height: 100px;
width: 100%;
background-color: white;
box-shadow: var(--shadow);
border-radius: var(--radius);
margin-bottom: 20px;
}
.card-header {
padding: 15px;
border-bottom: 1px solid var(--border-color);
font-weight: 600;
}
.card-body {
padding: 15px;
}
.alert {
padding: 12px 15px;
border-radius: var(--radius);
margin-bottom: 15px;
}
.alert-success {
background-color: rgba(28, 200, 138, 0.1);
border-left: 4px solid var(--success);
color: #169b6b;
}
.sortable-ghost {
opacity: 0.4;
background-color: var(--primary-light);
}
.empty-form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 300px;
color: var(--secondary);
border: 2px dashed var(--border-color);
border-radius: var(--radius);
}
.empty-form i {
font-size: 48px;
margin-bottom: 15px;
opacity: 0.5;
}
.hidden {
display: none;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
</head>
<body>
<div class="container">
<div class="sidebar">
<div class="panel">
<div class="panel-header">
<span><i class="fas fa-th-large"></i> 可用组件</span>
</div>
<div class="panel-content">
<div id="types-list"></div>
</div>
</div>
<div class="panel">
<div class="panel-header">
<span><i class="fas fa-cog"></i> 操作</span>
</div>
<div class="panel-content">
<button id="export-btn" class="btn btn-success btn-block" style="width:100%;">
<i class="fas fa-download"></i> 导出 JSON
</button>
<div id="export-success" class="alert alert-success hidden" style="margin-top: 10px;">
<i class="fas fa-check-circle"></i> 导出成功！
</div>
</div>
</div>
</div>
<div id="form-container" class="panel">
<div class="form-header">
<h2><i class="fas fa-edit"></i> 表单设计</h2>
<div>
<button id="preview-btn" class="btn btn-info">
<i class="fas fa-eye"></i> 预览
</button>
</div>
</div>
<div id="form-list" class="dropzone"></div>
<div class="form-footer">
<button id="clear-btn" class="btn btn-danger">
<i class="fas fa-trash"></i> 清空表单
</button>
</div>
</div>
</div>
<!-- 编辑模态框 -->
<div id="edit-modal" class="modal-backdrop hidden">
<div class="modal">
<div class="modal-header">
<h3 class="modal-title"><i class="fas fa-edit"></i> <span id="edit-type-name"></span></h3>
<button class="modal-close" id="close-modal">×</button>
</div>
<div class="modal-body">
<div class="form-tabs">
<div class="form-tab active" data-tab="basic">基本属性</div>
<div class="form-tab" data-tab="options">选项设置</div>
<div class="form-tab" data-tab="advanced">高级设置</div>
</div>
<form id="edit-form">
<div id="tab-basic" class="tab-content active"></div>
<div id="tab-options" class="tab-content"></div>
<div id="tab-advanced" class="tab-content"></div>
</form>
</div>
<div class="modal-footer">
<button id="cancel-btn" class="btn btn-secondary">取消</button>
<button id="save-btn" class="btn btn-primary">保存</button>
</div>
</div>
</div>
<!-- 预览模态框 -->
<div id="preview-modal" class="modal-backdrop hidden">
<div class="modal">
<div class="modal-header">
<h3 class="modal-title"><i class="fas fa-eye"></i> 表单预览</h3>
<button class="modal-close" id="close-preview">×</button>
</div>
<div class="modal-body">
<div id="preview-content"></div>
</div>
<div class="modal-footer">
<button id="preview-close-btn" class="btn btn-primary">关闭</button>
</div>
</div>
</div>
<script>
// 初始 JSON 数据
const initialJson = [
{"type": "cardselect", "name": "name212", "showname": "主播", "value": "", "isshow": false, "step": 1, "cwidth": 120, "cheight": 160, "mode": "video", "options": [{"img": "//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "video": "//repo.bfw.wiki/bfwrepo/video/62298b326cc3a.mp4", "text": "梅梅", "value": "梅梅"}, {"img": "//repo.bfw.wiki/bfwrepo/image/5d6539c1971b8.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "text": "新闻-非常", "video": "//repo.bfw.wiki/bfwrepo/video/62298b326cc3a.mp4", "value": "新闻-非常"}], "placeholder": "请输入", "relationshow": true},
{"type": "cardselect", "name": "name16", "showname": "主播", "value": "", "isshow": false, "step": 1, "cwidth": 60, "cheight": 100, "mode": "img", "options": [{"img": "//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "text": "梅梅", "value": "梅梅"}, {"img": "//repo.bfw.wiki/bfwrepo/image/5d6539c1971b8.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "text": "新闻-非常", "value": "新闻-非常"}, {"img": "//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "text": "棋11", "value": "棋11"}, {"img": "//repo.bfw.wiki/bfwrepo/image/5d6539c1971b8.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "text": "11棋222", "value": "棋1www1"}, {"img": "//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "text": "棋31111", "value": "棋1323231"}, {"img": "//repo.bfw.wiki/bfwrepo/image/5d6539c1971b8.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "text": "棋222", "value": "33棋11"}, {"img": "//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "text": "棋22123111", "value": "32323棋11"}, {"img": "//repo.bfw.wiki/bfwrepo/image/5d6539c1971b8.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90", "text": "2棋222322", "value": "棋22323211"}], "placeholder": "请输入", "relationshow": true},
{"type": "singleuploadimg", "name": "name1", "showname": "单张照片", "value": "", "showtitle": true, "refimg": "https://repo.bfw.wiki/bfwrepo/image/5e0e93f4b010e.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_100,/quality,q_90", "danwei": "", "step": 1, "fromsource": ["album", "camera"], "sizetype": ["original", "compressed"], "placeholder": "请上传你的图像", "relationshow": true, "require": true},
{"type": "number", "name": "name2221", "showname": "数字输入", "value": "", "pretxt": "", "showtitle": true, "danwei": "", "step": 1, "stepnum": 4, "maxlen": 10, "placeholder": "请上传你的图像", "relationshow": true, "require": true},
{"type": "slider", "name": "name111", "showname": "滑竿", "value": 100, "showtitle": true, "danwei": "", "step": 1, "blocksize": 40, "stepnum": 11, "minnum": 1, "maxnum": 211, "relationshow": true, "require": true},
{"type": "imgmaskeditor", "name": "name2", "showname": "遮罩张片", "value": "", "showtitle": true, "danwei": "", "refimg": "https://repo.bfw.wiki/bfwrepo/image/5e0e93f4b010e.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_100,/quality,q_90", "step": 1, "fromsource": ["album", "camera"], "sizetype": ["original", "compressed"], "placeholder": "点击选择图片", "noticestr": "涂抹需要修改的区域", "relations.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0