From d49b2230590482d578dfe238ae61149affd9de18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=A5=A5=E6=96=AF?= <9068149@qq.com> Date: Fri, 7 Jan 2022 18:29:27 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E9=A2=84=E8=A7=88?= =?UTF-8?q?=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 11 +- src/components/headerTop/index.vue | 92 +++++++++++++++ src/components/phoneBottom/index.vue | 35 +----- src/components/realTimeView/index.vue | 47 ++++++++ src/layout/home/index.vue | 158 +++++++------------------- 5 files changed, 188 insertions(+), 155 deletions(-) create mode 100644 src/components/headerTop/index.vue create mode 100644 src/components/realTimeView/index.vue diff --git a/README.md b/README.md index b5e9873..99a4b7a 100644 --- a/README.md +++ b/README.md @@ -4,17 +4,16 @@ 基于 vue 可视化拖拽编辑，页面生成工具。提升前端开发效率，可集成至移动端项目作为通过定义 JSON 直接生成 UI 界面。 - 文档地址：[https://was666.gitee.io/as-editor-doc](https://was666.gitee.io/as-editor-doc) 在线体验：[http://was666.gitee.io/as-editor](http://was666.gitee.io/as-editor) #### 安装教程 -1. npm install （安装 node_modules 模块） +1. npm install （安装 node_modules 模块） 2. npm run serve （运行） 3. npm run build （打包） -4. npm update (用于更新包到基于规范范围的最新版本) +4. npm update (用于更新包到基于规范范围的最新版本) #### 使用说明 @@ -24,12 +23,12 @@ ![步骤2](https://images.gitee.com/uploads/images/2021/1027/112939_e466bef2_5546746.png 'image2.png') ![步骤3](https://images.gitee.com/uploads/images/2021/1027/112950_60be2a1a_5546746.png 'image3.png') ![步骤4](https://images.gitee.com/uploads/images/2021/1027/113000_117378e7_5546746.png 'image4.png') -![步骤5](https://images.gitee.com/uploads/images/2021/1101/173304_1e88f8bb_5546746.png "image5.png") -![步骤6](https://images.gitee.com/uploads/images/2021/1101/173318_fee90ec7_5546746.png "image6.png") +![步骤5](https://images.gitee.com/uploads/images/2021/1101/173304_1e88f8bb_5546746.png 'image5.png') +![步骤6](https://images.gitee.com/uploads/images/2021/1101/173318_fee90ec7_5546746.png 'image6.png') ##### 自定义组件可以看： -```js +``` src / layout / home / index.vue // 编辑页面文件 src / components / sliderassembly / index.vue // 左侧组件大全文件 src / components / componentscom // 左侧组件目录 diff --git a/src/components/headerTop/index.vue b/src/components/headerTop/index.vue new file mode 100644 index 0000000..2857445 --- /dev/null +++ b/src/components/headerTop/index.vue @@ -0,0 +1,92 @@ + + + + + diff --git a/src/components/phoneBottom/index.vue b/src/components/phoneBottom/index.vue index c123b5b..7a43e9f 100644 --- a/src/components/phoneBottom/index.vue +++ b/src/components/phoneBottom/index.vue @@ -1,18 +1,14 @@ - diff --git a/src/components/realTimeView/index.vue b/src/components/realTimeView/index.vue new file mode 100644 index 0000000..f7123d0 --- /dev/null +++ b/src/components/realTimeView/index.vue @@ -0,0 +1,47 @@ + + + + + diff --git a/src/layout/home/index.vue b/src/layout/home/index.vue index d16f522..13c953b 100644 --- a/src/layout/home/index.vue +++ b/src/layout/home/index.vue @@ -17,10 +17,18 @@ 重置 + 预览 查看JSON - 导入JSON + 导入JSON 导出JSON - + @@ -35,36 +43,10 @@
- - -
- -
- -
- -
- {{ pageSetup.name }} -
- -
- 个人中心 -
-
+ +
iPhone 8手机高度
- + @@ -144,18 +126,24 @@
- - - - - + +
+ @@ -163,7 +151,9 @@ import utils from 'utils/index' // 方法 import componentProperties from '@/utils/componentProperties' // 组件数据 import sliderassembly from 'components/sliderassembly' // 左侧组件大全 +import headerTop from 'components/headerTop' // 手机底部 import phoneBottom from 'components/phoneBottom' // 手机底部 +import realTimeView from 'components/realTimeView' // 预览组件 import html2canvas from 'html2canvas' // 生成图片 import FileSaver from 'file-saver' // 导入or导出JSON @@ -228,6 +218,9 @@ export default { inject: ['reload'], data() { return { + realTimeView: { + show: false, // 是否显示预览 + }, id: null, //当前页面 deleShow: true, //删除标签显示 index: '', //当前选中的index @@ -237,15 +230,11 @@ export default { // 页面设置属性 name: '页面标题', //页面名称 details: '', //页面描述 - bgColor: 'rgba(249, 249, 249, 10)', //背景颜色 - bottomLogo: { - isShowBootom: false, - botLogo: '', - }, // 底部logo isPerson: false, // 是否显示个人中心 isBack: true, // 是否返回按钮 - titleHeight: 35, - bgImg: '', + titleHeight: 35, // 高度 + bgColor: 'rgba(249, 249, 249, 10)', //背景颜色 + bgImg: '', // 背景图片 }, pageComponents: [], //页面组件 offsetY: 0, //记录上一次距离父元素高度 @@ -255,8 +244,8 @@ export default { }, mounted() { - this.pageSetup.name = '页面标题' - this.currentproperties = this.pageSetup + this.pageSetup.name = '页面标题' + this.currentproperties = this.pageSetup }, methods: { @@ -282,15 +271,6 @@ export default { callback: () => {}, } ) - console.log( - { - id: this.id, - name: this.pageSetup.name, - templateJson: this.pageSetup, - component: this.pageComponents, - }, - '----------------查看JSON' - ) }, /** * 保存 @@ -332,7 +312,7 @@ export default { let url = canvas.toDataURL('image/png') const formData = new FormData() formData.append('base64File', url) - console.log(formData,'--------------页面图片formData') + console.log(formData, '--------------页面图片formData') loading.close() }) }, @@ -634,7 +614,7 @@ export default { // this.result为读取到的json字符串，需转成json对象 let ImportJSON = JSON.parse(this.result) // 检测是否导入成功 - console.log(ImportJSON,'-----------------导入成功') + console.log(ImportJSON, '-----------------导入成功') // 导入JSON数据 _this.id = ImportJSON.id _this.pageSetup = JSON.parse(ImportJSON.templateJson) @@ -645,7 +625,6 @@ export default { watch: { /* 监听右侧属性设置切换 */ - rightcom(newval) { if (newval === 'decorate') { utils.forEach(this.pageComponents, (res) => { @@ -667,6 +646,8 @@ export default { }, components: { + headerTop, + realTimeView, decorate, componenmanagement, phoneBottom, @@ -851,61 +832,6 @@ export default { line-height: 21px; } - /* 头部 */ - .headerTop { - height: 35px; - width: 100%; - background: #fff; - display: flex; - padding: 0 5px; - justify-content: space-between; - align-items: center; - cursor: pointer; - border-bottom: 1px solid #f7f8fa; - position: relative; - /* 左边 */ - .lef { - position: absolute; - left: 18px; - top: 50%; - transform: translateY(-50%); - /* 图标 */ - span { - color: #000; - font-weight: 400; - font-size: 12px; - } - } - .header-title { - width: 100%; - text-align: center; - font-size: 14px; - line-height: 35px; - color: #333333; - } - /* 右边 */ - .rig { - // display: flex; - // align-items: center; - // height: 100%; - position: absolute; - right: 18px; - top: 50%; - transform: translateY(-50%); - /* 搜索图标 */ - i { - font-size: 18px; - margin: 0 7px 5px; - } - - /* 文字 */ - span { - margin: 0 7px; - font-size: 12px; - } - } - } - /* 状态栏 */ .statusBar { width: 100%;