active-page-vue
Version:
A Vue-based visual page editor component
1,202 lines (1,071 loc) • 38.7 kB
JavaScript
((typeof self !== 'undefined' ? self : this)["webpackJsonpAsEditor"] = (typeof self !== 'undefined' ? self : this)["webpackJsonpAsEditor"] || []).push([[2],{
/***/ "020f":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"1a0c9a87-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/layout/home/index.vue?vue&type=template&id=072ca9bd&scoped=true&
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"home"},[_c('section',{staticClass:"buttons"},[_c('p',{staticStyle:{"font-size":"12px","color":"#4f4f4f","margin-left":"15px","cursor":"pointer"},on:{"click":_vm.Previous}}),_c('div',[_c('el-button',{attrs:{"type":"danger"},on:{"click":_vm.reloads}},[_c('i',{staticClass:"el-icon-delete-solid el-icon--left"}),_vm._v("重置")]),_c('el-button',{on:{"click":function($event){_vm.realTimeView.show = true}}},[_vm._v("预览")]),_c('el-button',{on:{"click":_vm.catJson}},[_vm._v("查看JSON ")]),_c('el-button',{on:{"click":function($event){return _vm.$refs.file.click()}}},[_vm._v("导入JSON ")]),_c('el-button',{on:{"click":_vm.exportJSON}},[_vm._v("导出JSON ")]),_c('input',{ref:"file",staticStyle:{"display":"none"},attrs:{"type":"file","id":"file","accept":".json"},on:{"change":_vm.importJSON}})],1)]),_c('section',{staticClass:"operation"},[_c('sliderassembly',{attrs:{"pointer":_vm.pointer}}),_c('div',{staticClass:"phone"},[_c('section',{ref:"imageTofile",staticClass:"phoneAll",attrs:{"id":"imageTofile"}},[_c('img',{staticClass:"statusBar",attrs:{"src":__webpack_require__("2eca"),"alt":""}}),_c('headerTop',{attrs:{"pageSetup":_vm.pageSetup},nativeOn:{"click":function($event){return _vm.headTop.apply(null, arguments)}}}),_c('section',{staticClass:"phone-container",style:({
'background-color': _vm.pageSetup.bgColor,
backgroundImage: 'url(' + _vm.pageSetup.bgImg + ')',
}),on:{"drop":function($event){return _vm.drop($event)},"dragover":function($event){return _vm.allowDrop($event)},"dragleave":function($event){return _vm.dragleaves($event)}}},[_c('div',{class:_vm.pointer.show ? 'pointer-events' : ''},_vm._l((_vm.pageComponents),function(item,index){return _c(item.component,{key:index,tag:"component",staticClass:"componentsClass",style:({
border: item.active && _vm.deleShow ? '2px solid #155bd4' : '',
}),attrs:{"datas":item.setStyle,"data-type":item.type},nativeOn:{"click":function($event){return _vm.activeComponent(item, index)}}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.deleShow),expression:"deleShow"}],staticClass:"deles",attrs:{"slot":"deles"},on:{"click":function($event){$event.stopPropagation();return _vm.deleteObj(index)}},slot:"deles"},[_c('span',{staticClass:"iconfont icon-sanjiaoxingzuo"}),_vm._v(" "+_vm._s(item.text)+" "),_c('i',{staticClass:"el-icon-delete-solid"})])])}),1)]),_c('div',{staticClass:"phoneSize"},[_vm._v("iPhone 8手机高度")]),_c('phoneBottom')],1)]),_c('div',{staticClass:"decorateTab"},[_c('span',{class:_vm.rightcom === 'decorate' ? 'active' : '',on:{"click":function($event){_vm.rightcom = 'decorate'}}},[_c('i',{staticClass:"iconfont icon-wangye"}),_vm._v(" 页面设置 ")]),_c('span',{class:_vm.rightcom === 'componenmanagement' ? 'active' : '',on:{"click":function($event){_vm.rightcom = 'componenmanagement'}}},[_c('i',{staticClass:"iconfont icon-zujian"}),_vm._v(" 组件管理 ")]),_c('span',{directives:[{name:"show",rawName:"v-show",value:(_vm.rightcom != 'componenmanagement' && _vm.rightcom != 'decorate'),expression:"rightcom != 'componenmanagement' && rightcom != 'decorate'"}],staticClass:"active"},[_c('i',{staticClass:"iconfont icon-zujian"}),_vm._v(" 组件设置 ")])]),_c('div',{staticClass:"decorateAll"},[_c('transition',{attrs:{"name":"decorateAnima"}},[_c(_vm.rightcom,{tag:"component",attrs:{"datas":_vm.currentproperties},on:{"componenmanagement":_vm.componenmanagement}})],1)],1)],1),_c('realTimeView',{attrs:{"datas":_vm.realTimeView,"val":{
id: _vm.id,
name: _vm.pageSetup.name,
templateJson: JSON.stringify(_vm.pageSetup),
component: JSON.stringify(_vm.pageComponents),
}}})],1)}
var staticRenderFns = []
// CONCATENATED MODULE: ./src/layout/home/index.vue?vue&type=template&id=072ca9bd&scoped=true&
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.function.name.js
var es_function_name = __webpack_require__("b0c0");
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.concat.js
var es_array_concat = __webpack_require__("99af");
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.filter.js
var es_array_filter = __webpack_require__("4de4");
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.splice.js
var es_array_splice = __webpack_require__("a434");
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.includes.js
var es_array_includes = __webpack_require__("caad");
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.string.includes.js
var es_string_includes = __webpack_require__("2532");
// EXTERNAL MODULE: ./node_modules/core-js/modules/web.dom-collections.for-each.js
var web_dom_collections_for_each = __webpack_require__("159b");
// EXTERNAL MODULE: ./src/utils/index.js + 3 modules
var utils = __webpack_require__("ed08");
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.iterator.js
var es_array_iterator = __webpack_require__("e260");
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.map.js
var es_map = __webpack_require__("4ec9");
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.object.to-string.js
var es_object_to_string = __webpack_require__("d3b7");
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.string.iterator.js
var es_string_iterator = __webpack_require__("3ca3");
// EXTERNAL MODULE: ./node_modules/core-js/modules/web.dom-collections.iterator.js
var web_dom_collections_iterator = __webpack_require__("ddb0");
// CONCATENATED MODULE: ./src/utils/componentProperties.js
var componentProperties = new Map(); // 数据版本 每次修改组件数据 需要对版本进行修改
// componentProperties.set('componentPropertiesVersion', 'V1.0.0')
componentProperties.set('captiontext', {
component: 'captiontext',
text: '标题文字',
type: '1-3',
active: true,
style: 'captiontextsstyle',
setStyle: {
text: '标题文字',
name: '标题文字',
//标题内容
description: '',
//描述内容
wordSize: 16,
//标题大小
descriptionSize: 12,
//描述大小
wordWeight: 400,
//标题粗细
positions: 'left',
//显示位置 可选left/center
descriptionWeight: 200,
//描述粗细
wordColor: 'rgba(50, 50, 51, 10)',
//标题颜色
descriptionColor: 'rgba(150, 151, 153, 10)',
//描述颜色
backColor: 'rgba(255, 255, 255, 10)',
//背景颜色
borderBott: false,
//底部分割线
wordHeight: 24,
//框体高度
more: {
//查看更多
show: false,
//是否显示查看更多
type: 1,
// 样式选择
text: '查看更多',
//自定义文字
httpType: 10,
//链接类型
http: '' //链接
}
}
});
componentProperties.set('listswitching', {
component: 'listswitching',
text: '商品',
type: '2-1',
active: true,
style: 'listswitchingstyle',
setStyle: {
text: '商品',
commodityType: 0,
moditystyle: 0,
borderRadius: 0,
pageMargin: 15,
commodityMargin: 10,
textWeight: 400,
positions: 'left',
priceofcommodity: true,
purchasebutton: true,
commoditycorner: true,
purchasebuttonType: 0,
commoditycornertype: 0,
commodityTagColor: '#07c160',
tagPosition: 0,
imageList: [],
purchase: '马上抢',
commoditylisttype: 0,
commoditylisttypetab: [{
text: '分组',
imageList: []
}, {
text: '分组',
imageList: []
}],
tabColor: '#f39800',
showMore: false,
moreUrl: null,
bgImg: ''
}
});
componentProperties.set('pictureads', {
component: 'pictureads',
text: '图片广告',
type: '1-3',
active: true,
style: 'pictureadsstyle',
setStyle: {
text: '图片广告',
swiperType: 0,
// 选择模板
borderRadius: 0,
// 图片倒角
pageMargin: 0,
// 页面边距
imageMargin: 0,
// 图片边距
pagingType: 0,
// 分页类型: 0/"bullets"/"fraction"/"progressbar"
rowindividual: 2,
// 一行个数
imageList: [] // 添加图片
}
});
componentProperties.set('graphicnavigation', {
component: 'graphicnavigation',
text: '图文导航',
type: '1-4',
active: true,
style: 'graphicnavigationstyle',
setStyle: {
text: '图文导航',
imageList: [],
// 图片导航列表
navigationType: 0,
//图片导航类型
imgStyle: 0,
//图片样式
backgroundColor: 'rgb(255, 255, 255)',
//背景颜色
textColor: 'rgb(0, 0, 0)',
//文字颜色
borderRadius: 0,
//图片倒角
showSize: 5,
//一屏显示个数
textHeight: 24,
// 字体高度
textSize: 12,
// 字体大小
bgImg: ''
}
});
componentProperties.set('richtext', {
component: 'richtext',
text: '富文本',
type: '1-10',
active: true,
style: 'richtextstyle',
setStyle: {
text: '富文本',
myValue: '',
//富文本内容
backColor: 'rgb(249, 249, 249)' //背景颜色
}
});
componentProperties.set('magiccube', {
component: 'magiccube',
text: '魔方',
type: '1-6',
active: true,
style: 'magiccubestyle',
setStyle: {
text: '魔方',
rubiksCubeType: 0,
// 魔方类型
pageMargin: 0,
//页面间距
imgMargin: 0,
//图片间隙
imageList: [{
src: '',
linktype: '10',
http: {}
}, {
src: '',
linktype: '10',
http: {}
}, {
src: '',
linktype: '10',
http: {}
}, {
src: '',
linktype: '10',
http: {}
}, {
src: '',
linktype: '10',
http: {}
}] //图片列表
}
});
componentProperties.set('auxiliarysegmentation', {
component: 'auxiliarysegmentation',
text: '辅助分割',
type: '1-11',
active: true,
style: 'auxiliarysegmentationstyle',
setStyle: {
text: '辅助分割',
blankHeight: 30,
//空白高度
segmentationtype: 0,
//分割类型
paddType: 0,
//边距
auxliarColor: 'rgb(229, 229, 229)',
//辅助线颜色
bordertp: 'solid' //线的类型
}
});
componentProperties.set('commoditysearch', {
component: 'commoditysearch',
text: '商品搜索',
type: '1-1',
active: true,
style: 'commoditysearchstyle',
setStyle: {
text: '商品搜索',
heights: 28,
//搜索栏高度
position: 0,
//显示位置
sweep: false,
// 显示扫一扫
borderRadius: 0,
//框体样式
textPosition: 0,
//文本位置
backgroundColor: 'rgb(249, 249, 249)',
//背景颜色
borderColor: 'rgb(255, 255, 255)',
//框体颜色
textColor: 'rgb(150, 151, 153)',
//字体颜色
hotords: [] //热词
}
});
componentProperties.set('storeinformation', {
component: 'storeinformation',
text: '店铺信息',
type: '1-12',
active: true,
style: 'storeinformationstyle',
setStyle: {
text: '店铺信息',
bakcgroundImg: '',
//背景图片
headPortrait: '',
//店铺头像
rubiksCubeType: 0,
//类型
name: '店铺名称',
//店铺名称
Discount: '在线支付满150减30，满100减20' //优惠信息
}
});
componentProperties.set('entertheshop', {
component: 'entertheshop',
text: '单元格',
type: '1-13',
active: true,
style: 'entertheshopstyle',
setStyle: {
text: '单元格',
icon: '',
// 左侧图标
shopName: '左侧标题',
copywriting: '右侧内容',
type: '10',
http: {}
}
});
componentProperties.set('notice', {
component: 'notice',
text: '公告',
type: '1-7',
active: true,
style: 'noticestyle',
setStyle: {
text: '公告',
noticeText: '请填写内容，如果过长，将会在手机上滚动显示',
//内容
backColor: 'rgb(255, 248, 233)',
//背景颜色
textColor: 'rgba(100, 101, 102)' //文字颜色
}
});
componentProperties.set('videoss', {
component: 'videoss',
text: '视频',
type: '1-8',
active: true,
style: 'videostyle',
setStyle: {
text: '视频',
src: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
// 视频地址
coverUrl: null,
// 封面地址
autoplay: false // 是否自动播放
}
});
componentProperties.set('custommodule', {
component: 'custommodule',
text: '自定义模块',
type: 'demo',
active: true,
style: 'custommodulestyle',
setStyle: {
text: '自定义模块',
demo: '自定义内容',
img: 'https://img2.baidu.com/it/u=1905875968,4289754134&fm=26&fmt=auto&gp=0.jpg'
}
});
componentProperties.set('communitypowder', {
component: 'communitypowder',
text: '社群涨粉',
type: '1-14',
active: true,
style: 'communitypowderstyle',
setStyle: {
text: '社群涨粉',
mainImg: '',
//入口图片
qrcodeImg: '',
//二维码
title: '标题',
//标题
describe: '辅助描述',
//描述
buttonName: '立即添加',
//按钮名称
backColor: 'rgb(255, 255, 255)' //背景颜色
}
});
componentProperties.set('storenotecard', {
component: 'storenotecard',
text: '文章模块',
type: '2-2',
active: true,
style: 'storenotecardstyle',
setStyle: {
text: '文章模块',
name: '这里显示专题名称',
//专题名称
commodityType: 0,
// 选择模板
moditystyle: 0,
// 卡片样式选择
borderRadius: 0,
// 图片边角
textWeight: 400,
// 标题粗细
noteLabels: true,
// 笔记标签
readingNumber: true,
// 阅读数
praisePoints: true,
//点赞数
viewMore1: true,
//更多1
viewMore2: true,
//更多2
imageList: [],
positions: 'bottom',
//标题位置
linktype: '10',
http: {}
}
});
componentProperties.set('crowdoperation', {
component: 'crowdoperation',
text: '人群运营',
type: '1-17',
active: true,
style: 'crowdoperationstyle',
setStyle: {
text: '人群运营'
}
});
componentProperties.set('personalizedrecommendation', {
component: 'personalizedrecommendation',
text: '个性化推荐',
type: '1-18',
active: true,
style: 'personalizedrecommendationstyle',
setStyle: {
text: '个性化推荐'
}
});
componentProperties.set('onlineservice', {
component: 'onlineservice',
text: '在线客服',
type: '1-19',
active: true,
style: 'onlineservicestyle',
setStyle: {
text: '在线客服'
}
});
componentProperties.set('investigate', {
component: 'investigate',
text: '表单模块',
type: '2-3',
active: true,
style: 'investigatestyle',
setStyle: {
text: '表单模块',
title: '表单模块',
jsonData: [] //value1为sass显示内容，value2为前端显示内容
}
});
componentProperties.set('tabBar', {
component: 'tabBar',
text: '底部导航',
type: '1-5',
active: true,
style: 'tabBarStyle',
setStyle: {
text: '底部导航',
activeColor: '#1989fa',
inactiveColor: '#7d7e80',
isShowBorder: true,
iconWidth: '25',
iconHeight: '25',
fontSize: '14',
Highlight: 0,
iconList: []
}
});
componentProperties.set('follow', {
component: 'follow',
text: '关注公众号',
type: '1-15',
active: true,
style: 'followStyle',
setStyle: {
text: '关注公众号',
heade: 'https://imgs.starfirelink.com/miniShop//logo_1618466110849.png',
followName: '公众号名称',
followAppId: ''
}
});
componentProperties.set('suspension', {
component: 'suspension',
text: '悬浮按钮',
type: '1-16',
active: true,
style: 'suspensionstyle',
setStyle: {
text: '悬浮按钮',
linktype: '10',
http: {}
}
});
/* harmony default export */ var utils_componentProperties = (componentProperties);
// EXTERNAL MODULE: ./node_modules/html2canvas/dist/npm/index.js
var npm = __webpack_require__("951f");
var npm_default = /*#__PURE__*/__webpack_require__.n(npm);
// EXTERNAL MODULE: ./node_modules/file-saver/dist/FileSaver.min.js
var FileSaver_min = __webpack_require__("21a6");
var FileSaver_min_default = /*#__PURE__*/__webpack_require__.n(FileSaver_min);
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/layout/home/index.vue?vue&type=script&lang=js&
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
// 方法类
// 组件数据
// 生成图片
// 导出JSON
/* harmony default export */ var homevue_type_script_lang_js_ = ({
name: 'home',
inject: ['reload'],
data: function data() {
return {
realTimeView: {
show: false // 是否显示预览
},
id: null,
//当前页面
deleShow: true,
//删除标签显示
index: '',
//当前选中的index
rightcom: 'decorate',
//右侧组件切换
currentproperties: {},
//当前属性
pageSetup: {
// 页面设置属性
name: '页面标题',
//页面名称
details: '',
//页面描述
isPerson: false,
// 是否显示个人中心
isBack: true,
// 是否返回按钮
titleHeight: 35,
// 高度
bgColor: 'rgba(249, 249, 249, 10)',
//背景颜色
bgImg: '' // 背景图片
},
pageComponents: [],
//页面组件
offsetY: 0,
//记录上一次距离父元素高度
pointer: {
show: false
},
//穿透
onlyOne: ['1-5', '1-16'] // 只能存在一个的组件(组件的type)
};
},
mounted: function mounted() {
this.pageSetup.name = '页面标题';
this.currentproperties = this.pageSetup;
},
methods: {
// 查看JSON
catJson: function catJson() {
this.$alert("{\n <br/>\n \"id\": ".concat(this.id, ",\n <br/>\n \"name\": \"").concat(this.pageSetup.name, "\",\n <br/>\n \"templateJson\": '").concat(JSON.stringify(this.pageSetup), "',\n <br/>\n \"component\": '").concat(JSON.stringify(this.pageComponents), "',\n <br/>\n }"), '查看JSON', {
confirmButtonText: '确定',
customClass: 'JSONView',
dangerouslyUseHTMLString: true,
callback: function callback() {}
});
},
/**
* 保存
*/
Preservation: function Preservation() {
var _this2 = this;
/* 隐藏border和删除图标 */
this.deleShow = false;
/* 渲染结束截图 */
this.$nextTick(function () {
/* 截图 */
_this2.toImage();
});
},
/**
* 页面截图
*
* @param {Function} callBack 回调函数
*/
toImage: function toImage() {
var _this3 = this;
/* 加载 */
var loading = this.$loading({
lock: true,
text: '保存中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
var imageTofiles = document.querySelector('#imageTofile');
/* 截图 */
npm_default()(this.$refs.imageTofile, {
backgroundColor: null,
height: imageTofiles.scrollHeight,
width: imageTofiles.scrollWidth,
useCORS: true
}).then(function (canvas) {
/* 显示border和删除图标 */
_this3.deleShow = true;
var url = canvas.toDataURL('image/png');
var formData = new FormData();
formData.append('base64File', url);
console.log(formData, '--------------页面图片formData');
loading.close();
});
},
/**
* 当将元素或文本选择拖动到有效放置目标（每几百毫秒）上时，会触发此事件
*
* @param {Object} event event对象
*/
allowDrop: function allowDrop(event) {
//阻止浏览器的默认事件
event.preventDefault();
/* 获取鼠标高度 */
var eventoffset = event.offsetY;
/* 如果没有移动不触发事件减少损耗 */
if (this.offsetY === eventoffset) return;else this.offsetY = eventoffset;
/* 获取组件 */
var childrenObject = event.target.children[0]; // 一个以上的组件计算
if (this.pageComponents.length) {
/* 如果只有一个组件并且第一个是提示组件直接返回 */
if (this.pageComponents.length === 1 && this.pageComponents[0].type === 0) return;
/* 如果鼠标的高度小于第一个的一半直接放到第一个 */
if (eventoffset < childrenObject.children[0].clientHeight / 2) {
/* 如果第一个是提示组件直接返回 */
if (this.pageComponents[0].type === 0) return;
/* 删除提示组件 */
this.pageComponents = this.pageComponents.filter(function (res) {
return res.component !== 'placementarea';
});
/* 最后面添加提示组件 */
this.pageComponents.unshift({
component: 'placementarea',
type: 0
});
return;
}
/* 记录距离父元素高度 */
var childOff = childrenObject.offsetTop;
/* 鼠标在所有组件下面 */
if (eventoffset > childrenObject.clientHeight || childrenObject.lastChild.offsetTop - childOff + childrenObject.lastChild.clientHeight / 2 < eventoffset) {
/* 最后一个组件是提示组件返回 */
if (this.pageComponents[this.pageComponents.length - 1].type === 0) return;
/* 清除提示组件 */
this.pageComponents = this.pageComponents.filter(function (res) {
return res.component !== 'placementarea';
});
/* 最后一个不是提示组件添加 */
this.pageComponents.push({
component: 'placementarea',
type: 0
});
return;
}
var childrens = childrenObject.children;
/* 在两个组件中间，插入 */
for (var i = 0, l = childrens.length; i < l; i++) {
var childoffset = childrens[i].offsetTop - childOff;
if (childoffset + childrens[i].clientHeight / 2 > event.offsetY) {
/* 如果是提示组件直接返回 */
if (this.pageComponents[i].type === 0) break;
if (this.pageComponents[i - 1].type === 0) break;
/* 清除提示组件 */
this.pageComponents = this.pageComponents.filter(function (res) {
return res.component !== 'placementarea';
});
this.pageComponents.splice(i, 0, {
component: 'placementarea',
type: 0
});
break;
} else if (childoffset + childrens[i].clientHeight > event.offsetY) {
if (this.pageComponents[i].type === 0) break;
if (!this.pageComponents[i + 1] || this.pageComponents[i + 1].type === 0) break;
this.pageComponents = this.pageComponents.filter(function (res) {
return res.component !== 'placementarea';
});
this.pageComponents.splice(i, 0, {
component: 'placementarea',
type: 0
});
break;
}
}
} else {
/* 一个组件都没有直接push */
this.pageComponents.push({
component: 'placementarea',
type: 0
});
}
},
/**
* 当在有效放置目标上放置元素或选择文本时触发此事件
*
* @param {Object} event event对象
*/
drop: function drop(event) {
var _this4 = this;
/* 获取数据 */
var data = utils["a" /* default */].deepClone(utils_componentProperties.get(event.dataTransfer.getData('componentName')));
/* 查询是否只能存在一个的组件且在第一个 */
var someOne = this.pageComponents.some(function (item, index) {
return item.component === 'placementarea' && index === 0 && _this4.onlyOne.includes(data.type);
});
if (someOne) {
this.$message.info('固定位置的组件(如: 底部导航、悬浮)不能放在第一个!');
/* 删除提示组件 */
this.dragleaves();
return;
}
/* 查询是否只能存在一个的组件 */
var someResult = this.pageComponents.some(function (item) {
return _this4.onlyOne.includes(item.type) && item.component === event.dataTransfer.getData('componentName');
});
if (someResult) {
this.$message.info('当前组件只能添加一个!');
/* 删除提示组件 */
this.dragleaves();
return;
}
/* 替换 */
utils["a" /* default */].forEach(this.pageComponents, function (res, index) {
/* 修改选中 */
if (res.active === true) res.active = false;
/* 替换提示 */
_this4.index = index;
if (res.component === 'placementarea') _this4.$set(_this4.pageComponents, index, data);
});
/* 切换组件 */
this.rightcom = data.style;
/* 丢样式 */
this.currentproperties = data.setStyle;
console.log(data, this.rightcom, this.currentproperties, '----------components data');
},
/**
* 当拖动的元素或文本选择离开有效的放置目标时，会触发此事件
*
* @param {Object} event event对象
*/
dragleaves: function dragleaves() {
/* 删除提示组件 */
this.pageComponents = this.pageComponents.filter(function (res) {
return res.component !== 'placementarea';
});
},
/**
* 切换组件位置
*
* @param {Object} res 组件切换后返回的位置
*/
componenmanagement: function componenmanagement(res) {
this.pageComponents = res;
},
/**
* 选择组件
*
* @param {Object} res 当前组件对象
*/
activeComponent: function activeComponent(res, index) {
this.index = index;
/* 切换组件 */
this.rightcom = res.style;
/* 丢样式 */
this.currentproperties = res.setStyle;
/* 替换 */
utils["a" /* default */].forEach(this.pageComponents, function (res) {
/* 修改选中 */
if (res.active === true) res.active = false;
});
/* 选中样式 */
res.active = true;
},
/**
* 标题切换
*
* @param {Object} res 当前组件对象
*/
headTop: function headTop() {
this.rightcom = 'decorate';
/* 替换 */
utils["a" /* default */].forEach(this.pageComponents, function (res) {
/* 修改选中 */
if (res.active === true) res.active = false;
});
},
/* 删除组件 */
deleteObj: function deleteObj(index) {
this.pageComponents.splice(index, 1);
if (this.index === index) this.rightcom = 'decorate';
if (index < this.index) this.index = this.index - 1;
},
/* 页面刷新 */
reloads: function reloads() {
var _this5 = this;
this.$confirm('重置后您添加或者修改的数据将会失效, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function () {
_this5.reload();
}).catch(function () {});
},
// 返回上一步
Previous: function Previous() {
this.$confirm('返回列表您添加或者修改的数据将会失效, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function () {//this.$router.go(-1)
}).catch(function () {});
},
// 导出json
exportJSON: function exportJSON() {
// 将json转换成字符串
var data = JSON.stringify({
id: this.id,
name: this.pageSetup.name,
templateJson: JSON.stringify(this.pageSetup),
component: JSON.stringify(this.pageComponents)
});
var blob = new Blob([data], {
type: ''
});
FileSaver_min_default.a.saveAs(blob, "".concat(this.pageSetup.name, ".json"));
},
// 导入json
importJSON: function importJSON() {
var file = document.getElementById('file').files[0];
var reader = new FileReader();
reader.readAsText(file);
var _this = this;
reader.onload = function () {
// this.result为读取到的json字符串，需转成json对象
var ImportJSON = JSON.parse(this.result); // 检测是否导入成功
console.log(ImportJSON, '-----------------导入成功'); // 导入JSON数据
_this.id = ImportJSON.id;
_this.pageSetup = JSON.parse(ImportJSON.templateJson);
_this.pageComponents = JSON.parse(ImportJSON.component);
};
}
},
watch: {
/* 监听右侧属性设置切换 */
rightcom: function rightcom(newval) {
if (newval === 'decorate') {
utils["a" /* default */].forEach(this.pageComponents, function (res) {
/* 修改选中 */
if (res.active === true) res.active = false;
});
this.currentproperties = this.pageSetup;
return;
}
if (newval === 'componenmanagement') {
/* 替换 */
utils["a" /* default */].forEach(this.pageComponents, function (res) {
/* 修改选中 */
if (res.active === true) res.active = false;
});
this.currentproperties = this.pageComponents;
}
}
}
});
// CONCATENATED MODULE: ./src/layout/home/index.vue?vue&type=script&lang=js&
/* harmony default export */ var layout_homevue_type_script_lang_js_ = (homevue_type_script_lang_js_);
// EXTERNAL MODULE: ./src/layout/home/index.vue?vue&type=style&index=0&id=072ca9bd&lang=less&scoped=true&
var homevue_type_style_index_0_id_072ca9bd_lang_less_scoped_true_ = __webpack_require__("1dd9");
// EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
var componentNormalizer = __webpack_require__("2877");
// CONCATENATED MODULE: ./src/layout/home/index.vue
/* normalize component */
var component = Object(componentNormalizer["a" /* default */])(
layout_homevue_type_script_lang_js_,
render,
staticRenderFns,
false,
null,
"072ca9bd",
null
)
/* harmony default export */ var home = __webpack_exports__["default"] = (component.exports);
/***/ }),
/***/ "1dd9":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_11_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_11_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_11_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_11_oneOf_1_3_node_modules_less_loader_dist_cjs_js_ref_11_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_072ca9bd_lang_less_scoped_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("456f");
/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_11_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_11_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_11_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_11_oneOf_1_3_node_modules_less_loader_dist_cjs_js_ref_11_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_072ca9bd_lang_less_scoped_true___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_11_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_11_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_11_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_11_oneOf_1_3_node_modules_less_loader_dist_cjs_js_ref_11_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_072ca9bd_lang_less_scoped_true___WEBPACK_IMPORTED_MODULE_0__);
/* unused harmony reexport * */
/***/ }),
/***/ "456f":
/***/ (function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__("a383");
if(content.__esModule) content = content.default;
if(typeof content === 'string') content = [[module.i, content, '']];
if(content.locals) module.exports = content.locals;
// add the styles to the DOM
var add = __webpack_require__("499e").default
var update = add("07f63efb", content, true, {"sourceMap":false,"shadowMode":false});
/***/ }),
/***/ "a383":
/***/ (function(module, exports, __webpack_require__) {
// Imports
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__("24fb");
exports = ___CSS_LOADER_API_IMPORT___(false);
// Module
exports.push([module.i, ".pointer-events[data-v-072ca9bd]{pointer-events:none}.home[data-v-072ca9bd]{width:100%;height:100%}.home .deles[data-v-072ca9bd]{min-width:80px;text-align:center;line-height:25px;background:#fff;height:25px;left:103%}.home .deles[data-v-072ca9bd],.home .deles .icon-sanjiaoxingzuo[data-v-072ca9bd]{position:absolute;font-size:12px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.home .deles .icon-sanjiaoxingzuo[data-v-072ca9bd]{left:-11px;color:#fff}.home .deles:hover i[data-v-072ca9bd]{display:block;position:absolute;left:0;font-size:16px;top:0;text-align:center;line-height:25px;width:100%;color:#fff;height:100%;z-index:10;background:rgba(0,0,0,.5)}.home .deles:hover .icon-sanjiaoxingzuo[data-v-072ca9bd]{color:rgba(0,0,0,.5)}.home .deles i[data-v-072ca9bd]{display:none}.home .buttons[data-v-072ca9bd]{height:8%;border-bottom:1px solid #ebedf0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.home .buttons[data-v-072ca9bd],.home .buttons .frop[data-v-072ca9bd]{padding-right:15px}.home .buttons .frop .el-button.el-button--primary.el-dropdown-selfdefine[data-v-072ca9bd]{background:#fff;color:#000;border:1px solid #dcdee0}.home .buttons .el-button[data-v-072ca9bd]{font-size:14px;padding:0 16px;height:30px}.home .buttons .el-button.el-button--primary[data-v-072ca9bd]{background:#155bd4}.home .buttons .el-button.el-button--danger[data-v-072ca9bd]{background:red}.home .operation[data-v-072ca9bd]{width:100%;height:92%;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.home .operation[data-v-072ca9bd],.home .phone[data-v-072ca9bd]{display:-webkit-box;display:-ms-flexbox;display:flex;background:#f7f8fa}.home .phone[data-v-072ca9bd]{width:55%;height:100%;overflow-y:scroll;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.home .phone[data-v-072ca9bd]::-webkit-scrollbar{width:1px}.home .phone .phoneAll[data-v-072ca9bd]{width:375px;min-height:760px;-webkit-box-shadow:0 0 14px 0 rgba(0,0,0,.1);box-shadow:0 0 14px 0 rgba(0,0,0,.1);margin:45px 0;position:relative}.home .phone .phoneAll .phoneSize[data-v-072ca9bd]{position:absolute;left:-137px;top:640px;font-size:12px;color:#a2a2a2;border-bottom:1px solid #dedede;width:130px;height:21px;line-height:21px}.home .phone .phoneAll .statusBar[data-v-072ca9bd]{width:100%;display:block}.home .phone .phoneAll .phone-container[data-v-072ca9bd]{min-height:603px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;width:100%;position:relative;background-repeat:no-repeat;background-size:100% 100%}.home .phone .phoneAll .phone-container .componentsClass[data-v-072ca9bd]{border:1px solid #fff}.home .phone .phoneAll .phone-container .componentsClass[data-v-072ca9bd]:hover{border:1px dashed #155bd4}.home .decorateAll[data-v-072ca9bd]{width:376px;height:100%;overflow-y:scroll;overflow-x:hidden;position:relative;padding:0 12px;background:#fff}.home .decorateAll[data-v-072ca9bd]::-webkit-scrollbar{width:1px}.home .decorateAll[data-v-072ca9bd]::-webkit-scrollbar-thumb{background-color:#155bd4}.home .decorateTab[data-v-072ca9bd]{position:fixed;display:-webkit-box;display:-ms-flexbox;display:flex;right:380px;top:115px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.home .decorateTab span[data-v-072ca9bd]{background-color:#fff;-webkit-box-shadow:0 2px 8px 0 rgba(0,0,0,.1);box-shadow:0 2px 8px 0 rgba(0,0,0,.1);border-radius:2px;width:94px;height:32px;display:inline-block;text-align:center;line-height:32px;margin-bottom:12px;-webkit-transition:all .8s;transition:all .8s;cursor:pointer}.home .decorateTab span.active[data-v-072ca9bd]{background-color:#155bd4;color:#fff}.home .decorateTab span i[data-v-072ca9bd]{font-size:12px;margin-right:5px}.decorateAnima-enter-active[data-v-072ca9bd],.decorateAnima-leave-active[data-v-072ca9bd]{-webkit-transition:all 1.5s ease;transition:all 1.5s ease}.decorateAnima-enter[data-v-072ca9bd],.decorateAnima-leave-to[data-v-072ca9bd]{-webkit-transform:translate(8px,8px);transform:translate(8px,8px);opacity:0}", ""]);
// Exports
module.exports = exports;
/***/ })
}]);