vue element-ui form-create-designer表单拖拽生成器代码-html代码-BFW代码库

vue element-ui form-create-designer表单拖拽生成器代码

代码语言：html

代码描述：vue element-ui form-create-designer表单拖拽生成器代码，可以根据拖拽表单生成json或者根据json生成表单。

代码标签： vue element form-create-designer 表单拖拽生成 json

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>elementui在线可视化拖拽表单设计器生成器</title>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/element-ui.2.15.1.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/element-ui.2.15.1.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/form-create.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/designer.js"></script>
    <style>
        body{
            padding: 0;
            margin:0;
        }

    ._fc-t-header {
        height: 60px;
        margin: 0 20px;
        position: relative;
        display: flex;
        align-items: center;
        cursor: default;
    }

    ._fc-t-logo {
        height: 26px;
    }

    ._fc-t-name {
        display: inline-block;
        color: rgba(0, 0, 0, 0.8);
        font-size: 20px;
        font-weight: 600;
        margin-left: 5px;
    }

    ._fc-t-menu {
        position: absolute;
        right: 0;
    }

    ._fc-t-menu i {
        font-size: 12px;
    }

    body {
        min-height: 100vh;
        padding: 0;
        margin: 0;
        display: flex !important;
        flex-direction: column !important;
    }

    #app {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    ._fc-copyright {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 0 20px;
        font-size: 16px;
        border-top: 1px solid #ECECEC;
        background-color: #fff;
        cursor: pointer;
    }

    ._fc-t-dialog .CodeMirror {
        height: 450px;
    }

    ._fc-t-dialog .CodeMirror-line {
        line-height: 16px !important;
        font-size: 13px !important;
    }

    .CodeMirror-lint-tooltip {
        z-index: 2021 !important;
    }

    ._fc-t-dialog .el-dialog__body {
        padding: 0px 20px;
    }
    ._fc-b-item{
      display: flex;
    }
    </style>

</head>

<body>
    <div id="app">
        <div class="_fc-t-header">

            <div class="_fc-t-name">form-create-designer</div>
            <div class="_fc-t-menu">
                <el-button size="mini" icon="fc-.........完整代码请登录后点击上方下载按钮下载查看