什麼都不說，先上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.$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'
}
}
}複製程式碼今天就分享到這裡啦～～