vue编辑器网页店铺装修快速开发模板 npm版 vue jsonschema form

本编辑器提取于开源项目：Vue JSON Schema Form
其中的编辑器部分
提取出来是为了方便二次开发使用及学习
原作者：柳俊
官方网站：https://vue-json-schema-form.lljj.me/

源码地址：https://github.com/yongjiu8/vue-editor

主要目录结构：
├─router vue路由目录
│ └─routes
└─views
└─editor
├─assets 资源目录
│ └─img
├─common 公用的
├─components vue组件
│ └─skeleton
├─config 编辑器的原始数据js 打开页面是根据原始数据加载页面模块重要
├─fieldComponents
│ └─linkImgField 覆盖默认field 做个性商品选择和链接输入
├─viewComponents PC端的组件重要
│ ├─AllGoodsList
│ │ └─component
│ ├─CarouselImg
│ ├─CategoryGoods
│ ├─Coupon
│ │ └─component
│ ├─FlashSaleGoodsList
│ ├─MultipleImg1_3
│ │ └─component
│ ├─MultipleImg2_3
│ ├─MultipleImg5
│ ├─RecommendedGoodsList
│ │ └─component
│ ├─Text
│ └─_commonConfig
│ ├─error
│ └─ui
└─viewComponentsM 移动端的组件重要
├─CarouselImg
├─CategoryList
├─RecommendGoods
├─Test
└─Text

主要注意红色部分的目录

现在开始一个简单示例：
我们新添加一个PC端的textGride示例
我们在pc的组件目录viewComponents 创建文件夹 textGride

然后再文件夹下创建我们布局组件：View.vue
写一个简单网格的布局这是我们组件的页面部分
根据自己的需求，写成什么样子都由自己决定
这里只是简单举个实例

注意这个组件的名字：TextGrideView 后边一定要加上View 否则编辑器在注册组件的时候将找不到组件

<template><div class="box-home"><divv-for="(it, index) in formData.texts":key="index"class="item">{{ index + '：' + it }}</div></div>
</template><script>
export default {name: 'TextGrideView',props: {formData: {type: Object,default: () => ({})}}
};
</script><style lang="css" scoped>
.box-home {width: 100%;height: 300px;display: flex;flex-direction: row;flex-wrap: wrap;justify-items: center;justify-content: space-evenly;align-items: center;align-content: space-evenly;
}
.item {width: 26%;height: 50px;text-align: center;line-height: 50px;vertical-align: middle;font-size: 30px;color: #999999;border: 1px solid orange;
}
</style>

然后在创建：propsSchema.json
这个是用于生成表单数据的json
就是这部分：

{"$schema": "http://json-schema.org/draft-07/schema#","id": "TextGride","type": "object","properties": {"texts": {"title": "配置多文本","description": "配置多文本，最多10个","type": "array","minItems": 1,"maxItems": 10,"items": {"title": "文本配置","type": "string","default": "默认"},"required": ["items"]}}
}

这里的具体配置意思请看官方指南：https://vue-json-schema-form.lljj.me/zh/guide/
总之这个配置就是为了生成表单

然后再创建一个 uiSchema.js
这个用来配置我们生成表单界面的配置

export default {texts: {'ui:options': {showIndexNumber: true}}
};

我这里只配置了显示索引号就是图中箭头所指部分
更多配置请看官方指南：https://vue-json-schema-form.lljj.me/zh/guide/basic-config.html#ui-schema

最后创建 index.js
用于暴露出我们的view 和数据

import propsSchema from './propsSchema.json';
import uiSchema from './uiSchema.js';const View = () => import('./View.vue');export default {View,propsSchema,uiSchema
};

这里注意暴露出的 View propsSchema uiSchema 名称不能改变否则编辑器将读取不到数据报错

到这里我们的组件就编写完毕了
目录结构图示：

最后我们要把写好组件添加到组件区
就是图片所示区域

这里我们只需要两步即可：
1.编辑config下的tools.js
先导入我们的组件

// 多文本
import textGride from '../viewComponents/TextGride';

2.然后在下面的数组数据里面加上我们组件的配置：

title：组件的标题 maxNum：最多能在编辑器里面放的个数 icon：elementUi的图标 componentPack：我们写的组件

运行之后我们就能看到：
然后我们把组件拖到编辑器里面可以正常使用大功告成

最后我们再来看一下提交的数据正不正确：

ok一切正常
以上只是简单的实例
更复杂的操作，请阅读官方指南
官方QQ交流群：146845780

vue编辑器网页店铺装修快速开发模板 npm版 vue jsonschema form相关推荐

html5快速开发模板生成器,推荐一个基于Vue 的 H5 快速开发模板
本项目以基于 vue-cli4 和 Vant-ui 搭建的,进行移动端开发中的一些最佳实践方案模板地址动动你的小手点颗star 样式适配在移动端网页开发时,样式适配始终是一个绕不开的问题.对此目 ...
基于React和SpringBoot的快速开发模板QuickAdmin
经过一段时间的总结和完善,我的管理系统快速开发模板已经基本成型,现在GitHub上开源啦: QuickAdmin QuickAdmin是基于Spring Boot和React.js实现的管理系统开发框 ...
基于PyQt5的快速开发模板系统-Excle数据批量导入及导出表格数据为Excle
基于Python和PyQt5的快速开发模板系统-Excle数据批量导入显示及表格数据导出基于PyQt5按钮控制实现excle数据批量导入及当前表格存在数据的批量导出,可在此基础上进行功能扩展. 1. ...
喜讯！OpenJWeb2.6快速开发平台开源版正式对外发布
OpenJWeb2.6快速开发平台开源版正式对外发布(含源代码) OpenJWeb开发团队为了普及平台的应用,现已正式对外发布开源版本.开源版本下载地址为 http://www.openjweb.co ...
Jeecg-Boot 2.0.0 版本发布，基于Springboot+Vue 前后端分离快速开发平台
Jeecg-Boot 2.0.0 版本发布,前后端分离快速开发平台 Jeecg-Boot项目简介源码下载升级日志 Issues解决 v1.1升级到v2.0不兼容地方系统截图 Jeecg-Boot ...
framework-admin-vue3 管理系统快速开发模板
一.创建基于Vue3.ElementPlus框架.工程化工具Vite进行构建.此模板可用于现代化管理系统的初始开发模板,可节省一些重复性的工程初始化搭建工作. 二.特性使用pnpm作为包下载工具, ...
几款特别好看的springboot快速开发模板
1. SpringBoot_v2: SpringBoot_v2项目是努力打造springboot框架的极致细腻的脚手架.原生纯净,可在线生成controller.mapperxml.dao.serv ...
Vue - 去除控制台“你正在开发模式下运行Vue”的警告
目录 1. 警告内容 2. 解决方案 1. 警告内容调试 Vue 代码时,Console 控制台老是有警告,警告内容文字信息如下: You are running Vue in developme ...
vue lang_推荐一个基于Vue 的 H5 快速开发模板
关注 Vue社区,回复"加群" 加入我们一起学习,天天进步 praise juejin.im/post/5e612534e51d4527017971a2 模板基于 vue-cli4 ...

vue编辑器网页店铺装修快速开发模板 npm版 vue jsonschema form

vue编辑器网页店铺装修快速开发模板 npm版 vue jsonschema form相关推荐

最新文章

热门文章

vue编辑器 网页店铺装修 快速开发模板 npm版 vue jsonschema form

vue编辑器 网页店铺装修 快速开发模板 npm版 vue jsonschema form相关推荐

最新文章

热门文章

vue编辑器网页店铺装修快速开发模板 npm版 vue jsonschema form

vue编辑器网页店铺装修快速开发模板 npm版 vue jsonschema form相关推荐