vue應(yīng)用產(chǎn)品之iShow H5編輯器

W_BinaryTree 發(fā)布于2019-08-21 16:25 / 2828人閱讀

摘要：地址文檔網(wǎng)站在線地址今年年初，開始斷斷續(xù)續(xù)打磨自己的編輯器，到現(xiàn)在也有半年有余。目前是版本，后續(xù)會(huì)不斷完善，也歡迎大家貢獻(xiàn)自己的想法，共同進(jìn)步。

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

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

網(wǎng)站在線地址：https://qiuyaofan.github.io/ishowPage

今年年初，開始斷斷續(xù)續(xù)打磨自己的vue編輯器，到現(xiàn)在也有半年有余。目前是ishow1.0版本，后續(xù)會(huì)不斷完善，也歡迎大家貢獻(xiàn)自己的想法，共同進(jìn)步。如果喜歡這個(gè)項(xiàng)目，記得star哦～

什么都不說，先上圖

ishow的界面如下所示：

json渲染的手機(jī)端示例（iphone6為例）

ishow編輯器的主要功能如下：

ishow v1.0功能列表
一：字體編輯
1.普通樣式：背景顏色，文字顏色，字體，對(duì)齊，透明度，邊距，行高，大小，加粗，傾斜，下劃線，清除格式
2.邊框樣式：寬度，顏色，類型，圓角
3.陰影樣式：陰影顏色，大小，半徑，方向
4.點(diǎn)擊可修改文字，拖拽改變位置

二：圖片編輯
基本編輯：參考字體編輯
添加圖片，替換圖片
拉伸改變大小，旋轉(zhuǎn)
上傳圖片
圖片選擇彈層有：預(yù)覽，裁切（后臺(tái)未接），選擇，刪除等功能

三：動(dòng)畫效果
打字機(jī)，漸變，淡入淡出，旋轉(zhuǎn)，縮放等，動(dòng)畫種類參考易企秀
時(shí)間，延時(shí)，添加動(dòng)畫，預(yù)覽動(dòng)畫，清除動(dòng)畫
多個(gè)動(dòng)畫
次數(shù)，循環(huán)（1.0暫不實(shí)現(xiàn)）

四：左側(cè)頁面總預(yù)覽
添加新一頁，刪除，排序（1.0暫不實(shí)現(xiàn)）

五：鍵盤操作
左右鍵移動(dòng)元素
刪除鍵刪除選中元素
撤銷ctrl+z(最多緩存40個(gè)操作)

六：層級(jí)調(diào)整（還需完善優(yōu)化）

七：表單配置添加
目前支持表單類型：輸入框，單選，多選，下拉，按鈕
支持添加驗(yàn)證

八：h5提交配置
標(biāo)題，封面等


九：保存，發(fā)布（模版，h5 json）


十：多媒體
背景添加
音頻添加
視頻添加（1.0暫不實(shí)現(xiàn)）


十一：模版管理（1.0暫不實(shí)現(xiàn)，需要后臺(tái)配合）
編輯模版，搜索模版

十二：手機(jī)端渲染
根據(jù)json完成動(dòng)畫播放，翻頁，音頻播放，屏幕適配等
表單提交后臺(tái)（未實(shí)現(xiàn)）

ishow調(diào)用的外部插件

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

開發(fā)思路

編輯器最終生成的是json配置，手機(jī)端通過json配置渲染出相應(yīng)的樣式，動(dòng)畫等。

mock.js

目前編輯器是用mock實(shí)現(xiàn)模擬接口，如果需要換回自己的接口

1.去除config.js的mock調(diào)用

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
                    },
                    //動(dòng)畫類型，支持多動(dòng)畫
                    "animate": [
                        {
                            "animationName": "fadeIn",
                            "animationDuration": 2,
                            "animationTimingFunction": "ease",
                            "animationDelay": 0.4,
                            "animationFillMode": "both",
                            "animationPlayState": "initial",
                            "isOut": false
                        }
                    ],
                    "id": 1501745923909,
                    //層級(jí)
                    "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開發(fā)的部分經(jīng)驗(yàn)總結(jié)

使用vue以來遇到的一些問題及解決辦法，分享給大家，希望對(duì)你有幫助

1.element date組件

報(bào)錯(cuò)內(nèi)容：TypeError: value.getTime is not a function

原理：插件生成和默認(rèn)值需要是Fri Sep 08 2017 16:25:00 GMT+0800 (CST)這種格式，但項(xiàng)目中通常是YYYY-MM-DD hh:mm:ss格式，所以報(bào)錯(cuò).

解決辦法：

后臺(tái)修改存儲(chǔ)類型，或者

//提交時(shí)
momentChange(date) {
    return date?this.moment(date).format("YYYY-MM-DD"):"";
},
//獲取默認(rèn)值回填前
dateChange(date){
  return date?new Date(date):"";
}

2.組件間調(diào)用

//子組件調(diào)用

層級(jí)少可以使用this.$refs.chileComponentName.method

層級(jí)多借助bus.js或者vuex

//父組件調(diào)用
this.$parent.method

// 當(dāng)前父元素
this.$el

3.element驗(yàn)證的坑

經(jīng)常加了type="number"報(bào)錯(cuò)，然后搜到答案v-model.number="",然后發(fā)現(xiàn) 11.ee居然驗(yàn)證通過？!
其實(shí)是v-model.number會(huì)自動(dòng)把11.ee轉(zhuǎn)為11去驗(yàn)證

解決辦法：


   


data() {
    let validateMobile = (rule, value, callback) => {
       if (!value||(value + "").length !== 11) {
         callback(new Error("手機(jī)號(hào)碼必須為11位純數(shù)字"));
       } else {
         callback();
       }
    };
    return {
        mobile:"",
        rules: {
             mobile: [
               {validator: validateMobile, trigger: "blur"}
            ]
        }
    }
}

4.通過el-upload上傳七牛




//獲取token接口函數(shù)
import {getUploadToken} from "api";
method:{
   beforeUpload(file) {
       //拿到token
       return getUploadToken().then(response => {
           //后臺(tái)根據(jù)七牛的密鑰生成的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時(shí)
 

2.添加數(shù)組到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"
       }
    }
}

今天就分享到這里啦～～