cms-chenhj-ui 2.0.14 → 2.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cms-chenhj-ui.common.js +1188 -1176
- package/cms-chenhj-ui.common.js.map +1 -1
- package/cms-chenhj-ui.css +1 -1
- package/cms-chenhj-ui.umd.js +1188 -1176
- package/cms-chenhj-ui.umd.js.map +1 -1
- package/cms-chenhj-ui.umd.min.js +3 -3
- package/cms-chenhj-ui.umd.min.js.map +1 -1
- package/package.json +1 -1
package/cms-chenhj-ui.umd.js
CHANGED
|
@@ -931,6 +931,283 @@ var component = (0,componentNormalizer/* default */.A)(
|
|
|
931
931
|
|
|
932
932
|
/***/ }),
|
|
933
933
|
|
|
934
|
+
/***/ 348:
|
|
935
|
+
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
936
|
+
|
|
937
|
+
"use strict";
|
|
938
|
+
// ESM COMPAT FLAG
|
|
939
|
+
__webpack_require__.r(__webpack_exports__);
|
|
940
|
+
|
|
941
|
+
// EXPORTS
|
|
942
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
943
|
+
"default": function() { return /* binding */ View; }
|
|
944
|
+
});
|
|
945
|
+
|
|
946
|
+
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-85.use[1]!./node_modules/babel-loader/lib/index.js??clonedRuleSet-41.use!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[4]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./package/cms-column/View.vue?vue&type=template&id=cd35c518&scoped=true
|
|
947
|
+
var render = function render() {
|
|
948
|
+
var _vm = this,
|
|
949
|
+
_c = _vm._self._c;
|
|
950
|
+
return _c('BaseComp', _vm._b({
|
|
951
|
+
attrs: {
|
|
952
|
+
"data": _vm.data,
|
|
953
|
+
"nowCompId": _vm.nowCompId,
|
|
954
|
+
"isOpcacity": _vm.isOpcacity,
|
|
955
|
+
"isMask": false,
|
|
956
|
+
"lang": _vm.lang
|
|
957
|
+
},
|
|
958
|
+
on: {
|
|
959
|
+
"getConfigData": _vm.getConfigData
|
|
960
|
+
},
|
|
961
|
+
scopedSlots: _vm._u([{
|
|
962
|
+
key: "default",
|
|
963
|
+
fn: function (slotProps) {
|
|
964
|
+
return [_c('section', {
|
|
965
|
+
class: (_vm.configData.widthType === 'full' ? 'width-full' : 'cmhk-home_main', {
|
|
966
|
+
hoverBorderClass: _vm.isConfigPage
|
|
967
|
+
}),
|
|
968
|
+
style: _vm.containerStyle
|
|
969
|
+
}, [_c('div', {
|
|
970
|
+
staticClass: "column-setting",
|
|
971
|
+
class: [`layout-${_vm.configData.layoutType || 'default'}`, `${slotProps.isMobile && _vm.configData.mobileLayout === 'vertical' ? 'mobile-vertical' : 'mobile-horizontal'}`],
|
|
972
|
+
style: _vm.columnStyle
|
|
973
|
+
}, _vm._l(_vm.data.childList, function (item, index) {
|
|
974
|
+
return _c('cms-column-card', _vm._b({
|
|
975
|
+
key: item.componentId,
|
|
976
|
+
class: _vm.getColumnItemClass(index),
|
|
977
|
+
style: _vm.getColumnItemStyle(index),
|
|
978
|
+
attrs: {
|
|
979
|
+
"data": item,
|
|
980
|
+
"nowCompId": _vm.nowCompId,
|
|
981
|
+
"isOpcacity": _vm.isOpcacity,
|
|
982
|
+
"isMask": false,
|
|
983
|
+
"lang": _vm.lang,
|
|
984
|
+
"isMobile": slotProps.isMobile,
|
|
985
|
+
"mobileLayout": _vm.configData.mobileLayout
|
|
986
|
+
}
|
|
987
|
+
}, 'cms-column-card', _vm.$attrs, false));
|
|
988
|
+
}), 1)])];
|
|
989
|
+
}
|
|
990
|
+
}])
|
|
991
|
+
}, 'BaseComp', _vm.$attrs, false));
|
|
992
|
+
};
|
|
993
|
+
var staticRenderFns = [];
|
|
994
|
+
|
|
995
|
+
// EXTERNAL MODULE: ./package/baseComp.vue + 5 modules
|
|
996
|
+
var baseComp = __webpack_require__(7135);
|
|
997
|
+
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-85.use[1]!./node_modules/babel-loader/lib/index.js??clonedRuleSet-41.use!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./package/cms-column/View.vue?vue&type=script&lang=js
|
|
998
|
+
|
|
999
|
+
/* harmony default export */ var Viewvue_type_script_lang_js = ({
|
|
1000
|
+
name: "cms-column",
|
|
1001
|
+
components: {
|
|
1002
|
+
BaseComp: baseComp["default"]
|
|
1003
|
+
},
|
|
1004
|
+
props: {
|
|
1005
|
+
data: {
|
|
1006
|
+
type: Object,
|
|
1007
|
+
default: () => {
|
|
1008
|
+
return {};
|
|
1009
|
+
}
|
|
1010
|
+
},
|
|
1011
|
+
nowCompId: {
|
|
1012
|
+
type: [String, Number],
|
|
1013
|
+
default: ""
|
|
1014
|
+
},
|
|
1015
|
+
isOpcacity: {
|
|
1016
|
+
type: Boolean,
|
|
1017
|
+
default: true
|
|
1018
|
+
},
|
|
1019
|
+
lang: {
|
|
1020
|
+
type: String,
|
|
1021
|
+
default: "zh-HK"
|
|
1022
|
+
}
|
|
1023
|
+
},
|
|
1024
|
+
data() {
|
|
1025
|
+
return {
|
|
1026
|
+
configData: {},
|
|
1027
|
+
messFold: true,
|
|
1028
|
+
// 默认配置数据
|
|
1029
|
+
defaultConfig: {
|
|
1030
|
+
layoutType: "100",
|
|
1031
|
+
heightType: "auto",
|
|
1032
|
+
widthType: "auto",
|
|
1033
|
+
mobileLayout: "vertical",
|
|
1034
|
+
fixedHeight: 300,
|
|
1035
|
+
borderWidth: 0,
|
|
1036
|
+
borderStyle: "solid",
|
|
1037
|
+
borderColor: "",
|
|
1038
|
+
backgroundColor: "#FFF",
|
|
1039
|
+
backgroundImage: "",
|
|
1040
|
+
boxShadow: "",
|
|
1041
|
+
borderRadius: 0,
|
|
1042
|
+
columnGap: 0,
|
|
1043
|
+
rowGap: 0,
|
|
1044
|
+
title: "",
|
|
1045
|
+
description: "",
|
|
1046
|
+
input1: "",
|
|
1047
|
+
showTitle: true,
|
|
1048
|
+
showDescription: true,
|
|
1049
|
+
animationDuration: 300,
|
|
1050
|
+
responsiveBreakpoint: 768
|
|
1051
|
+
}
|
|
1052
|
+
};
|
|
1053
|
+
},
|
|
1054
|
+
mounted() {
|
|
1055
|
+
this.initConfigData();
|
|
1056
|
+
// 添加窗口大小变化监听
|
|
1057
|
+
},
|
|
1058
|
+
watch: {
|
|
1059
|
+
configData: {
|
|
1060
|
+
handler() {
|
|
1061
|
+
this.updateStyles();
|
|
1062
|
+
},
|
|
1063
|
+
deep: true
|
|
1064
|
+
}
|
|
1065
|
+
},
|
|
1066
|
+
computed: {
|
|
1067
|
+
isConfigPage() {
|
|
1068
|
+
return this.$EventBus && this.isOpcacity;
|
|
1069
|
+
},
|
|
1070
|
+
// 容器样式
|
|
1071
|
+
containerStyle() {
|
|
1072
|
+
return {
|
|
1073
|
+
backgroundColor: this.configData.backgroundColor || this.defaultConfig.backgroundColor,
|
|
1074
|
+
backgroundImage: this.configData.backgroundImage ? `url(${this.configData.backgroundImage})` : "",
|
|
1075
|
+
backgroundSize: "cover",
|
|
1076
|
+
backgroundRepeat: "no-repeat",
|
|
1077
|
+
backgroundPosition: "center center",
|
|
1078
|
+
boxShadow: this.configData.boxShadow || this.defaultConfig.boxShadow,
|
|
1079
|
+
borderRadius: `${this.configData.borderRadius || this.defaultConfig.borderRadius}px`,
|
|
1080
|
+
minHeight: this.configData.heightType === "fixed" ? `${this.configData.fixedHeight}px` : "auto"
|
|
1081
|
+
};
|
|
1082
|
+
},
|
|
1083
|
+
// 分栏容器样式
|
|
1084
|
+
columnStyle() {
|
|
1085
|
+
// const gap = this.configData.rowGap || this.defaultConfig.rowGap;
|
|
1086
|
+
return {
|
|
1087
|
+
// gap: `${gap}px`,
|
|
1088
|
+
border: this.configData.borderWidth ? `${this.configData.borderWidth}px ${this.configData.borderStyle} ${this.configData.borderColor}` : "none"
|
|
1089
|
+
};
|
|
1090
|
+
}
|
|
1091
|
+
},
|
|
1092
|
+
methods: {
|
|
1093
|
+
// 初始化配置数据
|
|
1094
|
+
initConfigData() {
|
|
1095
|
+
// 合并默认配置和传入配置
|
|
1096
|
+
this.configData = {
|
|
1097
|
+
...this.defaultConfig,
|
|
1098
|
+
...this.configData
|
|
1099
|
+
};
|
|
1100
|
+
},
|
|
1101
|
+
// 获取配置数据
|
|
1102
|
+
getConfigData(configData) {
|
|
1103
|
+
this.configData = {
|
|
1104
|
+
...this.defaultConfig,
|
|
1105
|
+
...configData
|
|
1106
|
+
};
|
|
1107
|
+
this.updateStyles();
|
|
1108
|
+
},
|
|
1109
|
+
// 更新样式
|
|
1110
|
+
updateStyles() {
|
|
1111
|
+
this.$nextTick(() => {
|
|
1112
|
+
// 触发样式更新
|
|
1113
|
+
this.$forceUpdate();
|
|
1114
|
+
});
|
|
1115
|
+
},
|
|
1116
|
+
// 获取分栏项的类名
|
|
1117
|
+
getColumnItemClass(index) {
|
|
1118
|
+
const layoutType = this.configData.layoutType || this.defaultConfig.layoutType;
|
|
1119
|
+
return ["column-item", `column-item-${index}`, `layout-${layoutType}`, {
|
|
1120
|
+
"min-h": this.$EventBus && this.isOpcacity,
|
|
1121
|
+
"first-item": index === 0,
|
|
1122
|
+
"last-item": index === this.data.childList.length - 1
|
|
1123
|
+
}];
|
|
1124
|
+
},
|
|
1125
|
+
// 获取分栏项的样式
|
|
1126
|
+
getColumnItemStyle(index) {
|
|
1127
|
+
const layoutType = this.configData.layoutType || this.defaultConfig.layoutType;
|
|
1128
|
+
const gap = this.configData.rowGap || this.defaultConfig.rowGap;
|
|
1129
|
+
let flexBasis = "100%";
|
|
1130
|
+
let marginRight = "0";
|
|
1131
|
+
|
|
1132
|
+
// 根据布局类型设置宽度
|
|
1133
|
+
switch (layoutType) {
|
|
1134
|
+
case "50-50":
|
|
1135
|
+
flexBasis = `calc(50% - ${gap / 2}px)`;
|
|
1136
|
+
marginRight = index % 2 === 0 ? `${gap}px` : "0";
|
|
1137
|
+
break;
|
|
1138
|
+
case "33-66":
|
|
1139
|
+
flexBasis = index === 0 ? `calc(33.33% - ${gap / 2}px)` : `calc(66.67% - ${gap / 2}px)`;
|
|
1140
|
+
marginRight = index === 0 ? `${gap}px` : "0";
|
|
1141
|
+
break;
|
|
1142
|
+
case "66-33":
|
|
1143
|
+
flexBasis = index === 0 ? `calc(66.67% - ${gap / 2}px)` : `calc(33.33% - ${gap / 2}px)`;
|
|
1144
|
+
marginRight = index === 0 ? `${gap}px` : "0";
|
|
1145
|
+
break;
|
|
1146
|
+
case "33-33-33":
|
|
1147
|
+
flexBasis = `calc(33.33% - ${gap * 2 / 3}px)`;
|
|
1148
|
+
marginRight = index < 2 ? `${gap}px` : "0";
|
|
1149
|
+
break;
|
|
1150
|
+
case "25-50-25":
|
|
1151
|
+
if (index === 0 || index === 2) {
|
|
1152
|
+
flexBasis = `calc(25% - ${gap * 2 / 3}px)`;
|
|
1153
|
+
} else {
|
|
1154
|
+
flexBasis = `calc(50% - ${gap * 2 / 3}px)`;
|
|
1155
|
+
}
|
|
1156
|
+
marginRight = index < 2 ? `${gap}px` : "0";
|
|
1157
|
+
break;
|
|
1158
|
+
default:
|
|
1159
|
+
flexBasis = "100%";
|
|
1160
|
+
}
|
|
1161
|
+
return {
|
|
1162
|
+
flexBasis,
|
|
1163
|
+
marginRight,
|
|
1164
|
+
marginBottom: `${this.configData.columnGap || this.defaultConfig.columnGap}px`
|
|
1165
|
+
};
|
|
1166
|
+
},
|
|
1167
|
+
// 折叠/展开文本
|
|
1168
|
+
foldMessText() {
|
|
1169
|
+
this.messFold = !this.messFold;
|
|
1170
|
+
},
|
|
1171
|
+
// 处理跳转链接
|
|
1172
|
+
decodeJumpUrl(url) {
|
|
1173
|
+
if (!url) return;
|
|
1174
|
+
top.location.href = url;
|
|
1175
|
+
}
|
|
1176
|
+
}
|
|
1177
|
+
});
|
|
1178
|
+
;// ./package/cms-column/View.vue?vue&type=script&lang=js
|
|
1179
|
+
/* harmony default export */ var cms_column_Viewvue_type_script_lang_js = (Viewvue_type_script_lang_js);
|
|
1180
|
+
;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-67.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-67.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-67.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-67.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-42.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./package/cms-column/View.vue?vue&type=style&index=0&id=cd35c518&prod&lang=scss&scoped=true
|
|
1181
|
+
// extracted by mini-css-extract-plugin
|
|
1182
|
+
|
|
1183
|
+
;// ./package/cms-column/View.vue?vue&type=style&index=0&id=cd35c518&prod&lang=scss&scoped=true
|
|
1184
|
+
|
|
1185
|
+
// EXTERNAL MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
|
|
1186
|
+
var componentNormalizer = __webpack_require__(1656);
|
|
1187
|
+
;// ./package/cms-column/View.vue
|
|
1188
|
+
|
|
1189
|
+
|
|
1190
|
+
|
|
1191
|
+
;
|
|
1192
|
+
|
|
1193
|
+
|
|
1194
|
+
/* normalize component */
|
|
1195
|
+
|
|
1196
|
+
var component = (0,componentNormalizer/* default */.A)(
|
|
1197
|
+
cms_column_Viewvue_type_script_lang_js,
|
|
1198
|
+
render,
|
|
1199
|
+
staticRenderFns,
|
|
1200
|
+
false,
|
|
1201
|
+
null,
|
|
1202
|
+
"cd35c518",
|
|
1203
|
+
null
|
|
1204
|
+
|
|
1205
|
+
)
|
|
1206
|
+
|
|
1207
|
+
/* harmony default export */ var View = (component.exports);
|
|
1208
|
+
|
|
1209
|
+
/***/ }),
|
|
1210
|
+
|
|
934
1211
|
/***/ 350:
|
|
935
1212
|
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
|
|
936
1213
|
|
|
@@ -1199,6 +1476,524 @@ module.exports = function (it, Prototype) {
|
|
|
1199
1476
|
};
|
|
1200
1477
|
|
|
1201
1478
|
|
|
1479
|
+
/***/ }),
|
|
1480
|
+
|
|
1481
|
+
/***/ 688:
|
|
1482
|
+
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
1483
|
+
|
|
1484
|
+
"use strict";
|
|
1485
|
+
// ESM COMPAT FLAG
|
|
1486
|
+
__webpack_require__.r(__webpack_exports__);
|
|
1487
|
+
|
|
1488
|
+
// EXPORTS
|
|
1489
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
1490
|
+
"default": function() { return /* binding */ View; }
|
|
1491
|
+
});
|
|
1492
|
+
|
|
1493
|
+
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.constructor.js
|
|
1494
|
+
var es_iterator_constructor = __webpack_require__(8111);
|
|
1495
|
+
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.drop.js
|
|
1496
|
+
var es_iterator_drop = __webpack_require__(9314);
|
|
1497
|
+
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-85.use[1]!./node_modules/babel-loader/lib/index.js??clonedRuleSet-41.use!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[4]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./package/cms-column-card/View.vue?vue&type=template&id=2dcb9de2&scoped=true
|
|
1498
|
+
|
|
1499
|
+
|
|
1500
|
+
|
|
1501
|
+
|
|
1502
|
+
var render = function render() {
|
|
1503
|
+
var _vm = this,
|
|
1504
|
+
_c = _vm._self._c;
|
|
1505
|
+
return _c('BaseComp', _vm._b({
|
|
1506
|
+
attrs: {
|
|
1507
|
+
"data": _vm.data,
|
|
1508
|
+
"nowCompId": _vm.nowCompId,
|
|
1509
|
+
"isOpcacity": _vm.isOpcacity,
|
|
1510
|
+
"isMask": false,
|
|
1511
|
+
"lang": _vm.lang,
|
|
1512
|
+
"showDel": false
|
|
1513
|
+
},
|
|
1514
|
+
on: {
|
|
1515
|
+
"getConfigData": _vm.getConfigData
|
|
1516
|
+
}
|
|
1517
|
+
}, 'BaseComp', _vm.$attrs, false), [_vm.isConfigPage ? _c('div', {
|
|
1518
|
+
staticClass: "main_drag hoverBorderClass",
|
|
1519
|
+
style: _vm.cardContainerStyle,
|
|
1520
|
+
attrs: {
|
|
1521
|
+
"id": `cardTarget${_vm.data.componentId}`
|
|
1522
|
+
},
|
|
1523
|
+
on: {
|
|
1524
|
+
"dragover": _vm.dragover,
|
|
1525
|
+
"dragend": function ($event) {
|
|
1526
|
+
_vm.showAddCom = false;
|
|
1527
|
+
},
|
|
1528
|
+
"drop": _vm.drop
|
|
1529
|
+
}
|
|
1530
|
+
}, [_c('Draggable', {
|
|
1531
|
+
staticStyle: {
|
|
1532
|
+
"position": "relative"
|
|
1533
|
+
},
|
|
1534
|
+
attrs: {
|
|
1535
|
+
"group": _vm.groupConfigForMain,
|
|
1536
|
+
"chosen-class": "chosen",
|
|
1537
|
+
"force-fallback": "true",
|
|
1538
|
+
"animation": "1000",
|
|
1539
|
+
"move": _vm.onMove
|
|
1540
|
+
},
|
|
1541
|
+
on: {
|
|
1542
|
+
"start": _vm.onStart,
|
|
1543
|
+
"end": function ($event) {
|
|
1544
|
+
_vm.showAddCom = false;
|
|
1545
|
+
}
|
|
1546
|
+
},
|
|
1547
|
+
model: {
|
|
1548
|
+
value: _vm.data.childList,
|
|
1549
|
+
callback: function ($$v) {
|
|
1550
|
+
_vm.$set(_vm.data, "childList", $$v);
|
|
1551
|
+
},
|
|
1552
|
+
expression: "data.childList"
|
|
1553
|
+
}
|
|
1554
|
+
}, [_vm._l(_vm.data.childList, function (item, index) {
|
|
1555
|
+
return _c('div', {
|
|
1556
|
+
key: item.componentId,
|
|
1557
|
+
staticStyle: {
|
|
1558
|
+
"position": "relative"
|
|
1559
|
+
}
|
|
1560
|
+
}, [_vm.showAddCom ? _c('div', {
|
|
1561
|
+
staticClass: "up_insert",
|
|
1562
|
+
attrs: {
|
|
1563
|
+
"id": `${item.componentId}-cardTargetup`
|
|
1564
|
+
}
|
|
1565
|
+
}, [_c('i', {
|
|
1566
|
+
staticClass: "icon-up",
|
|
1567
|
+
attrs: {
|
|
1568
|
+
"id": `${item.componentId}-upi`
|
|
1569
|
+
}
|
|
1570
|
+
}), _c('span', {
|
|
1571
|
+
attrs: {
|
|
1572
|
+
"id": `${item.componentId}-upspan`
|
|
1573
|
+
}
|
|
1574
|
+
}, [_vm._v("插入组件")])]) : _vm._e(), _c(item.cmsCompName, {
|
|
1575
|
+
tag: "component",
|
|
1576
|
+
style: {
|
|
1577
|
+
marginTop: _vm.showAddCom && index == 0 ? '20px' : '0px'
|
|
1578
|
+
},
|
|
1579
|
+
attrs: {
|
|
1580
|
+
"data": item,
|
|
1581
|
+
"lang": _vm.lang,
|
|
1582
|
+
"isOpcacity": _vm.isOpcacity,
|
|
1583
|
+
"nowCompId": _vm.nowCompId
|
|
1584
|
+
}
|
|
1585
|
+
})], 1);
|
|
1586
|
+
}), _vm.showAddCom ? _c('div', {
|
|
1587
|
+
staticClass: "up_insert insert_bottom",
|
|
1588
|
+
style: {
|
|
1589
|
+
bottom: _vm.data.childList.length ? '0px' : '-24px'
|
|
1590
|
+
},
|
|
1591
|
+
attrs: {
|
|
1592
|
+
"id": `-cardTargetdown`
|
|
1593
|
+
}
|
|
1594
|
+
}, [_c('i', {
|
|
1595
|
+
staticClass: "icon-up"
|
|
1596
|
+
}), _c('span', [_vm._v("插入组件")])]) : _vm._e()], 2)], 1) : _c('cms-view', _vm._b({
|
|
1597
|
+
style: _vm.cardContainerStyle,
|
|
1598
|
+
attrs: {
|
|
1599
|
+
"data": _vm.data.childList,
|
|
1600
|
+
"lang": _vm.lang,
|
|
1601
|
+
"isOpcacity": false
|
|
1602
|
+
}
|
|
1603
|
+
}, 'cms-view', _vm.$attrs, false))], 1);
|
|
1604
|
+
};
|
|
1605
|
+
var staticRenderFns = [];
|
|
1606
|
+
|
|
1607
|
+
;// ./package/cms-column-card/View.vue?vue&type=template&id=2dcb9de2&scoped=true
|
|
1608
|
+
|
|
1609
|
+
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
|
|
1610
|
+
var es_array_push = __webpack_require__(4114);
|
|
1611
|
+
// EXTERNAL MODULE: ./package/baseComp.vue + 5 modules
|
|
1612
|
+
var baseComp = __webpack_require__(7135);
|
|
1613
|
+
// EXTERNAL MODULE: ./node_modules/vuedraggable/dist/vuedraggable.umd.js
|
|
1614
|
+
var vuedraggable_umd = __webpack_require__(9014);
|
|
1615
|
+
var vuedraggable_umd_default = /*#__PURE__*/__webpack_require__.n(vuedraggable_umd);
|
|
1616
|
+
// EXTERNAL MODULE: ./package/baseConfig.js
|
|
1617
|
+
var baseConfig = __webpack_require__(2128);
|
|
1618
|
+
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.find.js
|
|
1619
|
+
var es_iterator_find = __webpack_require__(116);
|
|
1620
|
+
// EXTERNAL MODULE: ./src/utils/index.js
|
|
1621
|
+
var utils = __webpack_require__(9563);
|
|
1622
|
+
;// ./src/views/standard_page.js
|
|
1623
|
+
|
|
1624
|
+
|
|
1625
|
+
|
|
1626
|
+
|
|
1627
|
+
|
|
1628
|
+
const standard_page_list = [{
|
|
1629
|
+
id: 1,
|
|
1630
|
+
componentId: 1,
|
|
1631
|
+
componentName: "范本1-防诈骗提示",
|
|
1632
|
+
standList: ["cms-banner", "cms-titleCenter", "cms-lineThree"]
|
|
1633
|
+
}, {
|
|
1634
|
+
id: 2,
|
|
1635
|
+
componentId: 2,
|
|
1636
|
+
componentName: "范本2-员工优惠",
|
|
1637
|
+
standList: ["cms-banner", "cms-description", "cms-activityCountdown", "cms-titleLeft", "cms-proCard", "cms-termsAndConditions"]
|
|
1638
|
+
}];
|
|
1639
|
+
const getComponentKey = (compList, id, noCompId = false) => {
|
|
1640
|
+
if (noCompId) return id;
|
|
1641
|
+
let compConfig = compList.find(item => item.id == id);
|
|
1642
|
+
if (compConfig.type == "1") {
|
|
1643
|
+
return compConfig.componentId;
|
|
1644
|
+
}
|
|
1645
|
+
return "cms-dynamic-comp";
|
|
1646
|
+
};
|
|
1647
|
+
const getCopyTemplateCompConfig = (compList, componentKey) => {
|
|
1648
|
+
let otherConfig = {};
|
|
1649
|
+
const configureJson = compList.find(item => item.id == componentKey).configureJson;
|
|
1650
|
+
if (configureJson.wujieConfig) {
|
|
1651
|
+
//如果是第三方组件加一个临时标识
|
|
1652
|
+
otherConfig = {
|
|
1653
|
+
originalComponentId: configureJson.componentId,
|
|
1654
|
+
originalVersionId: configureJson.wujieConfig.versionId,
|
|
1655
|
+
operation: "copyTemplate"
|
|
1656
|
+
};
|
|
1657
|
+
}
|
|
1658
|
+
return {
|
|
1659
|
+
...configureJson,
|
|
1660
|
+
componentId: (0,utils/* getUuidCode */.J0)(32),
|
|
1661
|
+
...otherConfig
|
|
1662
|
+
};
|
|
1663
|
+
};
|
|
1664
|
+
const isStaticComp = componentKey => {
|
|
1665
|
+
return ["cms-header", "cms-footer", "cms-breadCrumb"].includes(componentKey);
|
|
1666
|
+
};
|
|
1667
|
+
const getWujieCompInfo = (compList, componentId, isTemplate) => {
|
|
1668
|
+
let compConfig = compList.find(item => item.id == componentId);
|
|
1669
|
+
if (isTemplate) if (compConfig.type == "1") {
|
|
1670
|
+
return compConfig;
|
|
1671
|
+
}
|
|
1672
|
+
return {
|
|
1673
|
+
...compConfig
|
|
1674
|
+
};
|
|
1675
|
+
};
|
|
1676
|
+
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-85.use[1]!./node_modules/babel-loader/lib/index.js??clonedRuleSet-41.use!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./package/cms-column-card/View.vue?vue&type=script&lang=js
|
|
1677
|
+
|
|
1678
|
+
|
|
1679
|
+
|
|
1680
|
+
|
|
1681
|
+
|
|
1682
|
+
|
|
1683
|
+
/* harmony default export */ var Viewvue_type_script_lang_js = ({
|
|
1684
|
+
name: "cms-column-card",
|
|
1685
|
+
components: {
|
|
1686
|
+
BaseComp: baseComp["default"],
|
|
1687
|
+
Draggable: (vuedraggable_umd_default())
|
|
1688
|
+
},
|
|
1689
|
+
props: {
|
|
1690
|
+
data: {
|
|
1691
|
+
type: Object,
|
|
1692
|
+
default: () => {
|
|
1693
|
+
return {};
|
|
1694
|
+
}
|
|
1695
|
+
},
|
|
1696
|
+
nowCompId: {
|
|
1697
|
+
type: [String, Number],
|
|
1698
|
+
default: ""
|
|
1699
|
+
},
|
|
1700
|
+
isOpcacity: {
|
|
1701
|
+
type: Boolean,
|
|
1702
|
+
default: true
|
|
1703
|
+
},
|
|
1704
|
+
lang: {
|
|
1705
|
+
type: String,
|
|
1706
|
+
default: "zh-HK"
|
|
1707
|
+
},
|
|
1708
|
+
isMobile: {
|
|
1709
|
+
type: Boolean,
|
|
1710
|
+
default: false
|
|
1711
|
+
},
|
|
1712
|
+
mobileLayout: {
|
|
1713
|
+
type: String,
|
|
1714
|
+
default: ""
|
|
1715
|
+
}
|
|
1716
|
+
},
|
|
1717
|
+
data() {
|
|
1718
|
+
return {
|
|
1719
|
+
configData: {},
|
|
1720
|
+
messFold: true,
|
|
1721
|
+
showAddCom: false,
|
|
1722
|
+
temporaryList: []
|
|
1723
|
+
};
|
|
1724
|
+
},
|
|
1725
|
+
computed: {
|
|
1726
|
+
isConfigPage() {
|
|
1727
|
+
return this.$EventBus && this.isOpcacity;
|
|
1728
|
+
},
|
|
1729
|
+
groupConfigForMain() {
|
|
1730
|
+
return {
|
|
1731
|
+
name: "task",
|
|
1732
|
+
pull: true,
|
|
1733
|
+
// A列表的元素可以被拖出
|
|
1734
|
+
put: (to, from, dragEl) => {
|
|
1735
|
+
console.log(from.el.classList);
|
|
1736
|
+
if (from.el.classList.contains("main_drag")) {
|
|
1737
|
+
const dataId = this.findFirstComponentKey(dragEl);
|
|
1738
|
+
const allowedComponents = ["cms-text", "cms-image", "cms-video", "cms-button", "cms-richText", "cms-column"];
|
|
1739
|
+
console.log("allowedComponents", dataId);
|
|
1740
|
+
if (dataId === "cms-column") {
|
|
1741
|
+
if (!this.checkColumnNestingLevel()) {
|
|
1742
|
+
console.log("cms-column 嵌套层级超出限制");
|
|
1743
|
+
return false;
|
|
1744
|
+
}
|
|
1745
|
+
}
|
|
1746
|
+
return allowedComponents.includes(dataId);
|
|
1747
|
+
}
|
|
1748
|
+
return true;
|
|
1749
|
+
}
|
|
1750
|
+
};
|
|
1751
|
+
},
|
|
1752
|
+
// 卡片容器样式
|
|
1753
|
+
cardContainerStyle() {
|
|
1754
|
+
return {
|
|
1755
|
+
backgroundImage: this.configData.backgroundImage ? `url('${this.configData.backgroundImage}')` : "none",
|
|
1756
|
+
backgroundSize: "cover",
|
|
1757
|
+
backgroundRepeat: "no-repeat",
|
|
1758
|
+
backgroundPosition: "center center",
|
|
1759
|
+
height: this.getContainerHeight(),
|
|
1760
|
+
border: this.getContainerBorder(),
|
|
1761
|
+
borderRadius: this.getContainerBorderRadius(),
|
|
1762
|
+
backgroundColor: this.configData.backgroundColor || "transparent",
|
|
1763
|
+
boxShadow: this.configData.boxShadow || "none"
|
|
1764
|
+
};
|
|
1765
|
+
}
|
|
1766
|
+
},
|
|
1767
|
+
mounted() {
|
|
1768
|
+
if (this.$EventBus) {
|
|
1769
|
+
this.$EventBus.$on("handleDragEnd", () => {
|
|
1770
|
+
this.showAddCom = false;
|
|
1771
|
+
});
|
|
1772
|
+
}
|
|
1773
|
+
},
|
|
1774
|
+
watch: {},
|
|
1775
|
+
methods: {
|
|
1776
|
+
findFirstComponentKey(root) {
|
|
1777
|
+
var _root$querySelector;
|
|
1778
|
+
if (!root) return null;
|
|
1779
|
+
|
|
1780
|
+
// 若起点自身就有
|
|
1781
|
+
if (root.nodeType === 1 && root.hasAttribute("component-key")) {
|
|
1782
|
+
return root.getAttribute("component-key");
|
|
1783
|
+
}
|
|
1784
|
+
|
|
1785
|
+
// 向下查找第一个匹配的后代
|
|
1786
|
+
const el = (_root$querySelector = root.querySelector) === null || _root$querySelector === void 0 ? void 0 : _root$querySelector.call(root, "[component-key]");
|
|
1787
|
+
return el ? el.getAttribute("component-key") : null;
|
|
1788
|
+
},
|
|
1789
|
+
// 获取容器高度
|
|
1790
|
+
getContainerHeight() {
|
|
1791
|
+
if (this.configData.heightType === "fixed") {
|
|
1792
|
+
return `${this.configData.fixedHeight}px`;
|
|
1793
|
+
}
|
|
1794
|
+
return this.isMobile && this.mobileLayout == "vertical" ? "auto" : "100%";
|
|
1795
|
+
},
|
|
1796
|
+
// 获取容器边框
|
|
1797
|
+
getContainerBorder() {
|
|
1798
|
+
if (this.configData.borderWidth) {
|
|
1799
|
+
return `${this.configData.borderWidth}px ${this.configData.borderStyle} ${this.configData.borderColor}`;
|
|
1800
|
+
}
|
|
1801
|
+
return "none";
|
|
1802
|
+
},
|
|
1803
|
+
// 获取容器圆角
|
|
1804
|
+
getContainerBorderRadius() {
|
|
1805
|
+
if (this.configData.borderRadius) {
|
|
1806
|
+
return `${this.configData.borderRadius}px`;
|
|
1807
|
+
}
|
|
1808
|
+
return "0";
|
|
1809
|
+
},
|
|
1810
|
+
getConfigData(configData) {
|
|
1811
|
+
this.configData = configData;
|
|
1812
|
+
},
|
|
1813
|
+
foldMessText() {
|
|
1814
|
+
this.messFold = !this.messFold;
|
|
1815
|
+
},
|
|
1816
|
+
decodeJumpUrl(url) {
|
|
1817
|
+
if (!url) return;
|
|
1818
|
+
top.location.href = url;
|
|
1819
|
+
},
|
|
1820
|
+
onStart(evt) {
|
|
1821
|
+
console.log("drag start in column-card", evt);
|
|
1822
|
+
this.showAddCom = true;
|
|
1823
|
+
},
|
|
1824
|
+
// 限制拖拽的组件类型
|
|
1825
|
+
onMove(evt) {
|
|
1826
|
+
const {
|
|
1827
|
+
draggedContext
|
|
1828
|
+
} = evt;
|
|
1829
|
+
|
|
1830
|
+
// 允许的组件类型
|
|
1831
|
+
const allowedComponents = ["cms-text", "cms-image", "cms-video", "cms-button", "cms-richText", "cms-column" // 允许拖入 cms-column
|
|
1832
|
+
];
|
|
1833
|
+
|
|
1834
|
+
// 如果是从外部拖入的组件
|
|
1835
|
+
if (draggedContext && draggedContext.element) {
|
|
1836
|
+
const componentType = draggedContext.element.cmsCompName;
|
|
1837
|
+
if (componentType && !allowedComponents.includes(componentType)) {
|
|
1838
|
+
console.log("draggedContext.element", draggedContext.element);
|
|
1839
|
+
console.log(`组件类型 ${componentType} 不允许拖入 column-card`);
|
|
1840
|
+
return false;
|
|
1841
|
+
}
|
|
1842
|
+
|
|
1843
|
+
// 特殊处理 cms-column:检查嵌套层级
|
|
1844
|
+
if (componentType === "cms-column") {
|
|
1845
|
+
if (!this.checkColumnNestingLevel()) {
|
|
1846
|
+
console.log("cms-column 嵌套层级超出限制");
|
|
1847
|
+
return false;
|
|
1848
|
+
}
|
|
1849
|
+
}
|
|
1850
|
+
}
|
|
1851
|
+
return true;
|
|
1852
|
+
},
|
|
1853
|
+
// 检查 cms-column 嵌套层级
|
|
1854
|
+
checkColumnNestingLevel() {
|
|
1855
|
+
// 检查当前 column-card 是否已经在 cms-column 内部
|
|
1856
|
+
let parent = this.$parent;
|
|
1857
|
+
let columnDepth = 0;
|
|
1858
|
+
while (parent) {
|
|
1859
|
+
// 检查父组件是否是 cms-column 或包含 cms-column
|
|
1860
|
+
if (parent.$options.name === "cms-column" || parent.$data && parent.$data.data && parent.$data.data.cmsCompName === "cms-column") {
|
|
1861
|
+
columnDepth++;
|
|
1862
|
+
}
|
|
1863
|
+
|
|
1864
|
+
// 如果已经有一层 cms-column,则不允许再嵌套
|
|
1865
|
+
if (columnDepth >= 2) {
|
|
1866
|
+
console.log(`检测到 cms-column 嵌套层级: ${columnDepth}, 超出限制`);
|
|
1867
|
+
return false;
|
|
1868
|
+
}
|
|
1869
|
+
parent = parent.$parent;
|
|
1870
|
+
}
|
|
1871
|
+
console.log(`cms-column 嵌套层级检查通过: ${columnDepth}`);
|
|
1872
|
+
return true;
|
|
1873
|
+
},
|
|
1874
|
+
// 处理拖拽悬停
|
|
1875
|
+
dragover(e) {
|
|
1876
|
+
e.preventDefault();
|
|
1877
|
+
this.showAddCom = true;
|
|
1878
|
+
},
|
|
1879
|
+
// 处理拖拽放置
|
|
1880
|
+
drop(e) {
|
|
1881
|
+
e.preventDefault();
|
|
1882
|
+
const componentKey = e.dataTransfer.getData("componentKey");
|
|
1883
|
+
let temporaryId = "";
|
|
1884
|
+
this.temporaryList = e.dataTransfer.getData("temporaryList") ? JSON.parse(e.dataTransfer.getData("temporaryList")) : [];
|
|
1885
|
+
console.log("cms-colum-card-drop", componentKey, this.temporaryList);
|
|
1886
|
+
if (!componentKey) return;
|
|
1887
|
+
const isTemporaryItem = e.dataTransfer.getData("isTemporaryItem");
|
|
1888
|
+
const isTemporary = isTemporaryItem === "true";
|
|
1889
|
+
if (isTemporary) {
|
|
1890
|
+
temporaryId = getCopyTemplateCompConfig(this.temporaryList, componentKey).cmsCompName;
|
|
1891
|
+
}
|
|
1892
|
+
const componentType = isTemporary ? temporaryId : componentKey;
|
|
1893
|
+
// 允许的组件类型
|
|
1894
|
+
const allowedComponents = ["cms-text", "cms-image", "cms-video", "cms-button", "cms-richText", "cms-column" // 允许拖入 cms-column
|
|
1895
|
+
];
|
|
1896
|
+
|
|
1897
|
+
// 检查组件类型是否允许
|
|
1898
|
+
if (!allowedComponents.includes(componentType)) {
|
|
1899
|
+
console.log(`组件类型 ${componentType} 不允许拖入 column-card`);
|
|
1900
|
+
this.$message && this.$message.warning(`该组件类型不支持拖入卡片容器`);
|
|
1901
|
+
this.showAddCom = false;
|
|
1902
|
+
return;
|
|
1903
|
+
}
|
|
1904
|
+
|
|
1905
|
+
// 特殊处理 cms-column:检查嵌套层级
|
|
1906
|
+
if (componentType === "cms-column") {
|
|
1907
|
+
if (!this.checkColumnNestingLevel()) {
|
|
1908
|
+
console.log("cms-column 嵌套层级超出限制");
|
|
1909
|
+
this.$message && this.$message.warning(`cms-column 只能嵌套一层`);
|
|
1910
|
+
this.showAddCom = false;
|
|
1911
|
+
return;
|
|
1912
|
+
}
|
|
1913
|
+
}
|
|
1914
|
+
this.addOneComp(e, componentKey);
|
|
1915
|
+
},
|
|
1916
|
+
// 添加组件到卡片容器
|
|
1917
|
+
addOneComp(e, componentKey) {
|
|
1918
|
+
this.showAddCom = false;
|
|
1919
|
+
console.log("drop to column-card", componentKey);
|
|
1920
|
+
|
|
1921
|
+
// 动态导入组件配置
|
|
1922
|
+
let initCompData;
|
|
1923
|
+
try {
|
|
1924
|
+
const isTemporaryItem = e.dataTransfer.getData("isTemporaryItem");
|
|
1925
|
+
const isTemporary = isTemporaryItem === "true";
|
|
1926
|
+
if (isTemporary) {
|
|
1927
|
+
initCompData = getCopyTemplateCompConfig(this.temporaryList, componentKey);
|
|
1928
|
+
} else {
|
|
1929
|
+
initCompData = __webpack_require__(1640)(`./${componentKey}`).default.settings(componentKey);
|
|
1930
|
+
}
|
|
1931
|
+
if (!isTemporary) {
|
|
1932
|
+
initCompData = {
|
|
1933
|
+
...initCompData,
|
|
1934
|
+
styleConfig: {
|
|
1935
|
+
pc: componentKey == "cms-text" ? [...(0,baseConfig.styleBaseConfig)(16, 16, 0, 0, "px")] : [...(0,baseConfig.styleBaseConfig)(0, 0, 0, 0, "px")],
|
|
1936
|
+
mb: componentKey == "cms-text" ? [...(0,baseConfig.styleBaseConfig)(12, 12, 0, 0, "px")] : [...(0,baseConfig.styleBaseConfig)(0, 0, 0, 0, "px")]
|
|
1937
|
+
}
|
|
1938
|
+
};
|
|
1939
|
+
}
|
|
1940
|
+
} catch (error) {
|
|
1941
|
+
console.error(`无法加载组件 ${componentKey}:`, error);
|
|
1942
|
+
this.$message && this.$message.error(`组件加载失败`);
|
|
1943
|
+
return;
|
|
1944
|
+
}
|
|
1945
|
+
const toElementId = e.toElement.id;
|
|
1946
|
+
if (toElementId === `cardTarget${this.data.componentId}` || toElementId.includes("cardTargetdown")) {
|
|
1947
|
+
// 添加到卡片容器末尾
|
|
1948
|
+
this.data.childList.push(initCompData);
|
|
1949
|
+
} else if (toElementId.includes("cardTargetup")) {
|
|
1950
|
+
// 插入到指定位置
|
|
1951
|
+
const underComponentId = toElementId.split("-cardTargetup")[0];
|
|
1952
|
+
const index = this.data.childList.findIndex(item => item.componentId === underComponentId);
|
|
1953
|
+
if (index !== -1) {
|
|
1954
|
+
this.data.childList.splice(index, 0, initCompData);
|
|
1955
|
+
}
|
|
1956
|
+
}
|
|
1957
|
+
|
|
1958
|
+
// 触发数据更新
|
|
1959
|
+
this.$emit("update:data", this.data);
|
|
1960
|
+
if (componentKey === "cms-column") {
|
|
1961
|
+
this.$EventBus.$emit("handleNowComp", initCompData);
|
|
1962
|
+
}
|
|
1963
|
+
}
|
|
1964
|
+
}
|
|
1965
|
+
});
|
|
1966
|
+
;// ./package/cms-column-card/View.vue?vue&type=script&lang=js
|
|
1967
|
+
/* harmony default export */ var cms_column_card_Viewvue_type_script_lang_js = (Viewvue_type_script_lang_js);
|
|
1968
|
+
;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-67.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-67.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-67.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-67.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-42.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./package/cms-column-card/View.vue?vue&type=style&index=0&id=2dcb9de2&prod&lang=scss&scoped=true
|
|
1969
|
+
// extracted by mini-css-extract-plugin
|
|
1970
|
+
|
|
1971
|
+
;// ./package/cms-column-card/View.vue?vue&type=style&index=0&id=2dcb9de2&prod&lang=scss&scoped=true
|
|
1972
|
+
|
|
1973
|
+
// EXTERNAL MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
|
|
1974
|
+
var componentNormalizer = __webpack_require__(1656);
|
|
1975
|
+
;// ./package/cms-column-card/View.vue
|
|
1976
|
+
|
|
1977
|
+
|
|
1978
|
+
|
|
1979
|
+
;
|
|
1980
|
+
|
|
1981
|
+
|
|
1982
|
+
/* normalize component */
|
|
1983
|
+
|
|
1984
|
+
var component = (0,componentNormalizer/* default */.A)(
|
|
1985
|
+
cms_column_card_Viewvue_type_script_lang_js,
|
|
1986
|
+
render,
|
|
1987
|
+
staticRenderFns,
|
|
1988
|
+
false,
|
|
1989
|
+
null,
|
|
1990
|
+
"2dcb9de2",
|
|
1991
|
+
null
|
|
1992
|
+
|
|
1993
|
+
)
|
|
1994
|
+
|
|
1995
|
+
/* harmony default export */ var View = (component.exports);
|
|
1996
|
+
|
|
1202
1997
|
/***/ }),
|
|
1203
1998
|
|
|
1204
1999
|
/***/ 713:
|
|
@@ -19903,13 +20698,13 @@ var map = {
|
|
|
19903
20698
|
"./cms-column": 3154,
|
|
19904
20699
|
"./cms-column-card": 3583,
|
|
19905
20700
|
"./cms-column-card/": 3583,
|
|
19906
|
-
"./cms-column-card/View":
|
|
19907
|
-
"./cms-column-card/View.vue":
|
|
20701
|
+
"./cms-column-card/View": 688,
|
|
20702
|
+
"./cms-column-card/View.vue": 688,
|
|
19908
20703
|
"./cms-column-card/index": 3583,
|
|
19909
20704
|
"./cms-column-card/index.js": 3583,
|
|
19910
20705
|
"./cms-column/": 3154,
|
|
19911
|
-
"./cms-column/View":
|
|
19912
|
-
"./cms-column/View.vue":
|
|
20706
|
+
"./cms-column/View": 348,
|
|
20707
|
+
"./cms-column/View.vue": 348,
|
|
19913
20708
|
"./cms-column/index": 3154,
|
|
19914
20709
|
"./cms-column/index.js": 3154,
|
|
19915
20710
|
"./cms-description": 98,
|
|
@@ -20058,8 +20853,8 @@ var map = {
|
|
|
20058
20853
|
"./cms-video-group/index": 2697,
|
|
20059
20854
|
"./cms-video-group/index.js": 2697,
|
|
20060
20855
|
"./cms-video/": 3275,
|
|
20061
|
-
"./cms-video/View":
|
|
20062
|
-
"./cms-video/View.vue":
|
|
20856
|
+
"./cms-video/View": 5846,
|
|
20857
|
+
"./cms-video/View.vue": 5846,
|
|
20063
20858
|
"./cms-video/index": 3275,
|
|
20064
20859
|
"./cms-video/index.js": 3275,
|
|
20065
20860
|
"./cms-view": 725,
|
|
@@ -22559,19 +23354,19 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
22559
23354
|
|
|
22560
23355
|
const View = () => Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 4726));
|
|
22561
23356
|
const langData = {
|
|
22562
|
-
input1: "
|
|
23357
|
+
input1: "描述",
|
|
22563
23358
|
input2: "标题",
|
|
22564
|
-
input3: "
|
|
23359
|
+
input3: "高亮标题"
|
|
22565
23360
|
};
|
|
22566
23361
|
const configDataType = (0,_baseConfig__WEBPACK_IMPORTED_MODULE_0__.getLangDataType)(langData, {
|
|
22567
23362
|
input1: {
|
|
22568
|
-
label: "
|
|
23363
|
+
label: "描述"
|
|
22569
23364
|
},
|
|
22570
23365
|
input2: {
|
|
22571
23366
|
label: "标题"
|
|
22572
23367
|
},
|
|
22573
23368
|
input3: {
|
|
22574
|
-
label: "
|
|
23369
|
+
label: "高亮标题"
|
|
22575
23370
|
}
|
|
22576
23371
|
});
|
|
22577
23372
|
const validateSchema = (0,_baseConfig__WEBPACK_IMPORTED_MODULE_0__.getValidateSchema)(langData);
|
|
@@ -23511,7 +24306,7 @@ module.exports = Math.min;
|
|
|
23511
24306
|
__webpack_require__.r(__webpack_exports__);
|
|
23512
24307
|
/* harmony import */ var _baseConfig__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2128);
|
|
23513
24308
|
|
|
23514
|
-
const View = () => Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__,
|
|
24309
|
+
const View = () => Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 348));
|
|
23515
24310
|
const langData = {
|
|
23516
24311
|
// 布局配置
|
|
23517
24312
|
layoutType: "100",
|
|
@@ -23883,7 +24678,7 @@ module.exports = function (O) {
|
|
|
23883
24678
|
__webpack_require__.r(__webpack_exports__);
|
|
23884
24679
|
/* harmony import */ var _baseConfig__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2128);
|
|
23885
24680
|
|
|
23886
|
-
const View = () => Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__,
|
|
24681
|
+
const View = () => Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 5846));
|
|
23887
24682
|
const langData = {
|
|
23888
24683
|
// 视频源设置
|
|
23889
24684
|
title: '',
|
|
@@ -32457,7 +33252,7 @@ $({ target: 'Iterator', proto: true, real: true }, {
|
|
|
32457
33252
|
__webpack_require__.r(__webpack_exports__);
|
|
32458
33253
|
/* harmony import */ var _baseConfig__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2128);
|
|
32459
33254
|
|
|
32460
|
-
const View = () => Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__,
|
|
33255
|
+
const View = () => Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 688));
|
|
32461
33256
|
|
|
32462
33257
|
// 默认配置数据
|
|
32463
33258
|
const langData = {
|
|
@@ -36730,8 +37525,8 @@ var map = {
|
|
|
36730
37525
|
"./cms-banner/View.vue": 7747,
|
|
36731
37526
|
"./cms-button/View.vue": 1163,
|
|
36732
37527
|
"./cms-cells/View.vue": 983,
|
|
36733
|
-
"./cms-column-card/View.vue":
|
|
36734
|
-
"./cms-column/View.vue":
|
|
37528
|
+
"./cms-column-card/View.vue": 688,
|
|
37529
|
+
"./cms-column/View.vue": 348,
|
|
36735
37530
|
"./cms-description/View.vue": 6296,
|
|
36736
37531
|
"./cms-dynamic-comp/View.vue": 7298,
|
|
36737
37532
|
"./cms-iconFour/View.vue": 2946,
|
|
@@ -36756,7 +37551,7 @@ var map = {
|
|
|
36756
37551
|
"./cms-titleLeft/View.vue": 4598,
|
|
36757
37552
|
"./cms-via-storedValueCard/View.vue": 4109,
|
|
36758
37553
|
"./cms-video-group/View.vue": 103,
|
|
36759
|
-
"./cms-video/View.vue":
|
|
37554
|
+
"./cms-video/View.vue": 5846,
|
|
36760
37555
|
"./cms-view/View.vue": 3774
|
|
36761
37556
|
};
|
|
36762
37557
|
|
|
@@ -37618,6 +38413,383 @@ const validateSchema = (0,_baseConfig__WEBPACK_IMPORTED_MODULE_0__.getValidateSc
|
|
|
37618
38413
|
|
|
37619
38414
|
/***/ }),
|
|
37620
38415
|
|
|
38416
|
+
/***/ 5846:
|
|
38417
|
+
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
38418
|
+
|
|
38419
|
+
"use strict";
|
|
38420
|
+
// ESM COMPAT FLAG
|
|
38421
|
+
__webpack_require__.r(__webpack_exports__);
|
|
38422
|
+
|
|
38423
|
+
// EXPORTS
|
|
38424
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
38425
|
+
"default": function() { return /* binding */ View; }
|
|
38426
|
+
});
|
|
38427
|
+
|
|
38428
|
+
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-85.use[1]!./node_modules/babel-loader/lib/index.js??clonedRuleSet-41.use!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[4]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./package/cms-video/View.vue?vue&type=template&id=b1a44b52&scoped=true
|
|
38429
|
+
var render = function render() {
|
|
38430
|
+
var _vm = this,
|
|
38431
|
+
_c = _vm._self._c;
|
|
38432
|
+
return _c('BaseComp', _vm._b({
|
|
38433
|
+
attrs: {
|
|
38434
|
+
"data": _vm.data,
|
|
38435
|
+
"nowCompId": _vm.nowCompId,
|
|
38436
|
+
"isOpcacity": _vm.isOpcacity,
|
|
38437
|
+
"lang": _vm.lang
|
|
38438
|
+
},
|
|
38439
|
+
on: {
|
|
38440
|
+
"getConfigData": _vm.getConfigData
|
|
38441
|
+
}
|
|
38442
|
+
}, 'BaseComp', _vm.$attrs, false), [_c('section', {
|
|
38443
|
+
staticClass: "cms-video-container",
|
|
38444
|
+
class: [_vm.configData.customClass || ''],
|
|
38445
|
+
style: _vm.containerStyle
|
|
38446
|
+
}, [_c('div', {
|
|
38447
|
+
staticClass: "f-c-c"
|
|
38448
|
+
}, [_vm._v(_vm._s(_vm.configData.title))]), _c('div', {
|
|
38449
|
+
staticClass: "video-wrapper",
|
|
38450
|
+
style: _vm.wrapperStyle
|
|
38451
|
+
}, [_vm.videoType === 'direct' && _vm.configData.videoUrl ? _c('video', {
|
|
38452
|
+
staticClass: "cms-video direct-video",
|
|
38453
|
+
style: _vm.videoStyle,
|
|
38454
|
+
attrs: {
|
|
38455
|
+
"src": _vm.configData.videoUrl,
|
|
38456
|
+
"controls": _vm.configData.showControls,
|
|
38457
|
+
"autoplay": _vm.configData.autoplay,
|
|
38458
|
+
"loop": _vm.configData.loop,
|
|
38459
|
+
"poster": _vm.configData.posterUrl
|
|
38460
|
+
},
|
|
38461
|
+
domProps: {
|
|
38462
|
+
"muted": _vm.configData.muted
|
|
38463
|
+
},
|
|
38464
|
+
on: {
|
|
38465
|
+
"loadstart": _vm.onVideoLoadStart,
|
|
38466
|
+
"loadeddata": _vm.onVideoLoaded,
|
|
38467
|
+
"error": _vm.onVideoError
|
|
38468
|
+
}
|
|
38469
|
+
}) : _vm.configData.embedCode ? _c('div', {
|
|
38470
|
+
staticClass: "cms-video embed-video",
|
|
38471
|
+
style: _vm.videoStyle,
|
|
38472
|
+
domProps: {
|
|
38473
|
+
"innerHTML": _vm._s(_vm.configData.embedCode)
|
|
38474
|
+
}
|
|
38475
|
+
}) : _c('div', {
|
|
38476
|
+
staticClass: "video-placeholder",
|
|
38477
|
+
style: _vm.placeholderStyle
|
|
38478
|
+
}, [_c('img', {
|
|
38479
|
+
staticStyle: {
|
|
38480
|
+
"width": "97.82px",
|
|
38481
|
+
"height": "97.82px"
|
|
38482
|
+
},
|
|
38483
|
+
attrs: {
|
|
38484
|
+
"src": __webpack_require__(6148),
|
|
38485
|
+
"alt": "Video Camera"
|
|
38486
|
+
}
|
|
38487
|
+
})])])])]);
|
|
38488
|
+
};
|
|
38489
|
+
var staticRenderFns = [];
|
|
38490
|
+
|
|
38491
|
+
;// ./package/cms-video/View.vue?vue&type=template&id=b1a44b52&scoped=true
|
|
38492
|
+
|
|
38493
|
+
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.constructor.js
|
|
38494
|
+
var es_iterator_constructor = __webpack_require__(8111);
|
|
38495
|
+
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.for-each.js
|
|
38496
|
+
var es_iterator_for_each = __webpack_require__(7588);
|
|
38497
|
+
// EXTERNAL MODULE: ./package/baseComp.vue + 5 modules
|
|
38498
|
+
var baseComp = __webpack_require__(7135);
|
|
38499
|
+
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-85.use[1]!./node_modules/babel-loader/lib/index.js??clonedRuleSet-41.use!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./package/cms-video/View.vue?vue&type=script&lang=js
|
|
38500
|
+
|
|
38501
|
+
|
|
38502
|
+
|
|
38503
|
+
|
|
38504
|
+
|
|
38505
|
+
/* harmony default export */ var Viewvue_type_script_lang_js = ({
|
|
38506
|
+
name: "cms-video",
|
|
38507
|
+
components: {
|
|
38508
|
+
BaseComp: baseComp["default"]
|
|
38509
|
+
},
|
|
38510
|
+
props: {
|
|
38511
|
+
data: {
|
|
38512
|
+
type: Object,
|
|
38513
|
+
default: () => {
|
|
38514
|
+
return {};
|
|
38515
|
+
}
|
|
38516
|
+
},
|
|
38517
|
+
nowCompId: {
|
|
38518
|
+
type: [String, Number],
|
|
38519
|
+
default: ""
|
|
38520
|
+
},
|
|
38521
|
+
isOpcacity: {
|
|
38522
|
+
type: Boolean,
|
|
38523
|
+
default: true
|
|
38524
|
+
},
|
|
38525
|
+
lang: {
|
|
38526
|
+
type: String,
|
|
38527
|
+
default: "zh-HK"
|
|
38528
|
+
}
|
|
38529
|
+
},
|
|
38530
|
+
data() {
|
|
38531
|
+
return {
|
|
38532
|
+
configData: {},
|
|
38533
|
+
videoLoaded: false,
|
|
38534
|
+
videoError: false,
|
|
38535
|
+
// 默认配置数据
|
|
38536
|
+
defaultConfig: {
|
|
38537
|
+
// 视频源设置
|
|
38538
|
+
videoType: "direct",
|
|
38539
|
+
videoUrl: "",
|
|
38540
|
+
embedCode: "",
|
|
38541
|
+
posterUrl: "",
|
|
38542
|
+
// 播放控制
|
|
38543
|
+
showControls: true,
|
|
38544
|
+
autoplay: false,
|
|
38545
|
+
loop: false,
|
|
38546
|
+
muted: false,
|
|
38547
|
+
// 尺寸控制
|
|
38548
|
+
widthType: "auto",
|
|
38549
|
+
widthValue: 100,
|
|
38550
|
+
heightType: "auto",
|
|
38551
|
+
heightValue: 100,
|
|
38552
|
+
aspectRatio: "16:9",
|
|
38553
|
+
customAspectRatio: "16:9",
|
|
38554
|
+
maxWidth: 0,
|
|
38555
|
+
maxHeight: 0,
|
|
38556
|
+
// 样式设置
|
|
38557
|
+
borderRadius: 0,
|
|
38558
|
+
// 高级配置
|
|
38559
|
+
customClass: "",
|
|
38560
|
+
customStyle: ""
|
|
38561
|
+
}
|
|
38562
|
+
};
|
|
38563
|
+
},
|
|
38564
|
+
mounted() {
|
|
38565
|
+
this.initConfigData();
|
|
38566
|
+
},
|
|
38567
|
+
watch: {
|
|
38568
|
+
configData: {
|
|
38569
|
+
handler() {
|
|
38570
|
+
this.updateStyles();
|
|
38571
|
+
},
|
|
38572
|
+
deep: true
|
|
38573
|
+
}
|
|
38574
|
+
},
|
|
38575
|
+
computed: {
|
|
38576
|
+
// 视频类型
|
|
38577
|
+
videoType() {
|
|
38578
|
+
return this.configData.videoType || this.defaultConfig.videoType;
|
|
38579
|
+
},
|
|
38580
|
+
// 实际使用的宽高比
|
|
38581
|
+
actualAspectRatio() {
|
|
38582
|
+
const config = {
|
|
38583
|
+
...this.defaultConfig,
|
|
38584
|
+
...this.configData
|
|
38585
|
+
};
|
|
38586
|
+
if (config.aspectRatio === "custom") {
|
|
38587
|
+
return config.customAspectRatio || "16:9";
|
|
38588
|
+
}
|
|
38589
|
+
return config.aspectRatio;
|
|
38590
|
+
},
|
|
38591
|
+
// 容器样式
|
|
38592
|
+
containerStyle() {
|
|
38593
|
+
const config = {
|
|
38594
|
+
...this.defaultConfig,
|
|
38595
|
+
...this.configData
|
|
38596
|
+
};
|
|
38597
|
+
return {
|
|
38598
|
+
...this.parseCustomStyle(config.customStyle)
|
|
38599
|
+
};
|
|
38600
|
+
},
|
|
38601
|
+
// 包装器样式
|
|
38602
|
+
wrapperStyle() {
|
|
38603
|
+
const config = {
|
|
38604
|
+
...this.defaultConfig,
|
|
38605
|
+
...this.configData
|
|
38606
|
+
};
|
|
38607
|
+
let width = "auto";
|
|
38608
|
+
let height = "auto";
|
|
38609
|
+
|
|
38610
|
+
// 宽度设置
|
|
38611
|
+
if (config.widthType === "fixed") {
|
|
38612
|
+
width = `${config.widthValue}px`;
|
|
38613
|
+
} else if (config.widthType === "percent") {
|
|
38614
|
+
width = `${config.widthValue}%`;
|
|
38615
|
+
}
|
|
38616
|
+
|
|
38617
|
+
// 高度设置
|
|
38618
|
+
if (config.heightType === "fixed") {
|
|
38619
|
+
height = `${config.heightValue}px`;
|
|
38620
|
+
} else if (config.heightType === "percent") {
|
|
38621
|
+
height = `${config.heightValue}%`;
|
|
38622
|
+
} else if (config.heightType === "aspect") {
|
|
38623
|
+
// 根据宽高比计算高度
|
|
38624
|
+
height = "auto";
|
|
38625
|
+
}
|
|
38626
|
+
return {
|
|
38627
|
+
width,
|
|
38628
|
+
height,
|
|
38629
|
+
maxWidth: config.maxWidth > 0 ? `${config.maxWidth}px` : "none",
|
|
38630
|
+
maxHeight: config.maxHeight > 0 ? `${config.maxHeight}px` : "none",
|
|
38631
|
+
borderRadius: `${config.borderRadius}px`,
|
|
38632
|
+
overflow: "hidden",
|
|
38633
|
+
display: "block",
|
|
38634
|
+
position: "relative"
|
|
38635
|
+
};
|
|
38636
|
+
},
|
|
38637
|
+
// 视频样式
|
|
38638
|
+
videoStyle() {
|
|
38639
|
+
const config = {
|
|
38640
|
+
...this.defaultConfig,
|
|
38641
|
+
...this.configData
|
|
38642
|
+
};
|
|
38643
|
+
let style = {
|
|
38644
|
+
width: "100%",
|
|
38645
|
+
height: "100%",
|
|
38646
|
+
display: "block",
|
|
38647
|
+
border: "none",
|
|
38648
|
+
outline: "none"
|
|
38649
|
+
};
|
|
38650
|
+
|
|
38651
|
+
// 如果是宽高比模式,设置aspect-ratio
|
|
38652
|
+
if (config.heightType === "aspect") {
|
|
38653
|
+
style.aspectRatio = this.actualAspectRatio.replace(":", "/");
|
|
38654
|
+
}
|
|
38655
|
+
return style;
|
|
38656
|
+
},
|
|
38657
|
+
// 占位符样式
|
|
38658
|
+
placeholderStyle() {
|
|
38659
|
+
const config = {
|
|
38660
|
+
...this.defaultConfig,
|
|
38661
|
+
...this.configData
|
|
38662
|
+
};
|
|
38663
|
+
let width = "100%";
|
|
38664
|
+
let height = "auto";
|
|
38665
|
+
|
|
38666
|
+
// 如果设置了固定尺寸,使用设置的尺寸
|
|
38667
|
+
if (config.widthType === "fixed") {
|
|
38668
|
+
width = `${config.widthValue}px`;
|
|
38669
|
+
} else if (config.widthType === "percent") {
|
|
38670
|
+
width = `${config.widthValue}%`;
|
|
38671
|
+
}
|
|
38672
|
+
if (config.heightType === "fixed") {
|
|
38673
|
+
height = `${config.heightValue}px`;
|
|
38674
|
+
} else if (config.heightType === "aspect") {
|
|
38675
|
+
// 使用aspect-ratio保持16:9比例
|
|
38676
|
+
height = "auto";
|
|
38677
|
+
} else {
|
|
38678
|
+
// 默认使用16:9比例
|
|
38679
|
+
height = "auto";
|
|
38680
|
+
}
|
|
38681
|
+
const style = {
|
|
38682
|
+
width,
|
|
38683
|
+
height,
|
|
38684
|
+
backgroundColor: "#f5f7fa",
|
|
38685
|
+
border: "1px dashed #dcdfe6",
|
|
38686
|
+
borderRadius: `${config.borderRadius}px`,
|
|
38687
|
+
display: "flex",
|
|
38688
|
+
flexDirection: "column",
|
|
38689
|
+
alignItems: "center",
|
|
38690
|
+
justifyContent: "center",
|
|
38691
|
+
color: "#909399",
|
|
38692
|
+
fontSize: "14px"
|
|
38693
|
+
};
|
|
38694
|
+
|
|
38695
|
+
// 如果不是固定高度,使用aspect-ratio保持16:9比例
|
|
38696
|
+
if (config.heightType !== "fixed") {
|
|
38697
|
+
style.aspectRatio = this.actualAspectRatio.replace(":", "/");
|
|
38698
|
+
}
|
|
38699
|
+
return style;
|
|
38700
|
+
}
|
|
38701
|
+
},
|
|
38702
|
+
methods: {
|
|
38703
|
+
// 初始化配置数据
|
|
38704
|
+
initConfigData() {
|
|
38705
|
+
this.configData = {
|
|
38706
|
+
...this.defaultConfig,
|
|
38707
|
+
...this.configData
|
|
38708
|
+
};
|
|
38709
|
+
},
|
|
38710
|
+
// 获取配置数据
|
|
38711
|
+
getConfigData(configData) {
|
|
38712
|
+
this.configData = {
|
|
38713
|
+
...this.defaultConfig,
|
|
38714
|
+
...configData
|
|
38715
|
+
};
|
|
38716
|
+
this.updateStyles();
|
|
38717
|
+
},
|
|
38718
|
+
// 更新样式
|
|
38719
|
+
updateStyles() {
|
|
38720
|
+
this.$nextTick(() => {
|
|
38721
|
+
this.$forceUpdate();
|
|
38722
|
+
});
|
|
38723
|
+
},
|
|
38724
|
+
// 视频开始加载
|
|
38725
|
+
onVideoLoadStart() {
|
|
38726
|
+
this.videoLoaded = false;
|
|
38727
|
+
this.videoError = false;
|
|
38728
|
+
},
|
|
38729
|
+
// 视频加载完成
|
|
38730
|
+
onVideoLoaded() {
|
|
38731
|
+
this.videoLoaded = true;
|
|
38732
|
+
this.videoError = false;
|
|
38733
|
+
},
|
|
38734
|
+
// 视频加载失败
|
|
38735
|
+
onVideoError() {
|
|
38736
|
+
this.videoLoaded = false;
|
|
38737
|
+
this.videoError = true;
|
|
38738
|
+
},
|
|
38739
|
+
// 解析自定义样式
|
|
38740
|
+
parseCustomStyle(customStyle) {
|
|
38741
|
+
if (!customStyle) return {};
|
|
38742
|
+
try {
|
|
38743
|
+
const styles = {};
|
|
38744
|
+
const declarations = customStyle.split(";");
|
|
38745
|
+
declarations.forEach(declaration => {
|
|
38746
|
+
const [property, value] = declaration.split(":");
|
|
38747
|
+
if (property && value) {
|
|
38748
|
+
const camelCaseProperty = property.trim().replace(/-([a-z])/g, g => g[1].toUpperCase());
|
|
38749
|
+
styles[camelCaseProperty] = value.trim();
|
|
38750
|
+
}
|
|
38751
|
+
});
|
|
38752
|
+
return styles;
|
|
38753
|
+
} catch (error) {
|
|
38754
|
+
console.warn("解析自定义样式失败:", error);
|
|
38755
|
+
return {};
|
|
38756
|
+
}
|
|
38757
|
+
}
|
|
38758
|
+
}
|
|
38759
|
+
});
|
|
38760
|
+
;// ./package/cms-video/View.vue?vue&type=script&lang=js
|
|
38761
|
+
/* harmony default export */ var cms_video_Viewvue_type_script_lang_js = (Viewvue_type_script_lang_js);
|
|
38762
|
+
;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-67.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-67.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-67.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-67.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-42.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./package/cms-video/View.vue?vue&type=style&index=0&id=b1a44b52&prod&lang=scss&scoped=true
|
|
38763
|
+
// extracted by mini-css-extract-plugin
|
|
38764
|
+
|
|
38765
|
+
;// ./package/cms-video/View.vue?vue&type=style&index=0&id=b1a44b52&prod&lang=scss&scoped=true
|
|
38766
|
+
|
|
38767
|
+
// EXTERNAL MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
|
|
38768
|
+
var componentNormalizer = __webpack_require__(1656);
|
|
38769
|
+
;// ./package/cms-video/View.vue
|
|
38770
|
+
|
|
38771
|
+
|
|
38772
|
+
|
|
38773
|
+
;
|
|
38774
|
+
|
|
38775
|
+
|
|
38776
|
+
/* normalize component */
|
|
38777
|
+
|
|
38778
|
+
var component = (0,componentNormalizer/* default */.A)(
|
|
38779
|
+
cms_video_Viewvue_type_script_lang_js,
|
|
38780
|
+
render,
|
|
38781
|
+
staticRenderFns,
|
|
38782
|
+
false,
|
|
38783
|
+
null,
|
|
38784
|
+
"b1a44b52",
|
|
38785
|
+
null
|
|
38786
|
+
|
|
38787
|
+
)
|
|
38788
|
+
|
|
38789
|
+
/* harmony default export */ var View = (component.exports);
|
|
38790
|
+
|
|
38791
|
+
/***/ }),
|
|
38792
|
+
|
|
37621
38793
|
/***/ 5854:
|
|
37622
38794
|
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
|
|
37623
38795
|
|
|
@@ -41538,384 +42710,6 @@ Sortable.mount(Remove, Revert);
|
|
|
41538
42710
|
/* harmony default export */ __webpack_exports__["default"] = (Sortable);
|
|
41539
42711
|
|
|
41540
42712
|
|
|
41541
|
-
/***/ }),
|
|
41542
|
-
|
|
41543
|
-
/***/ 6253:
|
|
41544
|
-
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
41545
|
-
|
|
41546
|
-
"use strict";
|
|
41547
|
-
// ESM COMPAT FLAG
|
|
41548
|
-
__webpack_require__.r(__webpack_exports__);
|
|
41549
|
-
|
|
41550
|
-
// EXPORTS
|
|
41551
|
-
__webpack_require__.d(__webpack_exports__, {
|
|
41552
|
-
"default": function() { return /* binding */ View; }
|
|
41553
|
-
});
|
|
41554
|
-
|
|
41555
|
-
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-85.use[1]!./node_modules/babel-loader/lib/index.js??clonedRuleSet-41.use!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[4]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./package/cms-video/View.vue?vue&type=template&id=787ca866&scoped=true
|
|
41556
|
-
var render = function render() {
|
|
41557
|
-
var _vm = this,
|
|
41558
|
-
_c = _vm._self._c;
|
|
41559
|
-
return _c('BaseComp', _vm._b({
|
|
41560
|
-
attrs: {
|
|
41561
|
-
"data": _vm.data,
|
|
41562
|
-
"nowCompId": _vm.nowCompId,
|
|
41563
|
-
"isOpcacity": _vm.isOpcacity,
|
|
41564
|
-
"isMask": false,
|
|
41565
|
-
"lang": _vm.lang
|
|
41566
|
-
},
|
|
41567
|
-
on: {
|
|
41568
|
-
"getConfigData": _vm.getConfigData
|
|
41569
|
-
}
|
|
41570
|
-
}, 'BaseComp', _vm.$attrs, false), [_c('section', {
|
|
41571
|
-
staticClass: "cms-video-container",
|
|
41572
|
-
class: [_vm.configData.customClass || ''],
|
|
41573
|
-
style: _vm.containerStyle
|
|
41574
|
-
}, [_c('div', {
|
|
41575
|
-
staticClass: "f-c-c"
|
|
41576
|
-
}, [_vm._v(_vm._s(_vm.configData.title))]), _c('div', {
|
|
41577
|
-
staticClass: "video-wrapper",
|
|
41578
|
-
style: _vm.wrapperStyle
|
|
41579
|
-
}, [_vm.videoType === 'direct' && _vm.configData.videoUrl ? _c('video', {
|
|
41580
|
-
staticClass: "cms-video direct-video",
|
|
41581
|
-
style: _vm.videoStyle,
|
|
41582
|
-
attrs: {
|
|
41583
|
-
"src": _vm.configData.videoUrl,
|
|
41584
|
-
"controls": _vm.configData.showControls,
|
|
41585
|
-
"autoplay": _vm.configData.autoplay,
|
|
41586
|
-
"loop": _vm.configData.loop,
|
|
41587
|
-
"poster": _vm.configData.posterUrl
|
|
41588
|
-
},
|
|
41589
|
-
domProps: {
|
|
41590
|
-
"muted": _vm.configData.muted
|
|
41591
|
-
},
|
|
41592
|
-
on: {
|
|
41593
|
-
"loadstart": _vm.onVideoLoadStart,
|
|
41594
|
-
"loadeddata": _vm.onVideoLoaded,
|
|
41595
|
-
"error": _vm.onVideoError
|
|
41596
|
-
}
|
|
41597
|
-
}) : _vm.configData.embedCode ? _c('div', {
|
|
41598
|
-
staticClass: "cms-video embed-video",
|
|
41599
|
-
style: _vm.videoStyle,
|
|
41600
|
-
domProps: {
|
|
41601
|
-
"innerHTML": _vm._s(_vm.configData.embedCode)
|
|
41602
|
-
}
|
|
41603
|
-
}) : _c('div', {
|
|
41604
|
-
staticClass: "video-placeholder",
|
|
41605
|
-
style: _vm.placeholderStyle
|
|
41606
|
-
}, [_c('img', {
|
|
41607
|
-
staticStyle: {
|
|
41608
|
-
"width": "97.82px",
|
|
41609
|
-
"height": "97.82px"
|
|
41610
|
-
},
|
|
41611
|
-
attrs: {
|
|
41612
|
-
"src": __webpack_require__(6148),
|
|
41613
|
-
"alt": "Video Camera"
|
|
41614
|
-
}
|
|
41615
|
-
})])])])]);
|
|
41616
|
-
};
|
|
41617
|
-
var staticRenderFns = [];
|
|
41618
|
-
|
|
41619
|
-
;// ./package/cms-video/View.vue?vue&type=template&id=787ca866&scoped=true
|
|
41620
|
-
|
|
41621
|
-
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.constructor.js
|
|
41622
|
-
var es_iterator_constructor = __webpack_require__(8111);
|
|
41623
|
-
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.for-each.js
|
|
41624
|
-
var es_iterator_for_each = __webpack_require__(7588);
|
|
41625
|
-
// EXTERNAL MODULE: ./package/baseComp.vue + 5 modules
|
|
41626
|
-
var baseComp = __webpack_require__(7135);
|
|
41627
|
-
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-85.use[1]!./node_modules/babel-loader/lib/index.js??clonedRuleSet-41.use!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./package/cms-video/View.vue?vue&type=script&lang=js
|
|
41628
|
-
|
|
41629
|
-
|
|
41630
|
-
|
|
41631
|
-
|
|
41632
|
-
|
|
41633
|
-
/* harmony default export */ var Viewvue_type_script_lang_js = ({
|
|
41634
|
-
name: "cms-video",
|
|
41635
|
-
components: {
|
|
41636
|
-
BaseComp: baseComp["default"]
|
|
41637
|
-
},
|
|
41638
|
-
props: {
|
|
41639
|
-
data: {
|
|
41640
|
-
type: Object,
|
|
41641
|
-
default: () => {
|
|
41642
|
-
return {};
|
|
41643
|
-
}
|
|
41644
|
-
},
|
|
41645
|
-
nowCompId: {
|
|
41646
|
-
type: [String, Number],
|
|
41647
|
-
default: ""
|
|
41648
|
-
},
|
|
41649
|
-
isOpcacity: {
|
|
41650
|
-
type: Boolean,
|
|
41651
|
-
default: true
|
|
41652
|
-
},
|
|
41653
|
-
lang: {
|
|
41654
|
-
type: String,
|
|
41655
|
-
default: "zh-HK"
|
|
41656
|
-
}
|
|
41657
|
-
},
|
|
41658
|
-
data() {
|
|
41659
|
-
return {
|
|
41660
|
-
configData: {},
|
|
41661
|
-
videoLoaded: false,
|
|
41662
|
-
videoError: false,
|
|
41663
|
-
// 默认配置数据
|
|
41664
|
-
defaultConfig: {
|
|
41665
|
-
// 视频源设置
|
|
41666
|
-
videoType: "direct",
|
|
41667
|
-
videoUrl: "",
|
|
41668
|
-
embedCode: "",
|
|
41669
|
-
posterUrl: "",
|
|
41670
|
-
// 播放控制
|
|
41671
|
-
showControls: true,
|
|
41672
|
-
autoplay: false,
|
|
41673
|
-
loop: false,
|
|
41674
|
-
muted: false,
|
|
41675
|
-
// 尺寸控制
|
|
41676
|
-
widthType: "auto",
|
|
41677
|
-
widthValue: 100,
|
|
41678
|
-
heightType: "auto",
|
|
41679
|
-
heightValue: 100,
|
|
41680
|
-
aspectRatio: "16:9",
|
|
41681
|
-
customAspectRatio: "16:9",
|
|
41682
|
-
maxWidth: 0,
|
|
41683
|
-
maxHeight: 0,
|
|
41684
|
-
// 样式设置
|
|
41685
|
-
borderRadius: 0,
|
|
41686
|
-
// 高级配置
|
|
41687
|
-
customClass: "",
|
|
41688
|
-
customStyle: ""
|
|
41689
|
-
}
|
|
41690
|
-
};
|
|
41691
|
-
},
|
|
41692
|
-
mounted() {
|
|
41693
|
-
this.initConfigData();
|
|
41694
|
-
},
|
|
41695
|
-
watch: {
|
|
41696
|
-
configData: {
|
|
41697
|
-
handler() {
|
|
41698
|
-
this.updateStyles();
|
|
41699
|
-
},
|
|
41700
|
-
deep: true
|
|
41701
|
-
}
|
|
41702
|
-
},
|
|
41703
|
-
computed: {
|
|
41704
|
-
// 视频类型
|
|
41705
|
-
videoType() {
|
|
41706
|
-
return this.configData.videoType || this.defaultConfig.videoType;
|
|
41707
|
-
},
|
|
41708
|
-
// 实际使用的宽高比
|
|
41709
|
-
actualAspectRatio() {
|
|
41710
|
-
const config = {
|
|
41711
|
-
...this.defaultConfig,
|
|
41712
|
-
...this.configData
|
|
41713
|
-
};
|
|
41714
|
-
if (config.aspectRatio === "custom") {
|
|
41715
|
-
return config.customAspectRatio || "16:9";
|
|
41716
|
-
}
|
|
41717
|
-
return config.aspectRatio;
|
|
41718
|
-
},
|
|
41719
|
-
// 容器样式
|
|
41720
|
-
containerStyle() {
|
|
41721
|
-
const config = {
|
|
41722
|
-
...this.defaultConfig,
|
|
41723
|
-
...this.configData
|
|
41724
|
-
};
|
|
41725
|
-
return {
|
|
41726
|
-
...this.parseCustomStyle(config.customStyle)
|
|
41727
|
-
};
|
|
41728
|
-
},
|
|
41729
|
-
// 包装器样式
|
|
41730
|
-
wrapperStyle() {
|
|
41731
|
-
const config = {
|
|
41732
|
-
...this.defaultConfig,
|
|
41733
|
-
...this.configData
|
|
41734
|
-
};
|
|
41735
|
-
let width = "auto";
|
|
41736
|
-
let height = "auto";
|
|
41737
|
-
|
|
41738
|
-
// 宽度设置
|
|
41739
|
-
if (config.widthType === "fixed") {
|
|
41740
|
-
width = `${config.widthValue}px`;
|
|
41741
|
-
} else if (config.widthType === "percent") {
|
|
41742
|
-
width = `${config.widthValue}%`;
|
|
41743
|
-
}
|
|
41744
|
-
|
|
41745
|
-
// 高度设置
|
|
41746
|
-
if (config.heightType === "fixed") {
|
|
41747
|
-
height = `${config.heightValue}px`;
|
|
41748
|
-
} else if (config.heightType === "percent") {
|
|
41749
|
-
height = `${config.heightValue}%`;
|
|
41750
|
-
} else if (config.heightType === "aspect") {
|
|
41751
|
-
// 根据宽高比计算高度
|
|
41752
|
-
height = "auto";
|
|
41753
|
-
}
|
|
41754
|
-
return {
|
|
41755
|
-
width,
|
|
41756
|
-
height,
|
|
41757
|
-
maxWidth: config.maxWidth > 0 ? `${config.maxWidth}px` : "none",
|
|
41758
|
-
maxHeight: config.maxHeight > 0 ? `${config.maxHeight}px` : "none",
|
|
41759
|
-
borderRadius: `${config.borderRadius}px`,
|
|
41760
|
-
overflow: "hidden",
|
|
41761
|
-
display: "block",
|
|
41762
|
-
position: "relative"
|
|
41763
|
-
};
|
|
41764
|
-
},
|
|
41765
|
-
// 视频样式
|
|
41766
|
-
videoStyle() {
|
|
41767
|
-
const config = {
|
|
41768
|
-
...this.defaultConfig,
|
|
41769
|
-
...this.configData
|
|
41770
|
-
};
|
|
41771
|
-
let style = {
|
|
41772
|
-
width: "100%",
|
|
41773
|
-
height: "100%",
|
|
41774
|
-
display: "block",
|
|
41775
|
-
border: "none",
|
|
41776
|
-
outline: "none"
|
|
41777
|
-
};
|
|
41778
|
-
|
|
41779
|
-
// 如果是宽高比模式,设置aspect-ratio
|
|
41780
|
-
if (config.heightType === "aspect") {
|
|
41781
|
-
style.aspectRatio = this.actualAspectRatio.replace(":", "/");
|
|
41782
|
-
}
|
|
41783
|
-
return style;
|
|
41784
|
-
},
|
|
41785
|
-
// 占位符样式
|
|
41786
|
-
placeholderStyle() {
|
|
41787
|
-
const config = {
|
|
41788
|
-
...this.defaultConfig,
|
|
41789
|
-
...this.configData
|
|
41790
|
-
};
|
|
41791
|
-
let width = "100%";
|
|
41792
|
-
let height = "auto";
|
|
41793
|
-
|
|
41794
|
-
// 如果设置了固定尺寸,使用设置的尺寸
|
|
41795
|
-
if (config.widthType === "fixed") {
|
|
41796
|
-
width = `${config.widthValue}px`;
|
|
41797
|
-
} else if (config.widthType === "percent") {
|
|
41798
|
-
width = `${config.widthValue}%`;
|
|
41799
|
-
}
|
|
41800
|
-
if (config.heightType === "fixed") {
|
|
41801
|
-
height = `${config.heightValue}px`;
|
|
41802
|
-
} else if (config.heightType === "aspect") {
|
|
41803
|
-
// 使用aspect-ratio保持16:9比例
|
|
41804
|
-
height = "auto";
|
|
41805
|
-
} else {
|
|
41806
|
-
// 默认使用16:9比例
|
|
41807
|
-
height = "auto";
|
|
41808
|
-
}
|
|
41809
|
-
const style = {
|
|
41810
|
-
width,
|
|
41811
|
-
height,
|
|
41812
|
-
backgroundColor: "#f5f7fa",
|
|
41813
|
-
border: "1px dashed #dcdfe6",
|
|
41814
|
-
borderRadius: `${config.borderRadius}px`,
|
|
41815
|
-
display: "flex",
|
|
41816
|
-
flexDirection: "column",
|
|
41817
|
-
alignItems: "center",
|
|
41818
|
-
justifyContent: "center",
|
|
41819
|
-
color: "#909399",
|
|
41820
|
-
fontSize: "14px"
|
|
41821
|
-
};
|
|
41822
|
-
|
|
41823
|
-
// 如果不是固定高度,使用aspect-ratio保持16:9比例
|
|
41824
|
-
if (config.heightType !== "fixed") {
|
|
41825
|
-
style.aspectRatio = this.actualAspectRatio.replace(":", "/");
|
|
41826
|
-
}
|
|
41827
|
-
return style;
|
|
41828
|
-
}
|
|
41829
|
-
},
|
|
41830
|
-
methods: {
|
|
41831
|
-
// 初始化配置数据
|
|
41832
|
-
initConfigData() {
|
|
41833
|
-
this.configData = {
|
|
41834
|
-
...this.defaultConfig,
|
|
41835
|
-
...this.configData
|
|
41836
|
-
};
|
|
41837
|
-
},
|
|
41838
|
-
// 获取配置数据
|
|
41839
|
-
getConfigData(configData) {
|
|
41840
|
-
this.configData = {
|
|
41841
|
-
...this.defaultConfig,
|
|
41842
|
-
...configData
|
|
41843
|
-
};
|
|
41844
|
-
this.updateStyles();
|
|
41845
|
-
},
|
|
41846
|
-
// 更新样式
|
|
41847
|
-
updateStyles() {
|
|
41848
|
-
this.$nextTick(() => {
|
|
41849
|
-
this.$forceUpdate();
|
|
41850
|
-
});
|
|
41851
|
-
},
|
|
41852
|
-
// 视频开始加载
|
|
41853
|
-
onVideoLoadStart() {
|
|
41854
|
-
this.videoLoaded = false;
|
|
41855
|
-
this.videoError = false;
|
|
41856
|
-
},
|
|
41857
|
-
// 视频加载完成
|
|
41858
|
-
onVideoLoaded() {
|
|
41859
|
-
this.videoLoaded = true;
|
|
41860
|
-
this.videoError = false;
|
|
41861
|
-
},
|
|
41862
|
-
// 视频加载失败
|
|
41863
|
-
onVideoError() {
|
|
41864
|
-
this.videoLoaded = false;
|
|
41865
|
-
this.videoError = true;
|
|
41866
|
-
},
|
|
41867
|
-
// 解析自定义样式
|
|
41868
|
-
parseCustomStyle(customStyle) {
|
|
41869
|
-
if (!customStyle) return {};
|
|
41870
|
-
try {
|
|
41871
|
-
const styles = {};
|
|
41872
|
-
const declarations = customStyle.split(";");
|
|
41873
|
-
declarations.forEach(declaration => {
|
|
41874
|
-
const [property, value] = declaration.split(":");
|
|
41875
|
-
if (property && value) {
|
|
41876
|
-
const camelCaseProperty = property.trim().replace(/-([a-z])/g, g => g[1].toUpperCase());
|
|
41877
|
-
styles[camelCaseProperty] = value.trim();
|
|
41878
|
-
}
|
|
41879
|
-
});
|
|
41880
|
-
return styles;
|
|
41881
|
-
} catch (error) {
|
|
41882
|
-
console.warn("解析自定义样式失败:", error);
|
|
41883
|
-
return {};
|
|
41884
|
-
}
|
|
41885
|
-
}
|
|
41886
|
-
}
|
|
41887
|
-
});
|
|
41888
|
-
;// ./package/cms-video/View.vue?vue&type=script&lang=js
|
|
41889
|
-
/* harmony default export */ var cms_video_Viewvue_type_script_lang_js = (Viewvue_type_script_lang_js);
|
|
41890
|
-
;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-67.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-67.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-67.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-67.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-42.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./package/cms-video/View.vue?vue&type=style&index=0&id=787ca866&prod&lang=scss&scoped=true
|
|
41891
|
-
// extracted by mini-css-extract-plugin
|
|
41892
|
-
|
|
41893
|
-
;// ./package/cms-video/View.vue?vue&type=style&index=0&id=787ca866&prod&lang=scss&scoped=true
|
|
41894
|
-
|
|
41895
|
-
// EXTERNAL MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
|
|
41896
|
-
var componentNormalizer = __webpack_require__(1656);
|
|
41897
|
-
;// ./package/cms-video/View.vue
|
|
41898
|
-
|
|
41899
|
-
|
|
41900
|
-
|
|
41901
|
-
;
|
|
41902
|
-
|
|
41903
|
-
|
|
41904
|
-
/* normalize component */
|
|
41905
|
-
|
|
41906
|
-
var component = (0,componentNormalizer/* default */.A)(
|
|
41907
|
-
cms_video_Viewvue_type_script_lang_js,
|
|
41908
|
-
render,
|
|
41909
|
-
staticRenderFns,
|
|
41910
|
-
false,
|
|
41911
|
-
null,
|
|
41912
|
-
"787ca866",
|
|
41913
|
-
null
|
|
41914
|
-
|
|
41915
|
-
)
|
|
41916
|
-
|
|
41917
|
-
/* harmony default export */ var View = (component.exports);
|
|
41918
|
-
|
|
41919
42713
|
/***/ }),
|
|
41920
42714
|
|
|
41921
42715
|
/***/ 6269:
|
|
@@ -47341,281 +48135,6 @@ module.exports = function (argument) {
|
|
|
47341
48135
|
};
|
|
47342
48136
|
|
|
47343
48137
|
|
|
47344
|
-
/***/ }),
|
|
47345
|
-
|
|
47346
|
-
/***/ 8044:
|
|
47347
|
-
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
47348
|
-
|
|
47349
|
-
"use strict";
|
|
47350
|
-
// ESM COMPAT FLAG
|
|
47351
|
-
__webpack_require__.r(__webpack_exports__);
|
|
47352
|
-
|
|
47353
|
-
// EXPORTS
|
|
47354
|
-
__webpack_require__.d(__webpack_exports__, {
|
|
47355
|
-
"default": function() { return /* binding */ View; }
|
|
47356
|
-
});
|
|
47357
|
-
|
|
47358
|
-
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-85.use[1]!./node_modules/babel-loader/lib/index.js??clonedRuleSet-41.use!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[4]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./package/cms-column/View.vue?vue&type=template&id=73699845&scoped=true
|
|
47359
|
-
var render = function render() {
|
|
47360
|
-
var _vm = this,
|
|
47361
|
-
_c = _vm._self._c;
|
|
47362
|
-
return _c('BaseComp', _vm._b({
|
|
47363
|
-
attrs: {
|
|
47364
|
-
"data": _vm.data,
|
|
47365
|
-
"nowCompId": _vm.nowCompId,
|
|
47366
|
-
"isOpcacity": _vm.isOpcacity,
|
|
47367
|
-
"isMask": false,
|
|
47368
|
-
"lang": _vm.lang
|
|
47369
|
-
},
|
|
47370
|
-
on: {
|
|
47371
|
-
"getConfigData": _vm.getConfigData
|
|
47372
|
-
},
|
|
47373
|
-
scopedSlots: _vm._u([{
|
|
47374
|
-
key: "default",
|
|
47375
|
-
fn: function (slotProps) {
|
|
47376
|
-
return [_c('section', {
|
|
47377
|
-
class: (_vm.configData.widthType === 'full' ? 'width-full' : 'cmhk-home_main', {
|
|
47378
|
-
hoverBorderClass: _vm.isConfigPage
|
|
47379
|
-
}),
|
|
47380
|
-
style: _vm.containerStyle
|
|
47381
|
-
}, [_c('div', {
|
|
47382
|
-
staticClass: "column-setting",
|
|
47383
|
-
class: [`layout-${_vm.configData.layoutType || 'default'}`, `${slotProps.isMobile && _vm.configData.mobileLayout === 'vertical' ? 'mobile-vertical' : 'mobile-horizontal'}`],
|
|
47384
|
-
style: _vm.columnStyle
|
|
47385
|
-
}, _vm._l(_vm.data.childList, function (item, index) {
|
|
47386
|
-
return _c('cms-column-card', {
|
|
47387
|
-
key: item.componentId,
|
|
47388
|
-
class: _vm.getColumnItemClass(index),
|
|
47389
|
-
style: _vm.getColumnItemStyle(index),
|
|
47390
|
-
attrs: {
|
|
47391
|
-
"data": item,
|
|
47392
|
-
"nowCompId": _vm.nowCompId,
|
|
47393
|
-
"isOpcacity": _vm.isOpcacity,
|
|
47394
|
-
"isMask": false,
|
|
47395
|
-
"lang": _vm.lang
|
|
47396
|
-
}
|
|
47397
|
-
});
|
|
47398
|
-
}), 1)])];
|
|
47399
|
-
}
|
|
47400
|
-
}])
|
|
47401
|
-
}, 'BaseComp', _vm.$attrs, false));
|
|
47402
|
-
};
|
|
47403
|
-
var staticRenderFns = [];
|
|
47404
|
-
|
|
47405
|
-
// EXTERNAL MODULE: ./package/baseComp.vue + 5 modules
|
|
47406
|
-
var baseComp = __webpack_require__(7135);
|
|
47407
|
-
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-85.use[1]!./node_modules/babel-loader/lib/index.js??clonedRuleSet-41.use!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./package/cms-column/View.vue?vue&type=script&lang=js
|
|
47408
|
-
|
|
47409
|
-
/* harmony default export */ var Viewvue_type_script_lang_js = ({
|
|
47410
|
-
name: "cms-column",
|
|
47411
|
-
components: {
|
|
47412
|
-
BaseComp: baseComp["default"]
|
|
47413
|
-
},
|
|
47414
|
-
props: {
|
|
47415
|
-
data: {
|
|
47416
|
-
type: Object,
|
|
47417
|
-
default: () => {
|
|
47418
|
-
return {};
|
|
47419
|
-
}
|
|
47420
|
-
},
|
|
47421
|
-
nowCompId: {
|
|
47422
|
-
type: [String, Number],
|
|
47423
|
-
default: ""
|
|
47424
|
-
},
|
|
47425
|
-
isOpcacity: {
|
|
47426
|
-
type: Boolean,
|
|
47427
|
-
default: true
|
|
47428
|
-
},
|
|
47429
|
-
lang: {
|
|
47430
|
-
type: String,
|
|
47431
|
-
default: "zh-HK"
|
|
47432
|
-
}
|
|
47433
|
-
},
|
|
47434
|
-
data() {
|
|
47435
|
-
return {
|
|
47436
|
-
configData: {},
|
|
47437
|
-
messFold: true,
|
|
47438
|
-
// 默认配置数据
|
|
47439
|
-
defaultConfig: {
|
|
47440
|
-
layoutType: "100",
|
|
47441
|
-
heightType: "auto",
|
|
47442
|
-
widthType: "auto",
|
|
47443
|
-
mobileLayout: "vertical",
|
|
47444
|
-
fixedHeight: 300,
|
|
47445
|
-
borderWidth: 0,
|
|
47446
|
-
borderStyle: "solid",
|
|
47447
|
-
borderColor: "",
|
|
47448
|
-
backgroundColor: "#FFF",
|
|
47449
|
-
backgroundImage: "",
|
|
47450
|
-
boxShadow: "",
|
|
47451
|
-
borderRadius: 0,
|
|
47452
|
-
columnGap: 0,
|
|
47453
|
-
rowGap: 0,
|
|
47454
|
-
title: "",
|
|
47455
|
-
description: "",
|
|
47456
|
-
input1: "",
|
|
47457
|
-
showTitle: true,
|
|
47458
|
-
showDescription: true,
|
|
47459
|
-
animationDuration: 300,
|
|
47460
|
-
responsiveBreakpoint: 768
|
|
47461
|
-
}
|
|
47462
|
-
};
|
|
47463
|
-
},
|
|
47464
|
-
mounted() {
|
|
47465
|
-
this.initConfigData();
|
|
47466
|
-
// 添加窗口大小变化监听
|
|
47467
|
-
},
|
|
47468
|
-
watch: {
|
|
47469
|
-
configData: {
|
|
47470
|
-
handler() {
|
|
47471
|
-
this.updateStyles();
|
|
47472
|
-
},
|
|
47473
|
-
deep: true
|
|
47474
|
-
}
|
|
47475
|
-
},
|
|
47476
|
-
computed: {
|
|
47477
|
-
isConfigPage() {
|
|
47478
|
-
return this.$EventBus && this.isOpcacity;
|
|
47479
|
-
},
|
|
47480
|
-
// 容器样式
|
|
47481
|
-
containerStyle() {
|
|
47482
|
-
return {
|
|
47483
|
-
backgroundColor: this.configData.backgroundColor || this.defaultConfig.backgroundColor,
|
|
47484
|
-
backgroundImage: this.configData.backgroundImage ? `url(${this.configData.backgroundImage})` : "",
|
|
47485
|
-
backgroundSize: "cover",
|
|
47486
|
-
backgroundRepeat: "no-repeat",
|
|
47487
|
-
backgroundPosition: "center center",
|
|
47488
|
-
boxShadow: this.configData.boxShadow || this.defaultConfig.boxShadow,
|
|
47489
|
-
borderRadius: `${this.configData.borderRadius || this.defaultConfig.borderRadius}px`,
|
|
47490
|
-
minHeight: this.configData.heightType === "fixed" ? `${this.configData.fixedHeight}px` : "auto"
|
|
47491
|
-
};
|
|
47492
|
-
},
|
|
47493
|
-
// 分栏容器样式
|
|
47494
|
-
columnStyle() {
|
|
47495
|
-
// const gap = this.configData.rowGap || this.defaultConfig.rowGap;
|
|
47496
|
-
return {
|
|
47497
|
-
// gap: `${gap}px`,
|
|
47498
|
-
border: this.configData.borderWidth ? `${this.configData.borderWidth}px ${this.configData.borderStyle} ${this.configData.borderColor}` : "none"
|
|
47499
|
-
};
|
|
47500
|
-
}
|
|
47501
|
-
},
|
|
47502
|
-
methods: {
|
|
47503
|
-
// 初始化配置数据
|
|
47504
|
-
initConfigData() {
|
|
47505
|
-
// 合并默认配置和传入配置
|
|
47506
|
-
this.configData = {
|
|
47507
|
-
...this.defaultConfig,
|
|
47508
|
-
...this.configData
|
|
47509
|
-
};
|
|
47510
|
-
},
|
|
47511
|
-
// 获取配置数据
|
|
47512
|
-
getConfigData(configData) {
|
|
47513
|
-
this.configData = {
|
|
47514
|
-
...this.defaultConfig,
|
|
47515
|
-
...configData
|
|
47516
|
-
};
|
|
47517
|
-
this.updateStyles();
|
|
47518
|
-
},
|
|
47519
|
-
// 更新样式
|
|
47520
|
-
updateStyles() {
|
|
47521
|
-
this.$nextTick(() => {
|
|
47522
|
-
// 触发样式更新
|
|
47523
|
-
this.$forceUpdate();
|
|
47524
|
-
});
|
|
47525
|
-
},
|
|
47526
|
-
// 获取分栏项的类名
|
|
47527
|
-
getColumnItemClass(index) {
|
|
47528
|
-
const layoutType = this.configData.layoutType || this.defaultConfig.layoutType;
|
|
47529
|
-
return ["column-item", `column-item-${index}`, `layout-${layoutType}`, {
|
|
47530
|
-
"min-h": this.$EventBus && this.isOpcacity,
|
|
47531
|
-
"first-item": index === 0,
|
|
47532
|
-
"last-item": index === this.data.childList.length - 1
|
|
47533
|
-
}];
|
|
47534
|
-
},
|
|
47535
|
-
// 获取分栏项的样式
|
|
47536
|
-
getColumnItemStyle(index) {
|
|
47537
|
-
const layoutType = this.configData.layoutType || this.defaultConfig.layoutType;
|
|
47538
|
-
const gap = this.configData.rowGap || this.defaultConfig.rowGap;
|
|
47539
|
-
let flexBasis = "100%";
|
|
47540
|
-
let marginRight = "0";
|
|
47541
|
-
|
|
47542
|
-
// 根据布局类型设置宽度
|
|
47543
|
-
switch (layoutType) {
|
|
47544
|
-
case "50-50":
|
|
47545
|
-
flexBasis = `calc(50% - ${gap / 2}px)`;
|
|
47546
|
-
marginRight = index % 2 === 0 ? `${gap}px` : "0";
|
|
47547
|
-
break;
|
|
47548
|
-
case "33-66":
|
|
47549
|
-
flexBasis = index === 0 ? `calc(33.33% - ${gap / 2}px)` : `calc(66.67% - ${gap / 2}px)`;
|
|
47550
|
-
marginRight = index === 0 ? `${gap}px` : "0";
|
|
47551
|
-
break;
|
|
47552
|
-
case "66-33":
|
|
47553
|
-
flexBasis = index === 0 ? `calc(66.67% - ${gap / 2}px)` : `calc(33.33% - ${gap / 2}px)`;
|
|
47554
|
-
marginRight = index === 0 ? `${gap}px` : "0";
|
|
47555
|
-
break;
|
|
47556
|
-
case "33-33-33":
|
|
47557
|
-
flexBasis = `calc(33.33% - ${gap * 2 / 3}px)`;
|
|
47558
|
-
marginRight = index < 2 ? `${gap}px` : "0";
|
|
47559
|
-
break;
|
|
47560
|
-
case "25-50-25":
|
|
47561
|
-
if (index === 0 || index === 2) {
|
|
47562
|
-
flexBasis = `calc(25% - ${gap * 2 / 3}px)`;
|
|
47563
|
-
} else {
|
|
47564
|
-
flexBasis = `calc(50% - ${gap * 2 / 3}px)`;
|
|
47565
|
-
}
|
|
47566
|
-
marginRight = index < 2 ? `${gap}px` : "0";
|
|
47567
|
-
break;
|
|
47568
|
-
default:
|
|
47569
|
-
flexBasis = "100%";
|
|
47570
|
-
}
|
|
47571
|
-
return {
|
|
47572
|
-
flexBasis,
|
|
47573
|
-
marginRight,
|
|
47574
|
-
marginBottom: `${this.configData.columnGap || this.defaultConfig.columnGap}px`
|
|
47575
|
-
};
|
|
47576
|
-
},
|
|
47577
|
-
// 折叠/展开文本
|
|
47578
|
-
foldMessText() {
|
|
47579
|
-
this.messFold = !this.messFold;
|
|
47580
|
-
},
|
|
47581
|
-
// 处理跳转链接
|
|
47582
|
-
decodeJumpUrl(url) {
|
|
47583
|
-
if (!url) return;
|
|
47584
|
-
top.location.href = url;
|
|
47585
|
-
}
|
|
47586
|
-
}
|
|
47587
|
-
});
|
|
47588
|
-
;// ./package/cms-column/View.vue?vue&type=script&lang=js
|
|
47589
|
-
/* harmony default export */ var cms_column_Viewvue_type_script_lang_js = (Viewvue_type_script_lang_js);
|
|
47590
|
-
;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-67.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-67.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-67.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-67.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-42.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./package/cms-column/View.vue?vue&type=style&index=0&id=73699845&prod&lang=scss&scoped=true
|
|
47591
|
-
// extracted by mini-css-extract-plugin
|
|
47592
|
-
|
|
47593
|
-
;// ./package/cms-column/View.vue?vue&type=style&index=0&id=73699845&prod&lang=scss&scoped=true
|
|
47594
|
-
|
|
47595
|
-
// EXTERNAL MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
|
|
47596
|
-
var componentNormalizer = __webpack_require__(1656);
|
|
47597
|
-
;// ./package/cms-column/View.vue
|
|
47598
|
-
|
|
47599
|
-
|
|
47600
|
-
|
|
47601
|
-
;
|
|
47602
|
-
|
|
47603
|
-
|
|
47604
|
-
/* normalize component */
|
|
47605
|
-
|
|
47606
|
-
var component = (0,componentNormalizer/* default */.A)(
|
|
47607
|
-
cms_column_Viewvue_type_script_lang_js,
|
|
47608
|
-
render,
|
|
47609
|
-
staticRenderFns,
|
|
47610
|
-
false,
|
|
47611
|
-
null,
|
|
47612
|
-
"73699845",
|
|
47613
|
-
null
|
|
47614
|
-
|
|
47615
|
-
)
|
|
47616
|
-
|
|
47617
|
-
/* harmony default export */ var View = (component.exports);
|
|
47618
|
-
|
|
47619
48138
|
/***/ }),
|
|
47620
48139
|
|
|
47621
48140
|
/***/ 8066:
|
|
@@ -52577,513 +53096,6 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
52577
53096
|
|
|
52578
53097
|
/***/ }),
|
|
52579
53098
|
|
|
52580
|
-
/***/ 9421:
|
|
52581
|
-
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
52582
|
-
|
|
52583
|
-
"use strict";
|
|
52584
|
-
// ESM COMPAT FLAG
|
|
52585
|
-
__webpack_require__.r(__webpack_exports__);
|
|
52586
|
-
|
|
52587
|
-
// EXPORTS
|
|
52588
|
-
__webpack_require__.d(__webpack_exports__, {
|
|
52589
|
-
"default": function() { return /* binding */ View; }
|
|
52590
|
-
});
|
|
52591
|
-
|
|
52592
|
-
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.constructor.js
|
|
52593
|
-
var es_iterator_constructor = __webpack_require__(8111);
|
|
52594
|
-
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.drop.js
|
|
52595
|
-
var es_iterator_drop = __webpack_require__(9314);
|
|
52596
|
-
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-85.use[1]!./node_modules/babel-loader/lib/index.js??clonedRuleSet-41.use!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[4]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./package/cms-column-card/View.vue?vue&type=template&id=28effaca&scoped=true
|
|
52597
|
-
|
|
52598
|
-
|
|
52599
|
-
|
|
52600
|
-
|
|
52601
|
-
var render = function render() {
|
|
52602
|
-
var _vm = this,
|
|
52603
|
-
_c = _vm._self._c;
|
|
52604
|
-
return _c('BaseComp', _vm._b({
|
|
52605
|
-
attrs: {
|
|
52606
|
-
"data": _vm.data,
|
|
52607
|
-
"nowCompId": _vm.nowCompId,
|
|
52608
|
-
"isOpcacity": _vm.isOpcacity,
|
|
52609
|
-
"isMask": false,
|
|
52610
|
-
"lang": _vm.lang,
|
|
52611
|
-
"showDel": false
|
|
52612
|
-
},
|
|
52613
|
-
on: {
|
|
52614
|
-
"getConfigData": _vm.getConfigData
|
|
52615
|
-
}
|
|
52616
|
-
}, 'BaseComp', _vm.$attrs, false), [_vm.isConfigPage ? _c('div', {
|
|
52617
|
-
staticClass: "main_drag hoverBorderClass",
|
|
52618
|
-
style: _vm.cardContainerStyle,
|
|
52619
|
-
attrs: {
|
|
52620
|
-
"id": `cardTarget${_vm.data.componentId}`
|
|
52621
|
-
},
|
|
52622
|
-
on: {
|
|
52623
|
-
"dragover": _vm.dragover,
|
|
52624
|
-
"dragend": function ($event) {
|
|
52625
|
-
_vm.showAddCom = false;
|
|
52626
|
-
},
|
|
52627
|
-
"drop": _vm.drop
|
|
52628
|
-
}
|
|
52629
|
-
}, [_c('Draggable', {
|
|
52630
|
-
staticStyle: {
|
|
52631
|
-
"position": "relative"
|
|
52632
|
-
},
|
|
52633
|
-
attrs: {
|
|
52634
|
-
"group": _vm.groupConfigForMain,
|
|
52635
|
-
"chosen-class": "chosen",
|
|
52636
|
-
"force-fallback": "true",
|
|
52637
|
-
"animation": "1000",
|
|
52638
|
-
"move": _vm.onMove
|
|
52639
|
-
},
|
|
52640
|
-
on: {
|
|
52641
|
-
"start": _vm.onStart,
|
|
52642
|
-
"end": function ($event) {
|
|
52643
|
-
_vm.showAddCom = false;
|
|
52644
|
-
}
|
|
52645
|
-
},
|
|
52646
|
-
model: {
|
|
52647
|
-
value: _vm.data.childList,
|
|
52648
|
-
callback: function ($$v) {
|
|
52649
|
-
_vm.$set(_vm.data, "childList", $$v);
|
|
52650
|
-
},
|
|
52651
|
-
expression: "data.childList"
|
|
52652
|
-
}
|
|
52653
|
-
}, [_vm._l(_vm.data.childList, function (item, index) {
|
|
52654
|
-
return _c('div', {
|
|
52655
|
-
key: item.componentId,
|
|
52656
|
-
staticStyle: {
|
|
52657
|
-
"position": "relative"
|
|
52658
|
-
}
|
|
52659
|
-
}, [_vm.showAddCom ? _c('div', {
|
|
52660
|
-
staticClass: "up_insert",
|
|
52661
|
-
attrs: {
|
|
52662
|
-
"id": `${item.componentId}-cardTargetup`
|
|
52663
|
-
}
|
|
52664
|
-
}, [_c('i', {
|
|
52665
|
-
staticClass: "icon-up",
|
|
52666
|
-
attrs: {
|
|
52667
|
-
"id": `${item.componentId}-upi`
|
|
52668
|
-
}
|
|
52669
|
-
}), _c('span', {
|
|
52670
|
-
attrs: {
|
|
52671
|
-
"id": `${item.componentId}-upspan`
|
|
52672
|
-
}
|
|
52673
|
-
}, [_vm._v("插入组件")])]) : _vm._e(), _c(item.cmsCompName, {
|
|
52674
|
-
tag: "component",
|
|
52675
|
-
style: {
|
|
52676
|
-
marginTop: _vm.showAddCom && index == 0 ? '20px' : '0px'
|
|
52677
|
-
},
|
|
52678
|
-
attrs: {
|
|
52679
|
-
"data": item,
|
|
52680
|
-
"lang": _vm.lang,
|
|
52681
|
-
"isOpcacity": _vm.isOpcacity,
|
|
52682
|
-
"nowCompId": _vm.nowCompId
|
|
52683
|
-
}
|
|
52684
|
-
})], 1);
|
|
52685
|
-
}), _vm.showAddCom ? _c('div', {
|
|
52686
|
-
staticClass: "up_insert insert_bottom",
|
|
52687
|
-
style: {
|
|
52688
|
-
bottom: _vm.data.childList.length ? '0px' : '-24px'
|
|
52689
|
-
},
|
|
52690
|
-
attrs: {
|
|
52691
|
-
"id": `-cardTargetdown`
|
|
52692
|
-
}
|
|
52693
|
-
}, [_c('i', {
|
|
52694
|
-
staticClass: "icon-up"
|
|
52695
|
-
}), _c('span', [_vm._v("插入组件")])]) : _vm._e()], 2)], 1) : _c('cms-view', _vm._b({
|
|
52696
|
-
style: _vm.cardContainerStyle,
|
|
52697
|
-
attrs: {
|
|
52698
|
-
"data": _vm.data.childList,
|
|
52699
|
-
"lang": _vm.lang,
|
|
52700
|
-
"isOpcacity": false
|
|
52701
|
-
}
|
|
52702
|
-
}, 'cms-view', _vm.$attrs, false))], 1);
|
|
52703
|
-
};
|
|
52704
|
-
var staticRenderFns = [];
|
|
52705
|
-
|
|
52706
|
-
;// ./package/cms-column-card/View.vue?vue&type=template&id=28effaca&scoped=true
|
|
52707
|
-
|
|
52708
|
-
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
|
|
52709
|
-
var es_array_push = __webpack_require__(4114);
|
|
52710
|
-
// EXTERNAL MODULE: ./package/baseComp.vue + 5 modules
|
|
52711
|
-
var baseComp = __webpack_require__(7135);
|
|
52712
|
-
// EXTERNAL MODULE: ./node_modules/vuedraggable/dist/vuedraggable.umd.js
|
|
52713
|
-
var vuedraggable_umd = __webpack_require__(9014);
|
|
52714
|
-
var vuedraggable_umd_default = /*#__PURE__*/__webpack_require__.n(vuedraggable_umd);
|
|
52715
|
-
// EXTERNAL MODULE: ./package/baseConfig.js
|
|
52716
|
-
var baseConfig = __webpack_require__(2128);
|
|
52717
|
-
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.find.js
|
|
52718
|
-
var es_iterator_find = __webpack_require__(116);
|
|
52719
|
-
// EXTERNAL MODULE: ./src/utils/index.js
|
|
52720
|
-
var utils = __webpack_require__(9563);
|
|
52721
|
-
;// ./src/views/standard_page.js
|
|
52722
|
-
|
|
52723
|
-
|
|
52724
|
-
|
|
52725
|
-
|
|
52726
|
-
|
|
52727
|
-
const standard_page_list = [{
|
|
52728
|
-
id: 1,
|
|
52729
|
-
componentId: 1,
|
|
52730
|
-
componentName: "范本1-防诈骗提示",
|
|
52731
|
-
standList: ["cms-banner", "cms-titleCenter", "cms-lineThree"]
|
|
52732
|
-
}, {
|
|
52733
|
-
id: 2,
|
|
52734
|
-
componentId: 2,
|
|
52735
|
-
componentName: "范本2-员工优惠",
|
|
52736
|
-
standList: ["cms-banner", "cms-description", "cms-activityCountdown", "cms-titleLeft", "cms-proCard", "cms-termsAndConditions"]
|
|
52737
|
-
}];
|
|
52738
|
-
const getComponentKey = (compList, id, noCompId = false) => {
|
|
52739
|
-
if (noCompId) return id;
|
|
52740
|
-
let compConfig = compList.find(item => item.id == id);
|
|
52741
|
-
if (compConfig.type == "1") {
|
|
52742
|
-
return compConfig.componentId;
|
|
52743
|
-
}
|
|
52744
|
-
return "cms-dynamic-comp";
|
|
52745
|
-
};
|
|
52746
|
-
const getCopyTemplateCompConfig = (compList, componentKey) => {
|
|
52747
|
-
let otherConfig = {};
|
|
52748
|
-
const configureJson = compList.find(item => item.id == componentKey).configureJson;
|
|
52749
|
-
if (configureJson.wujieConfig) {
|
|
52750
|
-
//如果是第三方组件加一个临时标识
|
|
52751
|
-
otherConfig = {
|
|
52752
|
-
originalComponentId: configureJson.componentId,
|
|
52753
|
-
originalVersionId: configureJson.wujieConfig.versionId,
|
|
52754
|
-
operation: "copyTemplate"
|
|
52755
|
-
};
|
|
52756
|
-
}
|
|
52757
|
-
return {
|
|
52758
|
-
...configureJson,
|
|
52759
|
-
componentId: (0,utils/* getUuidCode */.J0)(32),
|
|
52760
|
-
...otherConfig
|
|
52761
|
-
};
|
|
52762
|
-
};
|
|
52763
|
-
const isStaticComp = componentKey => {
|
|
52764
|
-
return ["cms-header", "cms-footer", "cms-breadCrumb"].includes(componentKey);
|
|
52765
|
-
};
|
|
52766
|
-
const getWujieCompInfo = (compList, componentId, isTemplate) => {
|
|
52767
|
-
let compConfig = compList.find(item => item.id == componentId);
|
|
52768
|
-
if (isTemplate) if (compConfig.type == "1") {
|
|
52769
|
-
return compConfig;
|
|
52770
|
-
}
|
|
52771
|
-
return {
|
|
52772
|
-
...compConfig
|
|
52773
|
-
};
|
|
52774
|
-
};
|
|
52775
|
-
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-85.use[1]!./node_modules/babel-loader/lib/index.js??clonedRuleSet-41.use!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./package/cms-column-card/View.vue?vue&type=script&lang=js
|
|
52776
|
-
|
|
52777
|
-
|
|
52778
|
-
|
|
52779
|
-
|
|
52780
|
-
|
|
52781
|
-
|
|
52782
|
-
/* harmony default export */ var Viewvue_type_script_lang_js = ({
|
|
52783
|
-
name: "cms-column-card",
|
|
52784
|
-
components: {
|
|
52785
|
-
BaseComp: baseComp["default"],
|
|
52786
|
-
Draggable: (vuedraggable_umd_default())
|
|
52787
|
-
},
|
|
52788
|
-
props: {
|
|
52789
|
-
data: {
|
|
52790
|
-
type: Object,
|
|
52791
|
-
default: () => {
|
|
52792
|
-
return {};
|
|
52793
|
-
}
|
|
52794
|
-
},
|
|
52795
|
-
nowCompId: {
|
|
52796
|
-
type: [String, Number],
|
|
52797
|
-
default: ""
|
|
52798
|
-
},
|
|
52799
|
-
isOpcacity: {
|
|
52800
|
-
type: Boolean,
|
|
52801
|
-
default: true
|
|
52802
|
-
},
|
|
52803
|
-
lang: {
|
|
52804
|
-
type: String,
|
|
52805
|
-
default: "zh-HK"
|
|
52806
|
-
}
|
|
52807
|
-
},
|
|
52808
|
-
data() {
|
|
52809
|
-
return {
|
|
52810
|
-
configData: {},
|
|
52811
|
-
messFold: true,
|
|
52812
|
-
showAddCom: false,
|
|
52813
|
-
temporaryList: []
|
|
52814
|
-
};
|
|
52815
|
-
},
|
|
52816
|
-
computed: {
|
|
52817
|
-
isConfigPage() {
|
|
52818
|
-
return this.$EventBus && this.isOpcacity;
|
|
52819
|
-
},
|
|
52820
|
-
groupConfigForMain() {
|
|
52821
|
-
return {
|
|
52822
|
-
name: "task",
|
|
52823
|
-
pull: true,
|
|
52824
|
-
// A列表的元素可以被拖出
|
|
52825
|
-
put: (to, from, dragEl) => {
|
|
52826
|
-
console.log(from.el.classList);
|
|
52827
|
-
if (from.el.classList.contains("main_drag")) {
|
|
52828
|
-
const dataId = this.findFirstComponentKey(dragEl);
|
|
52829
|
-
const allowedComponents = ["cms-text", "cms-image", "cms-video", "cms-button", "cms-richText", "cms-column"];
|
|
52830
|
-
console.log("allowedComponents", dataId);
|
|
52831
|
-
if (dataId === "cms-column") {
|
|
52832
|
-
if (!this.checkColumnNestingLevel()) {
|
|
52833
|
-
console.log("cms-column 嵌套层级超出限制");
|
|
52834
|
-
return false;
|
|
52835
|
-
}
|
|
52836
|
-
}
|
|
52837
|
-
return allowedComponents.includes(dataId);
|
|
52838
|
-
}
|
|
52839
|
-
return true;
|
|
52840
|
-
}
|
|
52841
|
-
};
|
|
52842
|
-
},
|
|
52843
|
-
// 卡片容器样式
|
|
52844
|
-
cardContainerStyle() {
|
|
52845
|
-
return {
|
|
52846
|
-
backgroundImage: this.configData.backgroundImage ? `url('${this.configData.backgroundImage}')` : "none",
|
|
52847
|
-
backgroundSize: "cover",
|
|
52848
|
-
backgroundRepeat: "no-repeat",
|
|
52849
|
-
backgroundPosition: "center center",
|
|
52850
|
-
height: this.getContainerHeight(),
|
|
52851
|
-
border: this.getContainerBorder(),
|
|
52852
|
-
borderRadius: this.getContainerBorderRadius(),
|
|
52853
|
-
backgroundColor: this.configData.backgroundColor || "transparent",
|
|
52854
|
-
boxShadow: this.configData.boxShadow || "none"
|
|
52855
|
-
};
|
|
52856
|
-
}
|
|
52857
|
-
},
|
|
52858
|
-
mounted() {
|
|
52859
|
-
if (this.$EventBus) {
|
|
52860
|
-
this.$EventBus.$on("handleDragEnd", () => {
|
|
52861
|
-
this.showAddCom = false;
|
|
52862
|
-
});
|
|
52863
|
-
}
|
|
52864
|
-
},
|
|
52865
|
-
watch: {},
|
|
52866
|
-
methods: {
|
|
52867
|
-
findFirstComponentKey(root) {
|
|
52868
|
-
var _root$querySelector;
|
|
52869
|
-
if (!root) return null;
|
|
52870
|
-
|
|
52871
|
-
// 若起点自身就有
|
|
52872
|
-
if (root.nodeType === 1 && root.hasAttribute("component-key")) {
|
|
52873
|
-
return root.getAttribute("component-key");
|
|
52874
|
-
}
|
|
52875
|
-
|
|
52876
|
-
// 向下查找第一个匹配的后代
|
|
52877
|
-
const el = (_root$querySelector = root.querySelector) === null || _root$querySelector === void 0 ? void 0 : _root$querySelector.call(root, "[component-key]");
|
|
52878
|
-
return el ? el.getAttribute("component-key") : null;
|
|
52879
|
-
},
|
|
52880
|
-
// 获取容器高度
|
|
52881
|
-
getContainerHeight() {
|
|
52882
|
-
if (this.configData.heightType === "fixed") {
|
|
52883
|
-
return `${this.configData.fixedHeight}px`;
|
|
52884
|
-
}
|
|
52885
|
-
return this.isOpcacity ? "100%" : "auto";
|
|
52886
|
-
},
|
|
52887
|
-
// 获取容器边框
|
|
52888
|
-
getContainerBorder() {
|
|
52889
|
-
if (this.configData.borderWidth) {
|
|
52890
|
-
return `${this.configData.borderWidth}px ${this.configData.borderStyle} ${this.configData.borderColor}`;
|
|
52891
|
-
}
|
|
52892
|
-
return "none";
|
|
52893
|
-
},
|
|
52894
|
-
// 获取容器圆角
|
|
52895
|
-
getContainerBorderRadius() {
|
|
52896
|
-
if (this.configData.borderRadius) {
|
|
52897
|
-
return `${this.configData.borderRadius}px`;
|
|
52898
|
-
}
|
|
52899
|
-
return "0";
|
|
52900
|
-
},
|
|
52901
|
-
getConfigData(configData) {
|
|
52902
|
-
this.configData = configData;
|
|
52903
|
-
},
|
|
52904
|
-
foldMessText() {
|
|
52905
|
-
this.messFold = !this.messFold;
|
|
52906
|
-
},
|
|
52907
|
-
decodeJumpUrl(url) {
|
|
52908
|
-
if (!url) return;
|
|
52909
|
-
top.location.href = url;
|
|
52910
|
-
},
|
|
52911
|
-
onStart(evt) {
|
|
52912
|
-
console.log("drag start in column-card", evt);
|
|
52913
|
-
this.showAddCom = true;
|
|
52914
|
-
},
|
|
52915
|
-
// 限制拖拽的组件类型
|
|
52916
|
-
onMove(evt) {
|
|
52917
|
-
const {
|
|
52918
|
-
draggedContext
|
|
52919
|
-
} = evt;
|
|
52920
|
-
|
|
52921
|
-
// 允许的组件类型
|
|
52922
|
-
const allowedComponents = ["cms-text", "cms-image", "cms-video", "cms-button", "cms-richText", "cms-column" // 允许拖入 cms-column
|
|
52923
|
-
];
|
|
52924
|
-
|
|
52925
|
-
// 如果是从外部拖入的组件
|
|
52926
|
-
if (draggedContext && draggedContext.element) {
|
|
52927
|
-
const componentType = draggedContext.element.cmsCompName;
|
|
52928
|
-
if (componentType && !allowedComponents.includes(componentType)) {
|
|
52929
|
-
console.log("draggedContext.element", draggedContext.element);
|
|
52930
|
-
console.log(`组件类型 ${componentType} 不允许拖入 column-card`);
|
|
52931
|
-
return false;
|
|
52932
|
-
}
|
|
52933
|
-
|
|
52934
|
-
// 特殊处理 cms-column:检查嵌套层级
|
|
52935
|
-
if (componentType === "cms-column") {
|
|
52936
|
-
if (!this.checkColumnNestingLevel()) {
|
|
52937
|
-
console.log("cms-column 嵌套层级超出限制");
|
|
52938
|
-
return false;
|
|
52939
|
-
}
|
|
52940
|
-
}
|
|
52941
|
-
}
|
|
52942
|
-
return true;
|
|
52943
|
-
},
|
|
52944
|
-
// 检查 cms-column 嵌套层级
|
|
52945
|
-
checkColumnNestingLevel() {
|
|
52946
|
-
// 检查当前 column-card 是否已经在 cms-column 内部
|
|
52947
|
-
let parent = this.$parent;
|
|
52948
|
-
let columnDepth = 0;
|
|
52949
|
-
while (parent) {
|
|
52950
|
-
// 检查父组件是否是 cms-column 或包含 cms-column
|
|
52951
|
-
if (parent.$options.name === "cms-column" || parent.$data && parent.$data.data && parent.$data.data.cmsCompName === "cms-column") {
|
|
52952
|
-
columnDepth++;
|
|
52953
|
-
}
|
|
52954
|
-
|
|
52955
|
-
// 如果已经有一层 cms-column,则不允许再嵌套
|
|
52956
|
-
if (columnDepth >= 2) {
|
|
52957
|
-
console.log(`检测到 cms-column 嵌套层级: ${columnDepth}, 超出限制`);
|
|
52958
|
-
return false;
|
|
52959
|
-
}
|
|
52960
|
-
parent = parent.$parent;
|
|
52961
|
-
}
|
|
52962
|
-
console.log(`cms-column 嵌套层级检查通过: ${columnDepth}`);
|
|
52963
|
-
return true;
|
|
52964
|
-
},
|
|
52965
|
-
// 处理拖拽悬停
|
|
52966
|
-
dragover(e) {
|
|
52967
|
-
e.preventDefault();
|
|
52968
|
-
this.showAddCom = true;
|
|
52969
|
-
},
|
|
52970
|
-
// 处理拖拽放置
|
|
52971
|
-
drop(e) {
|
|
52972
|
-
e.preventDefault();
|
|
52973
|
-
const componentKey = e.dataTransfer.getData("componentKey");
|
|
52974
|
-
let temporaryId = "";
|
|
52975
|
-
this.temporaryList = e.dataTransfer.getData("temporaryList") ? JSON.parse(e.dataTransfer.getData("temporaryList")) : [];
|
|
52976
|
-
console.log("cms-colum-card-drop", componentKey, this.temporaryList);
|
|
52977
|
-
if (!componentKey) return;
|
|
52978
|
-
const isTemporaryItem = e.dataTransfer.getData("isTemporaryItem");
|
|
52979
|
-
const isTemporary = isTemporaryItem === "true";
|
|
52980
|
-
if (isTemporary) {
|
|
52981
|
-
temporaryId = getCopyTemplateCompConfig(this.temporaryList, componentKey).cmsCompName;
|
|
52982
|
-
}
|
|
52983
|
-
const componentType = isTemporary ? temporaryId : componentKey;
|
|
52984
|
-
// 允许的组件类型
|
|
52985
|
-
const allowedComponents = ["cms-text", "cms-image", "cms-video", "cms-button", "cms-richText", "cms-column" // 允许拖入 cms-column
|
|
52986
|
-
];
|
|
52987
|
-
|
|
52988
|
-
// 检查组件类型是否允许
|
|
52989
|
-
if (!allowedComponents.includes(componentType)) {
|
|
52990
|
-
console.log(`组件类型 ${componentType} 不允许拖入 column-card`);
|
|
52991
|
-
this.$message && this.$message.warning(`该组件类型不支持拖入卡片容器`);
|
|
52992
|
-
this.showAddCom = false;
|
|
52993
|
-
return;
|
|
52994
|
-
}
|
|
52995
|
-
|
|
52996
|
-
// 特殊处理 cms-column:检查嵌套层级
|
|
52997
|
-
if (componentType === "cms-column") {
|
|
52998
|
-
if (!this.checkColumnNestingLevel()) {
|
|
52999
|
-
console.log("cms-column 嵌套层级超出限制");
|
|
53000
|
-
this.$message && this.$message.warning(`cms-column 只能嵌套一层`);
|
|
53001
|
-
this.showAddCom = false;
|
|
53002
|
-
return;
|
|
53003
|
-
}
|
|
53004
|
-
}
|
|
53005
|
-
this.addOneComp(e, componentKey);
|
|
53006
|
-
},
|
|
53007
|
-
// 添加组件到卡片容器
|
|
53008
|
-
addOneComp(e, componentKey) {
|
|
53009
|
-
this.showAddCom = false;
|
|
53010
|
-
console.log("drop to column-card", componentKey);
|
|
53011
|
-
|
|
53012
|
-
// 动态导入组件配置
|
|
53013
|
-
let initCompData;
|
|
53014
|
-
try {
|
|
53015
|
-
const isTemporaryItem = e.dataTransfer.getData("isTemporaryItem");
|
|
53016
|
-
if (isTemporaryItem === "true") {
|
|
53017
|
-
initCompData = getCopyTemplateCompConfig(this.temporaryList, componentKey);
|
|
53018
|
-
} else {
|
|
53019
|
-
initCompData = __webpack_require__(1640)(`./${componentKey}`).default.settings(componentKey);
|
|
53020
|
-
}
|
|
53021
|
-
initCompData = {
|
|
53022
|
-
...initCompData,
|
|
53023
|
-
styleConfig: {
|
|
53024
|
-
pc: componentKey == "cms-text" ? [...(0,baseConfig.styleBaseConfig)(16, 16, 0, 0, "px")] : [...(0,baseConfig.styleBaseConfig)(0, 0, 0, 0, "px")],
|
|
53025
|
-
mb: componentKey == "cms-text" ? [...(0,baseConfig.styleBaseConfig)(12, 12, 0, 0, "px")] : [...(0,baseConfig.styleBaseConfig)(0, 0, 0, 0, "px")]
|
|
53026
|
-
}
|
|
53027
|
-
};
|
|
53028
|
-
} catch (error) {
|
|
53029
|
-
console.error(`无法加载组件 ${componentKey}:`, error);
|
|
53030
|
-
this.$message && this.$message.error(`组件加载失败`);
|
|
53031
|
-
return;
|
|
53032
|
-
}
|
|
53033
|
-
const toElementId = e.toElement.id;
|
|
53034
|
-
if (toElementId === `cardTarget${this.data.componentId}` || toElementId.includes("cardTargetdown")) {
|
|
53035
|
-
// 添加到卡片容器末尾
|
|
53036
|
-
this.data.childList.push(initCompData);
|
|
53037
|
-
} else if (toElementId.includes("cardTargetup")) {
|
|
53038
|
-
// 插入到指定位置
|
|
53039
|
-
const underComponentId = toElementId.split("-cardTargetup")[0];
|
|
53040
|
-
const index = this.data.childList.findIndex(item => item.componentId === underComponentId);
|
|
53041
|
-
if (index !== -1) {
|
|
53042
|
-
this.data.childList.splice(index, 0, initCompData);
|
|
53043
|
-
}
|
|
53044
|
-
}
|
|
53045
|
-
|
|
53046
|
-
// 触发数据更新
|
|
53047
|
-
this.$emit("update:data", this.data);
|
|
53048
|
-
if (componentKey === "cms-column") {
|
|
53049
|
-
this.$EventBus.$emit("handleNowComp", initCompData);
|
|
53050
|
-
}
|
|
53051
|
-
}
|
|
53052
|
-
}
|
|
53053
|
-
});
|
|
53054
|
-
;// ./package/cms-column-card/View.vue?vue&type=script&lang=js
|
|
53055
|
-
/* harmony default export */ var cms_column_card_Viewvue_type_script_lang_js = (Viewvue_type_script_lang_js);
|
|
53056
|
-
;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-67.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-67.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-67.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-67.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-42.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./package/cms-column-card/View.vue?vue&type=style&index=0&id=28effaca&prod&lang=scss&scoped=true
|
|
53057
|
-
// extracted by mini-css-extract-plugin
|
|
53058
|
-
|
|
53059
|
-
;// ./package/cms-column-card/View.vue?vue&type=style&index=0&id=28effaca&prod&lang=scss&scoped=true
|
|
53060
|
-
|
|
53061
|
-
// EXTERNAL MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
|
|
53062
|
-
var componentNormalizer = __webpack_require__(1656);
|
|
53063
|
-
;// ./package/cms-column-card/View.vue
|
|
53064
|
-
|
|
53065
|
-
|
|
53066
|
-
|
|
53067
|
-
;
|
|
53068
|
-
|
|
53069
|
-
|
|
53070
|
-
/* normalize component */
|
|
53071
|
-
|
|
53072
|
-
var component = (0,componentNormalizer/* default */.A)(
|
|
53073
|
-
cms_column_card_Viewvue_type_script_lang_js,
|
|
53074
|
-
render,
|
|
53075
|
-
staticRenderFns,
|
|
53076
|
-
false,
|
|
53077
|
-
null,
|
|
53078
|
-
"28effaca",
|
|
53079
|
-
null
|
|
53080
|
-
|
|
53081
|
-
)
|
|
53082
|
-
|
|
53083
|
-
/* harmony default export */ var View = (component.exports);
|
|
53084
|
-
|
|
53085
|
-
/***/ }),
|
|
53086
|
-
|
|
53087
53099
|
/***/ 9429:
|
|
53088
53100
|
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
|
|
53089
53101
|
|