vue vjsf通过json配置生成多语言多步骤选项卡表单示例代码-html代码-BFW代码库

代码语言：html

代码描述：vjsf通过vuetify结合materialdesignicons，使用json配置生成多语言多步骤选项卡表单示例代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900'>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/materialdesignicons.4.0.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vuetify.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vjsf.main.css">





</head>

<body>
    <v-app id="app">
        <v-container>
            {{model}}
            <p>valid={{valid}}</p>
            <v-form ref="form" v-model="valid">
                <v-jsf v-model="model" :schema="schema" :options="options" @input="logEvent('input', $event)" @change="logEvent('change', $event)" />
            </v-form>
            <v-layout row class="mt-2">
                <v-spacer></v-spacer>
                <v-btn color="primary" @click="$refs.form.validate()">Validate</v-btn>
            </v-layout>
        </v-container>
    </v-app>

    <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/vuetify.js"></script>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vjsf.main.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vjsf.third-party.js"></script>
    <script>
        const model = {};
        
        
        const options = {
          "locale": "en",
          "formats": {},
          "messages": {} };
        
        
        const schema = {
          "title": "DocumentationTool",
          "type": "object",
          "x-props": {
            "grow": true },
        
          "x-display": "tabs",
          "allOf": [
          {
            "$ref": "#/definitions/Category" },
        
          {
            "$ref": "#/definitions/WritingProcess" },
        
          {
            "$ref": "#/definitions/Examples" },
        
          {
            "$ref": "#/definitions/Tasks" }],
        
        
          "properties": {
            "id": {
              "type": "string",
              "x-display": "hidden" } },
        
        
          "definitions": {
            "Category": {
              "type": "object",
              "title": { "$ref": "#/i18n/~$locale~/categoryTitle" },
              "properties": {
                "name": {
                  "title": { "$ref": "#/i18n/~$locale~/nameTitle" },
                  "type": "string" },
        
                "heading": {
                  "title": { "$ref": "#/i18n/~$locale~/headingTitle" },
                  "type": "string",
                  "description": { "$ref": "#/i18n/~$locale~/headingDescription" } },
        
                "bodyText": {
                  "title": { "$ref": "#/i18n/~$locale~/bodyTextTitle" },
                  "type": "string" },
        
                "startToWrite": {
                  "type": "boolean",
                  "title": { "$ref": "#/i18n/~$locale~/startToWriteTitle" },
                  "default": true,
                  "readOnly": true },
        
                "selectedExamples": {
                  "type": "object",
                  "title": { "$ref": "#/i18n/~$locale~/examplesTitle" },
                  "properties": {
                    "enabled": {
                      "type": "boolean",
                      "x-display": "switch",
                      "title": { "$ref": "#/i18n/~$locale~/examplesEnabledTitle" } },
        
                    "selected": {
                      "x-if": "selectedExamples.enabled",
                      "type": "array",
                      "description": { "$ref": "#/i18n/~$locale~/examplesSelectedDescription" },
                      "x-fromData": "examples",
                      "x-itemTitle": "name",
                      "x-itemKey": "name",
                      "items": {
                        "type": "string" },
        
                      "minItems": 1 } } },
        
        
        
                "selectedTasks": {
                  "type": "object",
                  "title": { "$ref": "#/i18n/~$locale~/tasksTitle" },
                  "properties": {
                    "enabled": {
                      "type": "boolean",
                      "x-display": "switch",
                      "title": { "$ref": "#/i18n/~$locale~/tasksEnabledTitle" } },
        
                    "selected": {
                      "type": "array",
                      "description": { "$ref": "#/i18n/~$locale~/tasksSelectedDescription" },
                      "x-fromData": "tasks",
                      "x-itemTitle": "name",
                      "x-itemKey": "name",
                      "x-if": "selectedTasks.enabled",
                      "items": {
                        "type": "string" },
        
                      "minItems": 1 } } } },
        
        
        
        
              "required": [
              "name",
              "heading",
              "bodyText"] },
        
        
            "Disposition": {
              "type": "object",
              "properties": {
                "id": {
                  "type": "string",
                  "x-display": "hidden" },
        
                "title": {
                  "type": "string",
                  "title": { "$ref": "#/i18n/~$locale~/dispositionTitleTitle" } },
        
                "body": {
                  "type": "string",
                  "title": { "$ref": "#/i18n/~$locale~/dispositionBodyTitle" } },
        
                "image": {
                  "$ref": "#/definitions/DispositionImage" } },
        
        
              "required": [
              "title",
              "body"] },
        
        
            "DispositionImage": {
              "type": "object",
              "properties": {
                "enabled": {
                  "x-display": "switch",
                  "type": "boolean" },
        
                "position": {
                  "x-if": "disposition[0].image.enabled",
                  "type": "string",
                  "enum": ["left", "right"] } },
        
        
              "required": [
              "enabled"] },
        
        
            "CheckList": {
              "title": { "$ref": "#/i18n/~$locale~/checklistTitle" },
              "type": "object",
              "properties": {
.........完整代码请登录后点击上方下载按钮下载查看