vue vjsf通过json配置生成多语言多步骤选项卡表单示例代码
代码语言:html
所属分类:表单美化
代码描述:vjsf通过vuetify结合materialdesignicons,使用json配置生成多语言多步骤选项卡表单示例代码
代码标签: vue vuetify 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": {
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0