vue-form-generator根据json生成表单提交效果代码
代码语言:html
所属分类:表单美化
代码描述:vue-form-generator根据json生成表单提交效果代码
代码标签: vue-form-generator json 生成 表单 提交
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vue-form-generator.vfg.css"> <style> html { font-family: Tahoma; font-size: 14px; } body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; } pre { overflow: auto; } pre .string { color: #885800; } pre .number { color: blue; } pre .boolean { color: magenta; } pre .null { color: red; } pre .key { color: green; } h1 { text-align: center; font-size: 36px; margin-top: 20px; margin-bottom: 10px; font-weight: 500; } fieldset { border: 0; } .panel { margin-bottom: 20px; background-color: #fff; border: 1px solid transparent; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); box-shadow: 0 1px 1px rgba(0, 0, 0, .05); border-color: #ddd; } .panel-heading { color: #333; background-color: #f5f5f5; border-color: #ddd; padding: 10px 15px; border-bottom: 1px solid transparent; border-top-left-radius: 3px; border-top-right-radius: 3px; } .panel-body { padding: 15px; } .field-checklist .wrapper { width: 100%; } </style> </head> <body > <h1 class="text-center">Demo of vue-form-generator</h1> <div class="container" id="app"> <div class="panel panel-default"> <div class="panel-heading">Form</div> <div class="panel-body"> <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator> </div> </div> <div class="panel panel-default"> <div class="panel-heading">Model</div> <div class="panel-body"> <pre v-if="model" v-html="prettyJSON(model)"></pre> </div> </div> <div class="panel panel-default"> <div class="panel-heading">Schema</div> <div class="panel-body"> <pre v-if="model" v-html="prettyJSON(schema)"></pre> </div> </div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue-form-generator.vfg.js"></script> <script > var vm = new Vue({ el: "#app", components: { "vue-form-generator": VueFormGenerator.component }, data() { return { model: { id: 1, name: "John Doe", password: "J0hnD03!x4", age: 35, skills: ["Javascript", "VueJS"], email: "john.doe@gmail.com", status: true }, schema: { fields: [{ type: "input", inputType.........完整代码请登录后点击上方下载按钮下载查看
网友评论0