mirror of
https://gitee.com/was666/as-editor.git
synced 2025-02-23 02:32:53 +08:00
feat: 新增预览功能
This commit is contained in:
王奥斯
parent
3d88c63345
commit
d49b223059
11
README.md
11
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 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
##### 自定义组件可以看：
|
||||
|
||||
```js
|
||||
```
|
||||
src / layout / home / index.vue // 编辑页面文件
|
||||
src / components / sliderassembly / index.vue // 左侧组件大全文件
|
||||
src / components / componentscom // 左侧组件目录
|
||||
|
||||
92
src/components/headerTop/index.vue
Normal file
92
src/components/headerTop/index.vue
Normal file
@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div
|
||||
class="headerTop"
|
||||
:style="{
|
||||
height: pageSetup.titleHeight + 'px',
|
||||
}"
|
||||
>
|
||||
<!-- 左半部分 -->
|
||||
<div class="lef" v-show="pageSetup.isBack">
|
||||
<van-icon name="arrow-left" />
|
||||
</div>
|
||||
<!-- 标题 -->
|
||||
<div
|
||||
class="header-title"
|
||||
:style="{
|
||||
height: pageSetup.titleHeight + 'px',
|
||||
'line-height': pageSetup.titleHeight + 'px',
|
||||
}"
|
||||
>
|
||||
{{ pageSetup.name }}
|
||||
</div>
|
||||
<!-- 右半部分 -->
|
||||
<div class="rig" v-show="pageSetup.isPerson">
|
||||
<span>个人中心</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'headerTop',
|
||||
props: {
|
||||
pageSetup: Object,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,18 +1,14 @@
|
||||
<template>
|
||||
<div class="phoneBottom">
|
||||
<p class="ft-links" v-show="datas.isShowBootom">
|
||||
</p>
|
||||
</div>
|
||||
<div class="phoneBottom"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'phoneBottom',
|
||||
props:['datas'],
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
<style lang="less" scoped>
|
||||
.phoneBottom {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
@ -20,32 +16,5 @@ export default {
|
||||
cursor: pointer;
|
||||
padding-top: 30px;
|
||||
box-sizing: border-box;
|
||||
.ft-links {
|
||||
text-align: center;
|
||||
padding: 0px 15px 10px;
|
||||
span {
|
||||
padding: 0 6px;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
&:last-of-type {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.yinjia {
|
||||
color: #bfbfc3;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.logo {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
47
src/components/realTimeView/index.vue
Normal file
47
src/components/realTimeView/index.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div class="RealTimeView">
|
||||
<el-dialog :visible.sync="datas.show" width="414px" top="8vh">
|
||||
<img src="@/assets/images/phoneTop.png" style="width: 375px" />
|
||||
<iframe
|
||||
v-if="datas.show"
|
||||
ref="iframe"
|
||||
class="screen"
|
||||
:scrolling="false"
|
||||
:src="'http://was666.gitee.io/as-editor-h5/#/?type=iframe'"
|
||||
@load="load"
|
||||
></iframe>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RealTimeView',
|
||||
props: {
|
||||
datas: {
|
||||
show: false,
|
||||
},
|
||||
val:Object
|
||||
},
|
||||
methods: {
|
||||
load() {
|
||||
this.$refs["iframe"].contentWindow.postMessage(this.val, "*");
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.RealTimeView {
|
||||
.screen {
|
||||
width: 375px /*no*/;
|
||||
height: 667px /*no*/;
|
||||
border: 0;
|
||||
|
||||
// 隐藏滚动条
|
||||
&::-webkit-scrollbar {
|
||||
display: none; /* Chrome Safari */
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -17,10 +17,18 @@
|
||||
<el-button @click="reloads" type="danger"
|
||||
><i class="el-icon-delete-solid el-icon--left"></i>重置</el-button
|
||||
>
|
||||
<el-button @click="realTimeView.show = true">预览</el-button>
|
||||
<el-button @click="catJson">查看JSON </el-button>
|
||||
<el-button @click="$refs.file.click()" >导入JSON </el-button>
|
||||
<el-button @click="$refs.file.click()">导入JSON </el-button>
|
||||
<el-button @click="exportJSON">导出JSON </el-button>
|
||||
<input type="file" ref="file" id="file" accept=".json" @change="importJSON" style="display: none;" />
|
||||
<input
|
||||
type="file"
|
||||
ref="file"
|
||||
id="file"
|
||||
accept=".json"
|
||||
@change="importJSON"
|
||||
style="display: none"
|
||||
/>
|
||||
<!-- <el-button @click="Preservation"
|
||||
><i class="el-icon-s-claim el-icon--left"></i>保存</el-button
|
||||
> -->
|
||||
@ -35,36 +43,10 @@
|
||||
<!-- 手机 -->
|
||||
<div class="phone">
|
||||
<section class="phoneAll" ref="imageTofile" id="imageTofile">
|
||||
<!-- 导航栏 -->
|
||||
<img src="@/assets/images/phoneTop.png" alt="" class="statusBar" />
|
||||
|
||||
<!-- 标题 -->
|
||||
<div
|
||||
class="headerTop"
|
||||
:style="{
|
||||
height: pageSetup.titleHeight + 'px',
|
||||
}"
|
||||
@click="headTop"
|
||||
>
|
||||
<!-- 左半部分 -->
|
||||
<div class="lef" v-show="pageSetup.isBack">
|
||||
<van-icon name="arrow-left" />
|
||||
</div>
|
||||
<!-- 标题 -->
|
||||
<div
|
||||
class="header-title"
|
||||
:style="{
|
||||
height: pageSetup.titleHeight + 'px',
|
||||
'line-height': pageSetup.titleHeight + 'px',
|
||||
}"
|
||||
>
|
||||
{{ pageSetup.name }}
|
||||
</div>
|
||||
<!-- 右半部分 -->
|
||||
<div class="rig" v-show="pageSetup.isPerson">
|
||||
<span>个人中心</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 头部导航 -->
|
||||
<headerTop :pageSetup="pageSetup" @click.native="headTop" />
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<section
|
||||
@ -110,7 +92,7 @@
|
||||
<div class="phoneSize">iPhone 8手机高度</div>
|
||||
|
||||
<!-- 底部 -->
|
||||
<phoneBottom :datas="pageSetup.bottomLogo" />
|
||||
<phoneBottom />
|
||||
</section>
|
||||
<!-- 底部 -->
|
||||
</div>
|
||||
@ -144,18 +126,24 @@
|
||||
<div class="decorateAll">
|
||||
<!-- 页面设置 -->
|
||||
<transition name="decorateAnima">
|
||||
<!-- 路由缓存 -->
|
||||
<keep-alive exclude="richtextstyle">
|
||||
<!-- 动态组件 -->
|
||||
<component
|
||||
:is="rightcom"
|
||||
:datas="currentproperties"
|
||||
@componenmanagement="componenmanagement"
|
||||
/>
|
||||
</keep-alive>
|
||||
<!-- 动态组件 -->
|
||||
<component
|
||||
:is="rightcom"
|
||||
:datas="currentproperties"
|
||||
@componenmanagement="componenmanagement"
|
||||
/>
|
||||
</transition>
|
||||
</div>
|
||||
</section>
|
||||
<realTimeView
|
||||
:datas="realTimeView"
|
||||
:val="{
|
||||
id,
|
||||
name: pageSetup.name,
|
||||
templateJson: JSON.stringify(pageSetup),
|
||||
component: JSON.stringify(pageComponents),
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -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%;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user