From 4384b16ba9f693be3aee2d8f450a07eb13c8d630 Mon Sep 17 00:00:00 2001 From: liyu Date: Tue, 21 Jul 2020 18:44:04 +0800 Subject: [PATCH] =?UTF-8?q?update=EF=BC=9A=E5=A2=9E=E5=8A=A0=E5=86=85?= =?UTF-8?q?=E5=AE=B9=E7=BC=96=E8=BE=91=E5=8C=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/plugin/index.js | 19 ++++ src/plugin/text/index.js | 8 ++ src/plugin/text/src/index.vue | 28 ++++++ src/store/getters.js | 4 +- src/store/modules/editor.js | 50 +++++++++- src/utils/index.js | 17 ++++ src/views/h5/DataModel.js | 107 +++++++++++++++++++++ src/views/h5/add-data.vue | 15 ++- src/views/h5/components/component-libs.vue | 41 ++++++-- src/views/h5/components/editor-panel.vue | 41 ++++++++ src/views/h5/ele-config.js | 3 +- 11 files changed, 316 insertions(+), 17 deletions(-) create mode 100644 src/plugin/index.js create mode 100644 src/plugin/text/index.js create mode 100644 src/plugin/text/src/index.vue create mode 100644 src/views/h5/DataModel.js create mode 100644 src/views/h5/components/editor-panel.vue diff --git a/src/plugin/index.js b/src/plugin/index.js new file mode 100644 index 00000000..d90a36ab --- /dev/null +++ b/src/plugin/index.js @@ -0,0 +1,19 @@ +/* +自定义组件插件化，提供对外的按需加载 +处理插件的入口 +*/ + +import Text from './text' + +const components = [ + Text +] +// 定义全局变量 +const rigester_component = {} +components.forEach(item => { + rigester_component[item.name] = item +}) + +export { + rigester_component +} diff --git a/src/plugin/text/index.js b/src/plugin/text/index.js new file mode 100644 index 00000000..95b65095 --- /dev/null +++ b/src/plugin/text/index.js @@ -0,0 +1,8 @@ +// 注册install 方法可以实现插件引用 + +import Component from './src/index' +Component.install = Vue => { + Vue.component(Component.name, Component) +} + +export default Component diff --git a/src/plugin/text/src/index.vue b/src/plugin/text/src/index.vue new file mode 100644 index 00000000..44c48584 --- /dev/null +++ b/src/plugin/text/src/index.vue @@ -0,0 +1,28 @@ + + + + + diff --git a/src/store/getters.js b/src/store/getters.js index 0ea9e697..d1bc41ec 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -1,3 +1,4 @@ + const getters = { sidebar: state => state.app.sidebar, size: state => state.app.size, @@ -10,7 +11,6 @@ const getters = { introduction: state => state.user.introduction, roles: state => state.user.roles, permission_routes: state => state.permission.routes, - errorLogs: state => state.errorLog.logs, - pageMode: state => state.editor.pageMode + errorLogs: state => state.errorLog.logs } export default getters diff --git a/src/store/modules/editor.js b/src/store/modules/editor.js index 7d9ed710..91745c3b 100644 --- a/src/store/modules/editor.js +++ b/src/store/modules/editor.js @@ -1,3 +1,4 @@ +import editorProjectConfig from '@/views/h5/ele-config' /* 新建/编辑页面数据 @@ -5,10 +6,57 @@ const state = { projectData: { pageMode: '' + }, + activePageUUID: '', // 正在编辑页面的uuid + activeElementUUID: '' // 选中元素的uuid +} + +const mutations = { + /* + 画板添加元素 + + */ + addElement(state, elData) { + // 找到当前活动页 + const index = state.projectData.pages.findIndex(item => { return item.uuid === state.activePageUUID }) + state.projectData.pages[index].elements.push(elData) } } +const actions = { + /* + 添加组件元素 + */ + addElement({ commit }, elData) { + const activePage = getters.activePage(state) + // 每添加一个元素，获取其数据模型并修改层叠属性 + // 数据模型 是基于基础模版和元素具体类型 + const data = editorProjectConfig.getElementConfig(elData, { zIndex: activePage.elements.length + 1 }) + commit('addElement', data) + // commit('setActiveElementUUID', data.uuid) + // commit('addHistoryCache') + } +} + +const getters = { + // 当前选中的页面 + activePage: state => { + if (!state.projectData.pages || !state.activePageUUID) { + return { + commonStyle: {}, + config: {} + } + } + return state.projectData.pages.find(item => { item.uuid === state.activePageUUID }) + }, + // 当前页面模式 + pageMode: state => state.projectData.pageMode +} + export default { namespaced: true, - state + state, + getters, + actions, + mutations } diff --git a/src/utils/index.js b/src/utils/index.js index 2684e3c2..5b73693a 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -345,3 +345,20 @@ export function removeClass(ele, cls) { ele.className = ele.className.replace(reg, ' ') } } + +/** +@returns {String} +生成uuid随机数 +*/ +export function createUUID() { + var d = new Date().getTime() + if (window.performance && typeof window.performance.now === 'function') { + d += performance.now() // use high-precision timer if available + } + var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { + var r = (d + Math.random() * 16) % 16 | 0 + d = Math.floor(d / 16) + return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16) + }) + return uuid +} diff --git a/src/views/h5/DataModel.js b/src/views/h5/DataModel.js new file mode 100644 index 00000000..b9a6e286 --- /dev/null +++ b/src/views/h5/DataModel.js @@ -0,0 +1,107 @@ +/* +设计页面的数据结构 +单个组件元素 +单个页面 +单个项目 +*/ + +import createUUID from '@/utils/index.js' + +const elementConfig = { + elName: '', + animations: [], + // 对于一个元素会关注哪些定位属性 + commonStyle: { + position: 'absolute', + width: 30, + height: 30, + top: 200, + left: 0, + rotate: 0, + paddingTop: 0, + paddingLeft: 0, + paddingRight: 0, + paddingBottom: 0, + marginTop: 0, + marginLeft: 0, + marginRight: 0, + marginBottom: 0, + borderWidth: 0, + borderColor: '', + borderStyle: 'solid', + borderRadius: 0, + boxShadow: '', + fontSize: 16, + fontWeight: 500, + lineHeight: 1.4, + letterSpacing: 0, + textAlign: 'center', + color: '#000000', + backgroundColor: '', + backgroundImage: '', + backgroundSize: 'cover', + opacity: 1, + zIndex: 1 + }, + events: [], + propsValue: {} // 组件绑定属性 +} + +const pageConfig = { + name: '', + elements: [], + commonStyle: { + backgroundColor: '', + backgroundImage: '', + backgroundSize: 'cover' + }, + config: {} +} + +const projectConfig = { + name: '', + title: 'ccccc', + description: '', + coverImage: '', + author: '', + pages: [], + script: '', + width: 200, + height: 200 +} + +// 获取组件的数据对象 +const getElementConfig = function(element, extendStyle = {}) { + const elementData = JSON.parse(JSON.stringify(element)) + // const type = elementData.valueType || 'String' + // 字典类型 + // const dict = { + // 'String': '', + // 'Array': [], + // 'Object': {}, + // 'Boolean': false, + // 'Number': 0 + // } + // 复制数据模版 + const elementConfigData = JSON.parse(JSON.stringify(elementConfig)) + // 在通用配置上根据组件名具体添加 + const config = { + uuid: createUUID(), + ...elementConfigData, + elName: elementData.elName, + propsvalue: JSON.parse(JSON.stringify(elementData.needProps)) + } + // 处理样式 + // 样式来源有三种，可以实现松耦合，模版样式 | 组件自定义样式 | 拓展样式 + config.commonStyle = Object.assign({}, config.commonStyle, elementData.defaultStyle, extendStyle) + // value,valueType暂时不知用处 + config.isForm = !!element.isForm + return config +} + +export default { + elementConfig, + pageConfig, + projectConfig, + getElementConfig +} diff --git a/src/views/h5/add-data.vue b/src/views/h5/add-data.vue index 590f0481..2e815c07 100644 --- a/src/views/h5/add-data.vue +++ b/src/views/h5/add-data.vue @@ -23,7 +23,14 @@ -
+
+ +
+ +
+ +
+
@@ -40,11 +47,13 @@ diff --git a/src/views/h5/ele-config.js b/src/views/h5/ele-config.js index 80e0e1b3..edc6051a 100644 --- a/src/views/h5/ele-config.js +++ b/src/views/h5/ele-config.js @@ -1,5 +1,6 @@ /* 有关组件的一些配置文件,也可以写到数据库从接口来取 +这里是组件的通用描述，具体信息会在datamodel里被再次修改 */ export default [ { @@ -8,7 +9,7 @@ export default [ { elName: 'qk-text', title: '文字', - icon: 'iconfont iconwenben', + icon: 'el-icon-edit', // 每个组件设置props来展示哪些显示哪些编辑项 valueType: '', // 标识数据类型，用于表单组件 defaultStyle: {