vue应用产品之iShow H5编辑器

github地址：https://github.com/qiuyaofan/iShow

文档：https://qiuyaofan.github.io/iShow/

网站在线地址：https://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：http://www.swiper.com.cn/api/index.html

饿了么element：http://element.eleme.io/#/zh-CN/component/installation

参考的开源架子：https://github.com/PanJiaChen/vue-element-admin

开发思路

编辑器最终生成的是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.$el

3.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'
       }
    }
}

今天就分享到这里啦～～