github地址：
文档：
网站在线地址：
今年年初，开始断断续续打磨自己的vue编辑器，到现在也有半年有余。目前是ishow1.0版本，后续会不断完善，也欢迎大家贡献自己的想法，共同进步。如果喜欢这个项目，记得star哦～
什么都不说，先上图
ishow的界面如下所示：
json渲染的手机端示例（iphone6为例）
ishow编辑器的主要功能如下：
ishow v1.0功能列表一：字体编辑1.普通样式：背景颜色，文字颜色，字体，对齐，透明度，边距，行高，大小，加粗，倾斜，下划线，清除格式2.边框样式：宽度，颜色，类型，圆角3.阴影样式：阴影颜色，大小，半径，方向4.点击可修改文字，拖拽改变位置二：图片编辑基本编辑：参考字体编辑添加图片，替换图片拉伸改变大小，旋转上传图片图片选择弹层有：预览，裁切（后台未接），选择，删除等功能三：动画效果打字机，渐变，淡入淡出，旋转，缩放等，动画种类参考易企秀时间，延时，添加动画，预览动画，清除动画多个动画次数，循环（1.0暂不实现）四：左侧页面总预览添加新一页，删除，排序（1.0暂不实现）五：键盘操作左右键移动元素删除键删除选中元素撤销ctrl+z(最多缓存40个操作)六：层级调整（还需完善优化）七：表单配置添加目前支持表单类型：输入框，单选，多选，下拉，按钮支持添加验证八：h5提交配置标题，封面等九：保存，发布（模版，h5 json）十：多媒体背景添加音频添加视频添加（1.0暂不实现）十一：模版管理（1.0暂不实现，需要后台配合）编辑模版，搜索模版十二：手机端渲染根据json完成动画播放，翻页，音频播放，屏幕适配等表单提交后台（未实现）
ishow调用的外部插件
IUI组件部分
swiper：
饿了么element：
参考的开源架子：
开发思路
编辑器最终生成的是json配置，手机端通过json配置渲染出相应的样式，动画等。
mock.js
目前编辑器是用mock实现模拟接口，如果需要换回自己的接口
1.去除config.js的mock调用
2.修改utils/fetch.js代码
//mock.jsresolve(res);//没有mock// if (res.code === 40001) {// // 登出// store.dispatch('FedLogOut').then(() => {// router.push({ path: '/login' })// });// } else if (res.code !== 200) {// Message({// message: res.msg,// type: 'error',// duration: 5 * 1000// });// reject(res);// } else {// resolve(res);// }注释掉resolve(res);下面的取消注释即可 json格式如下所示
var JSON={ "page":[ { "page": 1, "json": [ { ／*** 控件类型 "1":"text", "2":"img", "3":"textarea", "4":"radio", "5":"checkbox", "6":"select", "7":"button" ***／ "type": 2, "content": "https://img.kxz.com/assets/kxz/fixedInputCover1_20170630/fb7bf5d8-56d6-46ea-a01b-35e6943647da_demo1-4.png", // 位置 "position": { "top": 360, "left": 201 }, "width": 175, "height": 125.2680965147453, //基本样式属性 "text": { "backgroundColor": "rgba(0,0,0,0)", "opacity": 100, "padding": 0, "rotate": 94, "borderWidth": 0, "borderRadius": 0, "borderColor": "rgba(204, 204, 204,1)", "borderStyle": "solid", "shadowColor": "rgba(204, 204, 204,1)", "shadowWidth": 0, "shadowRadius": 10, "shadowDire": 0 }, //动画类型，支持多动画 "animate": [ { "animationName": "fadeIn", "animationDuration": 2, "animationTimingFunction": "ease", "animationDelay": 0.4, "animationFillMode": "both", "animationPlayState": "initial", "isOut": false } ], "id": 1501745923909, //层级 "zIndex": 6 } ], //这一页的背景图片 "bgImage": { "backgroundColor": "", "coord": "", "url": "" } }, ], //配置 "setting": { //背景音乐 "bgMusic": { "url": "ttp://192.168.1.100:8080/uploadfile/3/15/5/8765a93f-351e-4984-8a03-6ef746ea36fd_bg.mp3", "name": "enemy2_down.mp3" } }}; 使用vue+element开发的部分经验总结
使用vue以来遇到的一些问题及解决办法，分享给大家，希望对你有帮助
1.element date组件
报错内容：TypeError: value.getTime is not a function
原理：插件生成和默认值需要是Fri Sep 08 2017 16:25:00 GMT+0800 (CST)这种格式，但项目中通常是YYYY-MM-DD hh:mm:ss格式，所以报错.
解决办法：
后台修改存储类型，或者
//提交时momentChange(date) { return date?this.moment(date).format('YYYY-MM-DD'):'';},//获取默认值回填前dateChange(date){ return date?new Date(date):'';} 2.组件间调用
//子组件调用层级少可以使用this.$refs.chileComponentName.method层级多借助bus.js或者vuex//父组件调用this.$parent.method// 当前父元素this.$el
3.element验证的坑
经常加了type="number"报错，然后搜到答案v-model.number="",然后发现 11.ee居然验证通过？!
其实是v-model.number会自动把11.ee转为11去验证解决办法：
data() { let validateMobile = (rule, value, callback) => { if (!value||(value + '').length !== 11) { callback(new Error('手机号码必须为11位纯数字')); } else { callback(); } }; return { mobile:'', rules: { mobile: [ {validator: validateMobile, trigger: 'blur'} ] } }}
4.通过el-upload上传七牛
//获取token接口函数import {getUploadToken} from 'api';method:{ beforeUpload(file) { //拿到token return getUploadToken().then(response => { //后台根据七牛的密钥生成的token this.uploadForm.token = response.data.token; //我们生成唯一的key this.uploadForm.key = this.createKey(file); //前缀：在线路径的前缀 this.prefix = response.data.prefix; }).catch(err => { console.info(err) }); }, createKey(file) { let curr = this.moment().format('YYYYMMDD').toString(); let prefix = this.moment(file.lastModified).format('HHmmss').toString(); let suffix = file.name; let key = encodeURI(`${curr}/${prefix}_${suffix}`); return key; }, handleSuccess(response, file, fileList) { //拼接成能访问的在线链接 console.info(this.prefix + response.key); }}
5.vue属性
1.添加background-image时2.添加数组到style //data举例data() { return { textJson:{ "backgroundColor": "rgba(0,0,0,0)", "opacity": 100, "padding": 0, "rotate": 0, "borderWidth": 0, "borderRadius": 100, "borderStyle": "solid", "shadowColor": "rgba(204, 204, 204,1)", "shadowWidth": 0, "shadowRadius": 10, "shadowDire": 0, "borderColor": "rgba(204, 204, 204,1)" }, animateJson:{ animationName:'fadeIn' } }}
今天就分享到这里啦～～