什么都不说，先上demo
github地址：github.com/qiuyaofan/i…
网站在线地址：qiuyaofan.github.io/ishowPage
今年年初，开始断断续续打磨自己的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：www.swiper.com.cn/api/index.h…
饿了么element：element.eleme.io/#/zh-CN/com…
参考的开源架子：github.com/PanJiaChen/…
开发思路
编辑器最终生成的是json配置，手机端通过json配置渲染出相应的样式，动画等。
mock.js
目前编辑器是用mock实现模拟接口，如果需要换回自己的接口
1.去除config.js的mock调用
2.修改utils/fetch.js代码
//mock.js
resolve(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.组件间调用
//子组件调用
<main-editor ref="chileComponentName"></main-editor>
层级少可以使用this.$refs.chileComponentName.method
层级多借助bus.js或者vuex
//父组件调用
this.$parent.method
// 当前父元素
this.$el3.element验证的坑
经常加了type="number"报错，然后搜到答案v-model.number="",然后发现 11.ee居然验证通过？!
其实是v-model.number会自动把11.ee转为11去验证
解决办法：
<el-form-item label="手机号码" class="mb20 is-required" prop="mobile">
<el-input v-model.number="mobile" :maxlength="11"></el-input>
</el-form-item>
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上传七牛
<el-upload action="http://up-z1.qiniu.com/" :data="uploadForm" list-type="picture-card"
:file-list="fileList"
:on-preview="preview"
:on-remove="remove"
:before-upload="beforeUpload"
name="file"
:on-change="upload"
:thumbnail-mode="true"
:on-success="handleSuccess">
</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时
<div :style="{ 'background-image': 'url(' + imageUrl + ')' }"> </div>
2.添加数组到style
<div :style="[textJson,animateJson]"></div>
//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'
}
}
}今天就分享到这里啦～～
