cms-chenhj-ui 2.0.14 → 2.0.16
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 +1175 -1176
- package/cms-chenhj-ui.common.js.map +1 -1
- package/cms-chenhj-ui.css +1 -1
- package/cms-chenhj-ui.umd.js +1175 -1176
- package/cms-chenhj-ui.umd.js.map +1 -1
- package/cms-chenhj-ui.umd.min.js +2 -2
- package/cms-chenhj-ui.umd.min.js.map +1 -1
- package/package.json +1 -1
package/cms-chenhj-ui.umd.js
CHANGED
|
@@ -1199,6 +1199,524 @@ module.exports = function (it, Prototype) {
|
|
|
1199
1199
|
};
|
|
1200
1200
|
|
|
1201
1201
|
|
|
1202
|
+
/***/ }),
|
|
1203
|
+
|
|
1204
|
+
/***/ 688:
|
|
1205
|
+
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
1206
|
+
|
|
1207
|
+
"use strict";
|
|
1208
|
+
// ESM COMPAT FLAG
|
|
1209
|
+
__webpack_require__.r(__webpack_exports__);
|
|
1210
|
+
|
|
1211
|
+
// EXPORTS
|
|
1212
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
1213
|
+
"default": function() { return /* binding */ View; }
|
|
1214
|
+
});
|
|
1215
|
+
|
|
1216
|
+
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.constructor.js
|
|
1217
|
+
var es_iterator_constructor = __webpack_require__(8111);
|
|
1218
|
+
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.drop.js
|
|
1219
|
+
var es_iterator_drop = __webpack_require__(9314);
|
|
1220
|
+
;// ./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
|
|
1221
|
+
|
|
1222
|
+
|
|
1223
|
+
|
|
1224
|
+
|
|
1225
|
+
var render = function render() {
|
|
1226
|
+
var _vm = this,
|
|
1227
|
+
_c = _vm._self._c;
|
|
1228
|
+
return _c('BaseComp', _vm._b({
|
|
1229
|
+
attrs: {
|
|
1230
|
+
"data": _vm.data,
|
|
1231
|
+
"nowCompId": _vm.nowCompId,
|
|
1232
|
+
"isOpcacity": _vm.isOpcacity,
|
|
1233
|
+
"isMask": false,
|
|
1234
|
+
"lang": _vm.lang,
|
|
1235
|
+
"showDel": false
|
|
1236
|
+
},
|
|
1237
|
+
on: {
|
|
1238
|
+
"getConfigData": _vm.getConfigData
|
|
1239
|
+
}
|
|
1240
|
+
}, 'BaseComp', _vm.$attrs, false), [_vm.isConfigPage ? _c('div', {
|
|
1241
|
+
staticClass: "main_drag hoverBorderClass",
|
|
1242
|
+
style: _vm.cardContainerStyle,
|
|
1243
|
+
attrs: {
|
|
1244
|
+
"id": `cardTarget${_vm.data.componentId}`
|
|
1245
|
+
},
|
|
1246
|
+
on: {
|
|
1247
|
+
"dragover": _vm.dragover,
|
|
1248
|
+
"dragend": function ($event) {
|
|
1249
|
+
_vm.showAddCom = false;
|
|
1250
|
+
},
|
|
1251
|
+
"drop": _vm.drop
|
|
1252
|
+
}
|
|
1253
|
+
}, [_c('Draggable', {
|
|
1254
|
+
staticStyle: {
|
|
1255
|
+
"position": "relative"
|
|
1256
|
+
},
|
|
1257
|
+
attrs: {
|
|
1258
|
+
"group": _vm.groupConfigForMain,
|
|
1259
|
+
"chosen-class": "chosen",
|
|
1260
|
+
"force-fallback": "true",
|
|
1261
|
+
"animation": "1000",
|
|
1262
|
+
"move": _vm.onMove
|
|
1263
|
+
},
|
|
1264
|
+
on: {
|
|
1265
|
+
"start": _vm.onStart,
|
|
1266
|
+
"end": function ($event) {
|
|
1267
|
+
_vm.showAddCom = false;
|
|
1268
|
+
}
|
|
1269
|
+
},
|
|
1270
|
+
model: {
|
|
1271
|
+
value: _vm.data.childList,
|
|
1272
|
+
callback: function ($$v) {
|
|
1273
|
+
_vm.$set(_vm.data, "childList", $$v);
|
|
1274
|
+
},
|
|
1275
|
+
expression: "data.childList"
|
|
1276
|
+
}
|
|
1277
|
+
}, [_vm._l(_vm.data.childList, function (item, index) {
|
|
1278
|
+
return _c('div', {
|
|
1279
|
+
key: item.componentId,
|
|
1280
|
+
staticStyle: {
|
|
1281
|
+
"position": "relative"
|
|
1282
|
+
}
|
|
1283
|
+
}, [_vm.showAddCom ? _c('div', {
|
|
1284
|
+
staticClass: "up_insert",
|
|
1285
|
+
attrs: {
|
|
1286
|
+
"id": `${item.componentId}-cardTargetup`
|
|
1287
|
+
}
|
|
1288
|
+
}, [_c('i', {
|
|
1289
|
+
staticClass: "icon-up",
|
|
1290
|
+
attrs: {
|
|
1291
|
+
"id": `${item.componentId}-upi`
|
|
1292
|
+
}
|
|
1293
|
+
}), _c('span', {
|
|
1294
|
+
attrs: {
|
|
1295
|
+
"id": `${item.componentId}-upspan`
|
|
1296
|
+
}
|
|
1297
|
+
}, [_vm._v("插入组件")])]) : _vm._e(), _c(item.cmsCompName, {
|
|
1298
|
+
tag: "component",
|
|
1299
|
+
style: {
|
|
1300
|
+
marginTop: _vm.showAddCom && index == 0 ? '20px' : '0px'
|
|
1301
|
+
},
|
|
1302
|
+
attrs: {
|
|
1303
|
+
"data": item,
|
|
1304
|
+
"lang": _vm.lang,
|
|
1305
|
+
"isOpcacity": _vm.isOpcacity,
|
|
1306
|
+
"nowCompId": _vm.nowCompId
|
|
1307
|
+
}
|
|
1308
|
+
})], 1);
|
|
1309
|
+
}), _vm.showAddCom ? _c('div', {
|
|
1310
|
+
staticClass: "up_insert insert_bottom",
|
|
1311
|
+
style: {
|
|
1312
|
+
bottom: _vm.data.childList.length ? '0px' : '-24px'
|
|
1313
|
+
},
|
|
1314
|
+
attrs: {
|
|
1315
|
+
"id": `-cardTargetdown`
|
|
1316
|
+
}
|
|
1317
|
+
}, [_c('i', {
|
|
1318
|
+
staticClass: "icon-up"
|
|
1319
|
+
}), _c('span', [_vm._v("插入组件")])]) : _vm._e()], 2)], 1) : _c('cms-view', _vm._b({
|
|
1320
|
+
style: _vm.cardContainerStyle,
|
|
1321
|
+
attrs: {
|
|
1322
|
+
"data": _vm.data.childList,
|
|
1323
|
+
"lang": _vm.lang,
|
|
1324
|
+
"isOpcacity": false
|
|
1325
|
+
}
|
|
1326
|
+
}, 'cms-view', _vm.$attrs, false))], 1);
|
|
1327
|
+
};
|
|
1328
|
+
var staticRenderFns = [];
|
|
1329
|
+
|
|
1330
|
+
;// ./package/cms-column-card/View.vue?vue&type=template&id=2dcb9de2&scoped=true
|
|
1331
|
+
|
|
1332
|
+
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
|
|
1333
|
+
var es_array_push = __webpack_require__(4114);
|
|
1334
|
+
// EXTERNAL MODULE: ./package/baseComp.vue + 5 modules
|
|
1335
|
+
var baseComp = __webpack_require__(7135);
|
|
1336
|
+
// EXTERNAL MODULE: ./node_modules/vuedraggable/dist/vuedraggable.umd.js
|
|
1337
|
+
var vuedraggable_umd = __webpack_require__(9014);
|
|
1338
|
+
var vuedraggable_umd_default = /*#__PURE__*/__webpack_require__.n(vuedraggable_umd);
|
|
1339
|
+
// EXTERNAL MODULE: ./package/baseConfig.js
|
|
1340
|
+
var baseConfig = __webpack_require__(2128);
|
|
1341
|
+
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.find.js
|
|
1342
|
+
var es_iterator_find = __webpack_require__(116);
|
|
1343
|
+
// EXTERNAL MODULE: ./src/utils/index.js
|
|
1344
|
+
var utils = __webpack_require__(9563);
|
|
1345
|
+
;// ./src/views/standard_page.js
|
|
1346
|
+
|
|
1347
|
+
|
|
1348
|
+
|
|
1349
|
+
|
|
1350
|
+
|
|
1351
|
+
const standard_page_list = [{
|
|
1352
|
+
id: 1,
|
|
1353
|
+
componentId: 1,
|
|
1354
|
+
componentName: "范本1-防诈骗提示",
|
|
1355
|
+
standList: ["cms-banner", "cms-titleCenter", "cms-lineThree"]
|
|
1356
|
+
}, {
|
|
1357
|
+
id: 2,
|
|
1358
|
+
componentId: 2,
|
|
1359
|
+
componentName: "范本2-员工优惠",
|
|
1360
|
+
standList: ["cms-banner", "cms-description", "cms-activityCountdown", "cms-titleLeft", "cms-proCard", "cms-termsAndConditions"]
|
|
1361
|
+
}];
|
|
1362
|
+
const getComponentKey = (compList, id, noCompId = false) => {
|
|
1363
|
+
if (noCompId) return id;
|
|
1364
|
+
let compConfig = compList.find(item => item.id == id);
|
|
1365
|
+
if (compConfig.type == "1") {
|
|
1366
|
+
return compConfig.componentId;
|
|
1367
|
+
}
|
|
1368
|
+
return "cms-dynamic-comp";
|
|
1369
|
+
};
|
|
1370
|
+
const getCopyTemplateCompConfig = (compList, componentKey) => {
|
|
1371
|
+
let otherConfig = {};
|
|
1372
|
+
const configureJson = compList.find(item => item.id == componentKey).configureJson;
|
|
1373
|
+
if (configureJson.wujieConfig) {
|
|
1374
|
+
//如果是第三方组件加一个临时标识
|
|
1375
|
+
otherConfig = {
|
|
1376
|
+
originalComponentId: configureJson.componentId,
|
|
1377
|
+
originalVersionId: configureJson.wujieConfig.versionId,
|
|
1378
|
+
operation: "copyTemplate"
|
|
1379
|
+
};
|
|
1380
|
+
}
|
|
1381
|
+
return {
|
|
1382
|
+
...configureJson,
|
|
1383
|
+
componentId: (0,utils/* getUuidCode */.J0)(32),
|
|
1384
|
+
...otherConfig
|
|
1385
|
+
};
|
|
1386
|
+
};
|
|
1387
|
+
const isStaticComp = componentKey => {
|
|
1388
|
+
return ["cms-header", "cms-footer", "cms-breadCrumb"].includes(componentKey);
|
|
1389
|
+
};
|
|
1390
|
+
const getWujieCompInfo = (compList, componentId, isTemplate) => {
|
|
1391
|
+
let compConfig = compList.find(item => item.id == componentId);
|
|
1392
|
+
if (isTemplate) if (compConfig.type == "1") {
|
|
1393
|
+
return compConfig;
|
|
1394
|
+
}
|
|
1395
|
+
return {
|
|
1396
|
+
...compConfig
|
|
1397
|
+
};
|
|
1398
|
+
};
|
|
1399
|
+
;// ./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
|
|
1400
|
+
|
|
1401
|
+
|
|
1402
|
+
|
|
1403
|
+
|
|
1404
|
+
|
|
1405
|
+
|
|
1406
|
+
/* harmony default export */ var Viewvue_type_script_lang_js = ({
|
|
1407
|
+
name: "cms-column-card",
|
|
1408
|
+
components: {
|
|
1409
|
+
BaseComp: baseComp["default"],
|
|
1410
|
+
Draggable: (vuedraggable_umd_default())
|
|
1411
|
+
},
|
|
1412
|
+
props: {
|
|
1413
|
+
data: {
|
|
1414
|
+
type: Object,
|
|
1415
|
+
default: () => {
|
|
1416
|
+
return {};
|
|
1417
|
+
}
|
|
1418
|
+
},
|
|
1419
|
+
nowCompId: {
|
|
1420
|
+
type: [String, Number],
|
|
1421
|
+
default: ""
|
|
1422
|
+
},
|
|
1423
|
+
isOpcacity: {
|
|
1424
|
+
type: Boolean,
|
|
1425
|
+
default: true
|
|
1426
|
+
},
|
|
1427
|
+
lang: {
|
|
1428
|
+
type: String,
|
|
1429
|
+
default: "zh-HK"
|
|
1430
|
+
},
|
|
1431
|
+
isMobile: {
|
|
1432
|
+
type: Boolean,
|
|
1433
|
+
default: false
|
|
1434
|
+
},
|
|
1435
|
+
mobileLayout: {
|
|
1436
|
+
type: String,
|
|
1437
|
+
default: ""
|
|
1438
|
+
}
|
|
1439
|
+
},
|
|
1440
|
+
data() {
|
|
1441
|
+
return {
|
|
1442
|
+
configData: {},
|
|
1443
|
+
messFold: true,
|
|
1444
|
+
showAddCom: false,
|
|
1445
|
+
temporaryList: []
|
|
1446
|
+
};
|
|
1447
|
+
},
|
|
1448
|
+
computed: {
|
|
1449
|
+
isConfigPage() {
|
|
1450
|
+
return this.$EventBus && this.isOpcacity;
|
|
1451
|
+
},
|
|
1452
|
+
groupConfigForMain() {
|
|
1453
|
+
return {
|
|
1454
|
+
name: "task",
|
|
1455
|
+
pull: true,
|
|
1456
|
+
// A列表的元素可以被拖出
|
|
1457
|
+
put: (to, from, dragEl) => {
|
|
1458
|
+
console.log(from.el.classList);
|
|
1459
|
+
if (from.el.classList.contains("main_drag")) {
|
|
1460
|
+
const dataId = this.findFirstComponentKey(dragEl);
|
|
1461
|
+
const allowedComponents = ["cms-text", "cms-image", "cms-video", "cms-button", "cms-richText", "cms-column"];
|
|
1462
|
+
console.log("allowedComponents", dataId);
|
|
1463
|
+
if (dataId === "cms-column") {
|
|
1464
|
+
if (!this.checkColumnNestingLevel()) {
|
|
1465
|
+
console.log("cms-column 嵌套层级超出限制");
|
|
1466
|
+
return false;
|
|
1467
|
+
}
|
|
1468
|
+
}
|
|
1469
|
+
return allowedComponents.includes(dataId);
|
|
1470
|
+
}
|
|
1471
|
+
return true;
|
|
1472
|
+
}
|
|
1473
|
+
};
|
|
1474
|
+
},
|
|
1475
|
+
// 卡片容器样式
|
|
1476
|
+
cardContainerStyle() {
|
|
1477
|
+
return {
|
|
1478
|
+
backgroundImage: this.configData.backgroundImage ? `url('${this.configData.backgroundImage}')` : "none",
|
|
1479
|
+
backgroundSize: "cover",
|
|
1480
|
+
backgroundRepeat: "no-repeat",
|
|
1481
|
+
backgroundPosition: "center center",
|
|
1482
|
+
height: this.getContainerHeight(),
|
|
1483
|
+
border: this.getContainerBorder(),
|
|
1484
|
+
borderRadius: this.getContainerBorderRadius(),
|
|
1485
|
+
backgroundColor: this.configData.backgroundColor || "transparent",
|
|
1486
|
+
boxShadow: this.configData.boxShadow || "none"
|
|
1487
|
+
};
|
|
1488
|
+
}
|
|
1489
|
+
},
|
|
1490
|
+
mounted() {
|
|
1491
|
+
if (this.$EventBus) {
|
|
1492
|
+
this.$EventBus.$on("handleDragEnd", () => {
|
|
1493
|
+
this.showAddCom = false;
|
|
1494
|
+
});
|
|
1495
|
+
}
|
|
1496
|
+
},
|
|
1497
|
+
watch: {},
|
|
1498
|
+
methods: {
|
|
1499
|
+
findFirstComponentKey(root) {
|
|
1500
|
+
var _root$querySelector;
|
|
1501
|
+
if (!root) return null;
|
|
1502
|
+
|
|
1503
|
+
// 若起点自身就有
|
|
1504
|
+
if (root.nodeType === 1 && root.hasAttribute("component-key")) {
|
|
1505
|
+
return root.getAttribute("component-key");
|
|
1506
|
+
}
|
|
1507
|
+
|
|
1508
|
+
// 向下查找第一个匹配的后代
|
|
1509
|
+
const el = (_root$querySelector = root.querySelector) === null || _root$querySelector === void 0 ? void 0 : _root$querySelector.call(root, "[component-key]");
|
|
1510
|
+
return el ? el.getAttribute("component-key") : null;
|
|
1511
|
+
},
|
|
1512
|
+
// 获取容器高度
|
|
1513
|
+
getContainerHeight() {
|
|
1514
|
+
if (this.configData.heightType === "fixed") {
|
|
1515
|
+
return `${this.configData.fixedHeight}px`;
|
|
1516
|
+
}
|
|
1517
|
+
return this.isMobile && this.mobileLayout == "vertical" ? "auto" : "100%";
|
|
1518
|
+
},
|
|
1519
|
+
// 获取容器边框
|
|
1520
|
+
getContainerBorder() {
|
|
1521
|
+
if (this.configData.borderWidth) {
|
|
1522
|
+
return `${this.configData.borderWidth}px ${this.configData.borderStyle} ${this.configData.borderColor}`;
|
|
1523
|
+
}
|
|
1524
|
+
return "none";
|
|
1525
|
+
},
|
|
1526
|
+
// 获取容器圆角
|
|
1527
|
+
getContainerBorderRadius() {
|
|
1528
|
+
if (this.configData.borderRadius) {
|
|
1529
|
+
return `${this.configData.borderRadius}px`;
|
|
1530
|
+
}
|
|
1531
|
+
return "0";
|
|
1532
|
+
},
|
|
1533
|
+
getConfigData(configData) {
|
|
1534
|
+
this.configData = configData;
|
|
1535
|
+
},
|
|
1536
|
+
foldMessText() {
|
|
1537
|
+
this.messFold = !this.messFold;
|
|
1538
|
+
},
|
|
1539
|
+
decodeJumpUrl(url) {
|
|
1540
|
+
if (!url) return;
|
|
1541
|
+
top.location.href = url;
|
|
1542
|
+
},
|
|
1543
|
+
onStart(evt) {
|
|
1544
|
+
console.log("drag start in column-card", evt);
|
|
1545
|
+
this.showAddCom = true;
|
|
1546
|
+
},
|
|
1547
|
+
// 限制拖拽的组件类型
|
|
1548
|
+
onMove(evt) {
|
|
1549
|
+
const {
|
|
1550
|
+
draggedContext
|
|
1551
|
+
} = evt;
|
|
1552
|
+
|
|
1553
|
+
// 允许的组件类型
|
|
1554
|
+
const allowedComponents = ["cms-text", "cms-image", "cms-video", "cms-button", "cms-richText", "cms-column" // 允许拖入 cms-column
|
|
1555
|
+
];
|
|
1556
|
+
|
|
1557
|
+
// 如果是从外部拖入的组件
|
|
1558
|
+
if (draggedContext && draggedContext.element) {
|
|
1559
|
+
const componentType = draggedContext.element.cmsCompName;
|
|
1560
|
+
if (componentType && !allowedComponents.includes(componentType)) {
|
|
1561
|
+
console.log("draggedContext.element", draggedContext.element);
|
|
1562
|
+
console.log(`组件类型 ${componentType} 不允许拖入 column-card`);
|
|
1563
|
+
return false;
|
|
1564
|
+
}
|
|
1565
|
+
|
|
1566
|
+
// 特殊处理 cms-column:检查嵌套层级
|
|
1567
|
+
if (componentType === "cms-column") {
|
|
1568
|
+
if (!this.checkColumnNestingLevel()) {
|
|
1569
|
+
console.log("cms-column 嵌套层级超出限制");
|
|
1570
|
+
return false;
|
|
1571
|
+
}
|
|
1572
|
+
}
|
|
1573
|
+
}
|
|
1574
|
+
return true;
|
|
1575
|
+
},
|
|
1576
|
+
// 检查 cms-column 嵌套层级
|
|
1577
|
+
checkColumnNestingLevel() {
|
|
1578
|
+
// 检查当前 column-card 是否已经在 cms-column 内部
|
|
1579
|
+
let parent = this.$parent;
|
|
1580
|
+
let columnDepth = 0;
|
|
1581
|
+
while (parent) {
|
|
1582
|
+
// 检查父组件是否是 cms-column 或包含 cms-column
|
|
1583
|
+
if (parent.$options.name === "cms-column" || parent.$data && parent.$data.data && parent.$data.data.cmsCompName === "cms-column") {
|
|
1584
|
+
columnDepth++;
|
|
1585
|
+
}
|
|
1586
|
+
|
|
1587
|
+
// 如果已经有一层 cms-column,则不允许再嵌套
|
|
1588
|
+
if (columnDepth >= 2) {
|
|
1589
|
+
console.log(`检测到 cms-column 嵌套层级: ${columnDepth}, 超出限制`);
|
|
1590
|
+
return false;
|
|
1591
|
+
}
|
|
1592
|
+
parent = parent.$parent;
|
|
1593
|
+
}
|
|
1594
|
+
console.log(`cms-column 嵌套层级检查通过: ${columnDepth}`);
|
|
1595
|
+
return true;
|
|
1596
|
+
},
|
|
1597
|
+
// 处理拖拽悬停
|
|
1598
|
+
dragover(e) {
|
|
1599
|
+
e.preventDefault();
|
|
1600
|
+
this.showAddCom = true;
|
|
1601
|
+
},
|
|
1602
|
+
// 处理拖拽放置
|
|
1603
|
+
drop(e) {
|
|
1604
|
+
e.preventDefault();
|
|
1605
|
+
const componentKey = e.dataTransfer.getData("componentKey");
|
|
1606
|
+
let temporaryId = "";
|
|
1607
|
+
this.temporaryList = e.dataTransfer.getData("temporaryList") ? JSON.parse(e.dataTransfer.getData("temporaryList")) : [];
|
|
1608
|
+
console.log("cms-colum-card-drop", componentKey, this.temporaryList);
|
|
1609
|
+
if (!componentKey) return;
|
|
1610
|
+
const isTemporaryItem = e.dataTransfer.getData("isTemporaryItem");
|
|
1611
|
+
const isTemporary = isTemporaryItem === "true";
|
|
1612
|
+
if (isTemporary) {
|
|
1613
|
+
temporaryId = getCopyTemplateCompConfig(this.temporaryList, componentKey).cmsCompName;
|
|
1614
|
+
}
|
|
1615
|
+
const componentType = isTemporary ? temporaryId : componentKey;
|
|
1616
|
+
// 允许的组件类型
|
|
1617
|
+
const allowedComponents = ["cms-text", "cms-image", "cms-video", "cms-button", "cms-richText", "cms-column" // 允许拖入 cms-column
|
|
1618
|
+
];
|
|
1619
|
+
|
|
1620
|
+
// 检查组件类型是否允许
|
|
1621
|
+
if (!allowedComponents.includes(componentType)) {
|
|
1622
|
+
console.log(`组件类型 ${componentType} 不允许拖入 column-card`);
|
|
1623
|
+
this.$message && this.$message.warning(`该组件类型不支持拖入卡片容器`);
|
|
1624
|
+
this.showAddCom = false;
|
|
1625
|
+
return;
|
|
1626
|
+
}
|
|
1627
|
+
|
|
1628
|
+
// 特殊处理 cms-column:检查嵌套层级
|
|
1629
|
+
if (componentType === "cms-column") {
|
|
1630
|
+
if (!this.checkColumnNestingLevel()) {
|
|
1631
|
+
console.log("cms-column 嵌套层级超出限制");
|
|
1632
|
+
this.$message && this.$message.warning(`cms-column 只能嵌套一层`);
|
|
1633
|
+
this.showAddCom = false;
|
|
1634
|
+
return;
|
|
1635
|
+
}
|
|
1636
|
+
}
|
|
1637
|
+
this.addOneComp(e, componentKey);
|
|
1638
|
+
},
|
|
1639
|
+
// 添加组件到卡片容器
|
|
1640
|
+
addOneComp(e, componentKey) {
|
|
1641
|
+
this.showAddCom = false;
|
|
1642
|
+
console.log("drop to column-card", componentKey);
|
|
1643
|
+
|
|
1644
|
+
// 动态导入组件配置
|
|
1645
|
+
let initCompData;
|
|
1646
|
+
try {
|
|
1647
|
+
const isTemporaryItem = e.dataTransfer.getData("isTemporaryItem");
|
|
1648
|
+
const isTemporary = isTemporaryItem === "true";
|
|
1649
|
+
if (isTemporary) {
|
|
1650
|
+
initCompData = getCopyTemplateCompConfig(this.temporaryList, componentKey);
|
|
1651
|
+
} else {
|
|
1652
|
+
initCompData = __webpack_require__(1640)(`./${componentKey}`).default.settings(componentKey);
|
|
1653
|
+
}
|
|
1654
|
+
if (!isTemporary) {
|
|
1655
|
+
initCompData = {
|
|
1656
|
+
...initCompData,
|
|
1657
|
+
styleConfig: {
|
|
1658
|
+
pc: componentKey == "cms-text" ? [...(0,baseConfig.styleBaseConfig)(16, 16, 0, 0, "px")] : [...(0,baseConfig.styleBaseConfig)(0, 0, 0, 0, "px")],
|
|
1659
|
+
mb: componentKey == "cms-text" ? [...(0,baseConfig.styleBaseConfig)(12, 12, 0, 0, "px")] : [...(0,baseConfig.styleBaseConfig)(0, 0, 0, 0, "px")]
|
|
1660
|
+
}
|
|
1661
|
+
};
|
|
1662
|
+
}
|
|
1663
|
+
} catch (error) {
|
|
1664
|
+
console.error(`无法加载组件 ${componentKey}:`, error);
|
|
1665
|
+
this.$message && this.$message.error(`组件加载失败`);
|
|
1666
|
+
return;
|
|
1667
|
+
}
|
|
1668
|
+
const toElementId = e.toElement.id;
|
|
1669
|
+
if (toElementId === `cardTarget${this.data.componentId}` || toElementId.includes("cardTargetdown")) {
|
|
1670
|
+
// 添加到卡片容器末尾
|
|
1671
|
+
this.data.childList.push(initCompData);
|
|
1672
|
+
} else if (toElementId.includes("cardTargetup")) {
|
|
1673
|
+
// 插入到指定位置
|
|
1674
|
+
const underComponentId = toElementId.split("-cardTargetup")[0];
|
|
1675
|
+
const index = this.data.childList.findIndex(item => item.componentId === underComponentId);
|
|
1676
|
+
if (index !== -1) {
|
|
1677
|
+
this.data.childList.splice(index, 0, initCompData);
|
|
1678
|
+
}
|
|
1679
|
+
}
|
|
1680
|
+
|
|
1681
|
+
// 触发数据更新
|
|
1682
|
+
this.$emit("update:data", this.data);
|
|
1683
|
+
if (componentKey === "cms-column") {
|
|
1684
|
+
this.$EventBus.$emit("handleNowComp", initCompData);
|
|
1685
|
+
}
|
|
1686
|
+
}
|
|
1687
|
+
}
|
|
1688
|
+
});
|
|
1689
|
+
;// ./package/cms-column-card/View.vue?vue&type=script&lang=js
|
|
1690
|
+
/* harmony default export */ var cms_column_card_Viewvue_type_script_lang_js = (Viewvue_type_script_lang_js);
|
|
1691
|
+
;// ./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
|
|
1692
|
+
// extracted by mini-css-extract-plugin
|
|
1693
|
+
|
|
1694
|
+
;// ./package/cms-column-card/View.vue?vue&type=style&index=0&id=2dcb9de2&prod&lang=scss&scoped=true
|
|
1695
|
+
|
|
1696
|
+
// EXTERNAL MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
|
|
1697
|
+
var componentNormalizer = __webpack_require__(1656);
|
|
1698
|
+
;// ./package/cms-column-card/View.vue
|
|
1699
|
+
|
|
1700
|
+
|
|
1701
|
+
|
|
1702
|
+
;
|
|
1703
|
+
|
|
1704
|
+
|
|
1705
|
+
/* normalize component */
|
|
1706
|
+
|
|
1707
|
+
var component = (0,componentNormalizer/* default */.A)(
|
|
1708
|
+
cms_column_card_Viewvue_type_script_lang_js,
|
|
1709
|
+
render,
|
|
1710
|
+
staticRenderFns,
|
|
1711
|
+
false,
|
|
1712
|
+
null,
|
|
1713
|
+
"2dcb9de2",
|
|
1714
|
+
null
|
|
1715
|
+
|
|
1716
|
+
)
|
|
1717
|
+
|
|
1718
|
+
/* harmony default export */ var View = (component.exports);
|
|
1719
|
+
|
|
1202
1720
|
/***/ }),
|
|
1203
1721
|
|
|
1204
1722
|
/***/ 713:
|
|
@@ -19903,13 +20421,13 @@ var map = {
|
|
|
19903
20421
|
"./cms-column": 3154,
|
|
19904
20422
|
"./cms-column-card": 3583,
|
|
19905
20423
|
"./cms-column-card/": 3583,
|
|
19906
|
-
"./cms-column-card/View":
|
|
19907
|
-
"./cms-column-card/View.vue":
|
|
20424
|
+
"./cms-column-card/View": 688,
|
|
20425
|
+
"./cms-column-card/View.vue": 688,
|
|
19908
20426
|
"./cms-column-card/index": 3583,
|
|
19909
20427
|
"./cms-column-card/index.js": 3583,
|
|
19910
20428
|
"./cms-column/": 3154,
|
|
19911
|
-
"./cms-column/View":
|
|
19912
|
-
"./cms-column/View.vue":
|
|
20429
|
+
"./cms-column/View": 2171,
|
|
20430
|
+
"./cms-column/View.vue": 2171,
|
|
19913
20431
|
"./cms-column/index": 3154,
|
|
19914
20432
|
"./cms-column/index.js": 3154,
|
|
19915
20433
|
"./cms-description": 98,
|
|
@@ -20058,8 +20576,8 @@ var map = {
|
|
|
20058
20576
|
"./cms-video-group/index": 2697,
|
|
20059
20577
|
"./cms-video-group/index.js": 2697,
|
|
20060
20578
|
"./cms-video/": 3275,
|
|
20061
|
-
"./cms-video/View":
|
|
20062
|
-
"./cms-video/View.vue":
|
|
20579
|
+
"./cms-video/View": 5846,
|
|
20580
|
+
"./cms-video/View.vue": 5846,
|
|
20063
20581
|
"./cms-video/index": 3275,
|
|
20064
20582
|
"./cms-video/index.js": 3275,
|
|
20065
20583
|
"./cms-view": 725,
|
|
@@ -21511,6 +22029,270 @@ test[TO_STRING_TAG] = 'z';
|
|
|
21511
22029
|
module.exports = String(test) === '[object z]';
|
|
21512
22030
|
|
|
21513
22031
|
|
|
22032
|
+
/***/ }),
|
|
22033
|
+
|
|
22034
|
+
/***/ 2171:
|
|
22035
|
+
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
22036
|
+
|
|
22037
|
+
"use strict";
|
|
22038
|
+
// ESM COMPAT FLAG
|
|
22039
|
+
__webpack_require__.r(__webpack_exports__);
|
|
22040
|
+
|
|
22041
|
+
// EXPORTS
|
|
22042
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
22043
|
+
"default": function() { return /* binding */ View; }
|
|
22044
|
+
});
|
|
22045
|
+
|
|
22046
|
+
;// ./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=f2ba72e8&scoped=true
|
|
22047
|
+
var render = function render() {
|
|
22048
|
+
var _vm = this,
|
|
22049
|
+
_c = _vm._self._c;
|
|
22050
|
+
return _c('BaseComp', _vm._b({
|
|
22051
|
+
attrs: {
|
|
22052
|
+
"data": _vm.data,
|
|
22053
|
+
"nowCompId": _vm.nowCompId,
|
|
22054
|
+
"isOpcacity": _vm.isOpcacity,
|
|
22055
|
+
"isMask": false,
|
|
22056
|
+
"lang": _vm.lang
|
|
22057
|
+
},
|
|
22058
|
+
on: {
|
|
22059
|
+
"getConfigData": _vm.getConfigData
|
|
22060
|
+
},
|
|
22061
|
+
scopedSlots: _vm._u([{
|
|
22062
|
+
key: "default",
|
|
22063
|
+
fn: function (slotProps) {
|
|
22064
|
+
return [_c('section', {
|
|
22065
|
+
class: (_vm.configData.widthType === 'full' ? 'width-full' : 'cmhk-home_main', {
|
|
22066
|
+
hoverBorderClass: _vm.isConfigPage
|
|
22067
|
+
}),
|
|
22068
|
+
style: _vm.containerStyle
|
|
22069
|
+
}, [_c('div', {
|
|
22070
|
+
staticClass: "column-setting",
|
|
22071
|
+
class: [`layout-${_vm.configData.layoutType || 'default'}`, `${slotProps.isMobile && _vm.configData.mobileLayout === 'vertical' ? 'mobile-vertical' : 'mobile-horizontal'}`],
|
|
22072
|
+
style: _vm.columnStyle
|
|
22073
|
+
}, _vm._l(_vm.data.childList, function (item, index) {
|
|
22074
|
+
return _c('cms-column-card', _vm._b({
|
|
22075
|
+
key: item.componentId,
|
|
22076
|
+
class: _vm.getColumnItemClass(index),
|
|
22077
|
+
style: _vm.getColumnItemStyle(index),
|
|
22078
|
+
attrs: {
|
|
22079
|
+
"data": item,
|
|
22080
|
+
"nowCompId": _vm.nowCompId,
|
|
22081
|
+
"isOpcacity": _vm.isOpcacity,
|
|
22082
|
+
"isMask": false,
|
|
22083
|
+
"lang": _vm.lang,
|
|
22084
|
+
"isMobile": slotProps.isMobile,
|
|
22085
|
+
"mobileLayout": _vm.configData.mobileLayout
|
|
22086
|
+
}
|
|
22087
|
+
}, 'cms-column-card', _vm.$attrs, false));
|
|
22088
|
+
}), 1)])];
|
|
22089
|
+
}
|
|
22090
|
+
}])
|
|
22091
|
+
}, 'BaseComp', _vm.$attrs, false));
|
|
22092
|
+
};
|
|
22093
|
+
var staticRenderFns = [];
|
|
22094
|
+
|
|
22095
|
+
// EXTERNAL MODULE: ./package/baseComp.vue + 5 modules
|
|
22096
|
+
var baseComp = __webpack_require__(7135);
|
|
22097
|
+
;// ./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
|
|
22098
|
+
|
|
22099
|
+
/* harmony default export */ var Viewvue_type_script_lang_js = ({
|
|
22100
|
+
name: "cms-column",
|
|
22101
|
+
components: {
|
|
22102
|
+
BaseComp: baseComp["default"]
|
|
22103
|
+
},
|
|
22104
|
+
props: {
|
|
22105
|
+
data: {
|
|
22106
|
+
type: Object,
|
|
22107
|
+
default: () => {
|
|
22108
|
+
return {};
|
|
22109
|
+
}
|
|
22110
|
+
},
|
|
22111
|
+
nowCompId: {
|
|
22112
|
+
type: [String, Number],
|
|
22113
|
+
default: ""
|
|
22114
|
+
},
|
|
22115
|
+
isOpcacity: {
|
|
22116
|
+
type: Boolean,
|
|
22117
|
+
default: true
|
|
22118
|
+
},
|
|
22119
|
+
lang: {
|
|
22120
|
+
type: String,
|
|
22121
|
+
default: "zh-HK"
|
|
22122
|
+
}
|
|
22123
|
+
},
|
|
22124
|
+
data() {
|
|
22125
|
+
return {
|
|
22126
|
+
configData: {},
|
|
22127
|
+
messFold: true,
|
|
22128
|
+
// 默认配置数据
|
|
22129
|
+
defaultConfig: {
|
|
22130
|
+
layoutType: "100",
|
|
22131
|
+
heightType: "auto",
|
|
22132
|
+
widthType: "auto",
|
|
22133
|
+
mobileLayout: "vertical",
|
|
22134
|
+
fixedHeight: 300,
|
|
22135
|
+
borderWidth: 0,
|
|
22136
|
+
borderStyle: "solid",
|
|
22137
|
+
borderColor: "",
|
|
22138
|
+
backgroundColor: "#FFF",
|
|
22139
|
+
backgroundImage: "",
|
|
22140
|
+
boxShadow: "",
|
|
22141
|
+
borderRadius: 0,
|
|
22142
|
+
columnGap: 0,
|
|
22143
|
+
rowGap: 0,
|
|
22144
|
+
title: "",
|
|
22145
|
+
description: "",
|
|
22146
|
+
input1: "",
|
|
22147
|
+
showTitle: true,
|
|
22148
|
+
showDescription: true,
|
|
22149
|
+
animationDuration: 300,
|
|
22150
|
+
responsiveBreakpoint: 768
|
|
22151
|
+
}
|
|
22152
|
+
};
|
|
22153
|
+
},
|
|
22154
|
+
mounted() {},
|
|
22155
|
+
watch: {
|
|
22156
|
+
configData: {
|
|
22157
|
+
handler() {
|
|
22158
|
+
this.updateStyles();
|
|
22159
|
+
},
|
|
22160
|
+
immediate: true,
|
|
22161
|
+
deep: true
|
|
22162
|
+
}
|
|
22163
|
+
},
|
|
22164
|
+
computed: {
|
|
22165
|
+
isConfigPage() {
|
|
22166
|
+
return this.$EventBus && this.isOpcacity;
|
|
22167
|
+
},
|
|
22168
|
+
// 容器样式
|
|
22169
|
+
containerStyle() {
|
|
22170
|
+
return {
|
|
22171
|
+
backgroundColor: this.configData.backgroundColor || this.defaultConfig.backgroundColor,
|
|
22172
|
+
backgroundImage: this.configData.backgroundImage ? `url(${this.configData.backgroundImage})` : "",
|
|
22173
|
+
backgroundSize: "cover",
|
|
22174
|
+
backgroundRepeat: "no-repeat",
|
|
22175
|
+
backgroundPosition: "center center",
|
|
22176
|
+
boxShadow: this.configData.boxShadow || this.defaultConfig.boxShadow,
|
|
22177
|
+
borderRadius: `${this.configData.borderRadius || this.defaultConfig.borderRadius}px`,
|
|
22178
|
+
minHeight: this.configData.heightType === "fixed" ? `${this.configData.fixedHeight}px` : "auto"
|
|
22179
|
+
};
|
|
22180
|
+
},
|
|
22181
|
+
// 分栏容器样式
|
|
22182
|
+
columnStyle() {
|
|
22183
|
+
// const gap = this.configData.rowGap || this.defaultConfig.rowGap;
|
|
22184
|
+
return {
|
|
22185
|
+
// gap: `${gap}px`,
|
|
22186
|
+
border: this.configData.borderWidth ? `${this.configData.borderWidth}px ${this.configData.borderStyle} ${this.configData.borderColor}` : "none"
|
|
22187
|
+
};
|
|
22188
|
+
}
|
|
22189
|
+
},
|
|
22190
|
+
methods: {
|
|
22191
|
+
// 获取配置数据
|
|
22192
|
+
getConfigData(configData) {
|
|
22193
|
+
this.configData = configData;
|
|
22194
|
+
this.updateStyles();
|
|
22195
|
+
},
|
|
22196
|
+
// 更新样式
|
|
22197
|
+
updateStyles() {
|
|
22198
|
+
this.$nextTick(() => {
|
|
22199
|
+
// 触发样式更新
|
|
22200
|
+
this.$forceUpdate();
|
|
22201
|
+
});
|
|
22202
|
+
},
|
|
22203
|
+
// 获取分栏项的类名
|
|
22204
|
+
getColumnItemClass(index) {
|
|
22205
|
+
const layoutType = this.configData.layoutType || this.defaultConfig.layoutType;
|
|
22206
|
+
return ["column-item", `column-item-${index}`, `layout-${layoutType}`, {
|
|
22207
|
+
"min-h": this.$EventBus && this.isOpcacity,
|
|
22208
|
+
"first-item": index === 0,
|
|
22209
|
+
"last-item": index === this.data.childList.length - 1
|
|
22210
|
+
}];
|
|
22211
|
+
},
|
|
22212
|
+
// 获取分栏项的样式
|
|
22213
|
+
getColumnItemStyle(index) {
|
|
22214
|
+
const layoutType = this.configData.layoutType || this.defaultConfig.layoutType;
|
|
22215
|
+
const gap = this.configData.rowGap || this.defaultConfig.rowGap;
|
|
22216
|
+
let flexBasis = "100%";
|
|
22217
|
+
let marginRight = "0";
|
|
22218
|
+
|
|
22219
|
+
// 根据布局类型设置宽度
|
|
22220
|
+
switch (layoutType) {
|
|
22221
|
+
case "50-50":
|
|
22222
|
+
flexBasis = `calc(50% - ${gap / 2}px)`;
|
|
22223
|
+
marginRight = index % 2 === 0 ? `${gap}px` : "0";
|
|
22224
|
+
break;
|
|
22225
|
+
case "33-66":
|
|
22226
|
+
flexBasis = index === 0 ? `calc(33.33% - ${gap / 2}px)` : `calc(66.67% - ${gap / 2}px)`;
|
|
22227
|
+
marginRight = index === 0 ? `${gap}px` : "0";
|
|
22228
|
+
break;
|
|
22229
|
+
case "66-33":
|
|
22230
|
+
flexBasis = index === 0 ? `calc(66.67% - ${gap / 2}px)` : `calc(33.33% - ${gap / 2}px)`;
|
|
22231
|
+
marginRight = index === 0 ? `${gap}px` : "0";
|
|
22232
|
+
break;
|
|
22233
|
+
case "33-33-33":
|
|
22234
|
+
flexBasis = `calc(33.33% - ${gap * 2 / 3}px)`;
|
|
22235
|
+
marginRight = index < 2 ? `${gap}px` : "0";
|
|
22236
|
+
break;
|
|
22237
|
+
case "25-50-25":
|
|
22238
|
+
if (index === 0 || index === 2) {
|
|
22239
|
+
flexBasis = `calc(25% - ${gap * 2 / 3}px)`;
|
|
22240
|
+
} else {
|
|
22241
|
+
flexBasis = `calc(50% - ${gap * 2 / 3}px)`;
|
|
22242
|
+
}
|
|
22243
|
+
marginRight = index < 2 ? `${gap}px` : "0";
|
|
22244
|
+
break;
|
|
22245
|
+
default:
|
|
22246
|
+
flexBasis = "100%";
|
|
22247
|
+
}
|
|
22248
|
+
return {
|
|
22249
|
+
flexBasis,
|
|
22250
|
+
marginRight,
|
|
22251
|
+
marginBottom: `${this.configData.columnGap || this.defaultConfig.columnGap}px`
|
|
22252
|
+
};
|
|
22253
|
+
},
|
|
22254
|
+
// 折叠/展开文本
|
|
22255
|
+
foldMessText() {
|
|
22256
|
+
this.messFold = !this.messFold;
|
|
22257
|
+
},
|
|
22258
|
+
// 处理跳转链接
|
|
22259
|
+
decodeJumpUrl(url) {
|
|
22260
|
+
if (!url) return;
|
|
22261
|
+
top.location.href = url;
|
|
22262
|
+
}
|
|
22263
|
+
}
|
|
22264
|
+
});
|
|
22265
|
+
;// ./package/cms-column/View.vue?vue&type=script&lang=js
|
|
22266
|
+
/* harmony default export */ var cms_column_Viewvue_type_script_lang_js = (Viewvue_type_script_lang_js);
|
|
22267
|
+
;// ./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=f2ba72e8&prod&lang=scss&scoped=true
|
|
22268
|
+
// extracted by mini-css-extract-plugin
|
|
22269
|
+
|
|
22270
|
+
;// ./package/cms-column/View.vue?vue&type=style&index=0&id=f2ba72e8&prod&lang=scss&scoped=true
|
|
22271
|
+
|
|
22272
|
+
// EXTERNAL MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
|
|
22273
|
+
var componentNormalizer = __webpack_require__(1656);
|
|
22274
|
+
;// ./package/cms-column/View.vue
|
|
22275
|
+
|
|
22276
|
+
|
|
22277
|
+
|
|
22278
|
+
;
|
|
22279
|
+
|
|
22280
|
+
|
|
22281
|
+
/* normalize component */
|
|
22282
|
+
|
|
22283
|
+
var component = (0,componentNormalizer/* default */.A)(
|
|
22284
|
+
cms_column_Viewvue_type_script_lang_js,
|
|
22285
|
+
render,
|
|
22286
|
+
staticRenderFns,
|
|
22287
|
+
false,
|
|
22288
|
+
null,
|
|
22289
|
+
"f2ba72e8",
|
|
22290
|
+
null
|
|
22291
|
+
|
|
22292
|
+
)
|
|
22293
|
+
|
|
22294
|
+
/* harmony default export */ var View = (component.exports);
|
|
22295
|
+
|
|
21514
22296
|
/***/ }),
|
|
21515
22297
|
|
|
21516
22298
|
/***/ 2179:
|
|
@@ -22559,19 +23341,19 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
22559
23341
|
|
|
22560
23342
|
const View = () => Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 4726));
|
|
22561
23343
|
const langData = {
|
|
22562
|
-
input1: "
|
|
23344
|
+
input1: "描述",
|
|
22563
23345
|
input2: "标题",
|
|
22564
|
-
input3: "
|
|
23346
|
+
input3: "高亮标题"
|
|
22565
23347
|
};
|
|
22566
23348
|
const configDataType = (0,_baseConfig__WEBPACK_IMPORTED_MODULE_0__.getLangDataType)(langData, {
|
|
22567
23349
|
input1: {
|
|
22568
|
-
label: "
|
|
23350
|
+
label: "描述"
|
|
22569
23351
|
},
|
|
22570
23352
|
input2: {
|
|
22571
23353
|
label: "标题"
|
|
22572
23354
|
},
|
|
22573
23355
|
input3: {
|
|
22574
|
-
label: "
|
|
23356
|
+
label: "高亮标题"
|
|
22575
23357
|
}
|
|
22576
23358
|
});
|
|
22577
23359
|
const validateSchema = (0,_baseConfig__WEBPACK_IMPORTED_MODULE_0__.getValidateSchema)(langData);
|
|
@@ -23511,7 +24293,7 @@ module.exports = Math.min;
|
|
|
23511
24293
|
__webpack_require__.r(__webpack_exports__);
|
|
23512
24294
|
/* harmony import */ var _baseConfig__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2128);
|
|
23513
24295
|
|
|
23514
|
-
const View = () => Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__,
|
|
24296
|
+
const View = () => Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 2171));
|
|
23515
24297
|
const langData = {
|
|
23516
24298
|
// 布局配置
|
|
23517
24299
|
layoutType: "100",
|
|
@@ -23883,7 +24665,7 @@ module.exports = function (O) {
|
|
|
23883
24665
|
__webpack_require__.r(__webpack_exports__);
|
|
23884
24666
|
/* harmony import */ var _baseConfig__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2128);
|
|
23885
24667
|
|
|
23886
|
-
const View = () => Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__,
|
|
24668
|
+
const View = () => Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 5846));
|
|
23887
24669
|
const langData = {
|
|
23888
24670
|
// 视频源设置
|
|
23889
24671
|
title: '',
|
|
@@ -32457,7 +33239,7 @@ $({ target: 'Iterator', proto: true, real: true }, {
|
|
|
32457
33239
|
__webpack_require__.r(__webpack_exports__);
|
|
32458
33240
|
/* harmony import */ var _baseConfig__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2128);
|
|
32459
33241
|
|
|
32460
|
-
const View = () => Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__,
|
|
33242
|
+
const View = () => Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 688));
|
|
32461
33243
|
|
|
32462
33244
|
// 默认配置数据
|
|
32463
33245
|
const langData = {
|
|
@@ -36730,8 +37512,8 @@ var map = {
|
|
|
36730
37512
|
"./cms-banner/View.vue": 7747,
|
|
36731
37513
|
"./cms-button/View.vue": 1163,
|
|
36732
37514
|
"./cms-cells/View.vue": 983,
|
|
36733
|
-
"./cms-column-card/View.vue":
|
|
36734
|
-
"./cms-column/View.vue":
|
|
37515
|
+
"./cms-column-card/View.vue": 688,
|
|
37516
|
+
"./cms-column/View.vue": 2171,
|
|
36735
37517
|
"./cms-description/View.vue": 6296,
|
|
36736
37518
|
"./cms-dynamic-comp/View.vue": 7298,
|
|
36737
37519
|
"./cms-iconFour/View.vue": 2946,
|
|
@@ -36756,7 +37538,7 @@ var map = {
|
|
|
36756
37538
|
"./cms-titleLeft/View.vue": 4598,
|
|
36757
37539
|
"./cms-via-storedValueCard/View.vue": 4109,
|
|
36758
37540
|
"./cms-video-group/View.vue": 103,
|
|
36759
|
-
"./cms-video/View.vue":
|
|
37541
|
+
"./cms-video/View.vue": 5846,
|
|
36760
37542
|
"./cms-view/View.vue": 3774
|
|
36761
37543
|
};
|
|
36762
37544
|
|
|
@@ -37618,6 +38400,383 @@ const validateSchema = (0,_baseConfig__WEBPACK_IMPORTED_MODULE_0__.getValidateSc
|
|
|
37618
38400
|
|
|
37619
38401
|
/***/ }),
|
|
37620
38402
|
|
|
38403
|
+
/***/ 5846:
|
|
38404
|
+
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
38405
|
+
|
|
38406
|
+
"use strict";
|
|
38407
|
+
// ESM COMPAT FLAG
|
|
38408
|
+
__webpack_require__.r(__webpack_exports__);
|
|
38409
|
+
|
|
38410
|
+
// EXPORTS
|
|
38411
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
38412
|
+
"default": function() { return /* binding */ View; }
|
|
38413
|
+
});
|
|
38414
|
+
|
|
38415
|
+
;// ./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
|
|
38416
|
+
var render = function render() {
|
|
38417
|
+
var _vm = this,
|
|
38418
|
+
_c = _vm._self._c;
|
|
38419
|
+
return _c('BaseComp', _vm._b({
|
|
38420
|
+
attrs: {
|
|
38421
|
+
"data": _vm.data,
|
|
38422
|
+
"nowCompId": _vm.nowCompId,
|
|
38423
|
+
"isOpcacity": _vm.isOpcacity,
|
|
38424
|
+
"lang": _vm.lang
|
|
38425
|
+
},
|
|
38426
|
+
on: {
|
|
38427
|
+
"getConfigData": _vm.getConfigData
|
|
38428
|
+
}
|
|
38429
|
+
}, 'BaseComp', _vm.$attrs, false), [_c('section', {
|
|
38430
|
+
staticClass: "cms-video-container",
|
|
38431
|
+
class: [_vm.configData.customClass || ''],
|
|
38432
|
+
style: _vm.containerStyle
|
|
38433
|
+
}, [_c('div', {
|
|
38434
|
+
staticClass: "f-c-c"
|
|
38435
|
+
}, [_vm._v(_vm._s(_vm.configData.title))]), _c('div', {
|
|
38436
|
+
staticClass: "video-wrapper",
|
|
38437
|
+
style: _vm.wrapperStyle
|
|
38438
|
+
}, [_vm.videoType === 'direct' && _vm.configData.videoUrl ? _c('video', {
|
|
38439
|
+
staticClass: "cms-video direct-video",
|
|
38440
|
+
style: _vm.videoStyle,
|
|
38441
|
+
attrs: {
|
|
38442
|
+
"src": _vm.configData.videoUrl,
|
|
38443
|
+
"controls": _vm.configData.showControls,
|
|
38444
|
+
"autoplay": _vm.configData.autoplay,
|
|
38445
|
+
"loop": _vm.configData.loop,
|
|
38446
|
+
"poster": _vm.configData.posterUrl
|
|
38447
|
+
},
|
|
38448
|
+
domProps: {
|
|
38449
|
+
"muted": _vm.configData.muted
|
|
38450
|
+
},
|
|
38451
|
+
on: {
|
|
38452
|
+
"loadstart": _vm.onVideoLoadStart,
|
|
38453
|
+
"loadeddata": _vm.onVideoLoaded,
|
|
38454
|
+
"error": _vm.onVideoError
|
|
38455
|
+
}
|
|
38456
|
+
}) : _vm.configData.embedCode ? _c('div', {
|
|
38457
|
+
staticClass: "cms-video embed-video",
|
|
38458
|
+
style: _vm.videoStyle,
|
|
38459
|
+
domProps: {
|
|
38460
|
+
"innerHTML": _vm._s(_vm.configData.embedCode)
|
|
38461
|
+
}
|
|
38462
|
+
}) : _c('div', {
|
|
38463
|
+
staticClass: "video-placeholder",
|
|
38464
|
+
style: _vm.placeholderStyle
|
|
38465
|
+
}, [_c('img', {
|
|
38466
|
+
staticStyle: {
|
|
38467
|
+
"width": "97.82px",
|
|
38468
|
+
"height": "97.82px"
|
|
38469
|
+
},
|
|
38470
|
+
attrs: {
|
|
38471
|
+
"src": __webpack_require__(6148),
|
|
38472
|
+
"alt": "Video Camera"
|
|
38473
|
+
}
|
|
38474
|
+
})])])])]);
|
|
38475
|
+
};
|
|
38476
|
+
var staticRenderFns = [];
|
|
38477
|
+
|
|
38478
|
+
;// ./package/cms-video/View.vue?vue&type=template&id=b1a44b52&scoped=true
|
|
38479
|
+
|
|
38480
|
+
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.constructor.js
|
|
38481
|
+
var es_iterator_constructor = __webpack_require__(8111);
|
|
38482
|
+
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.for-each.js
|
|
38483
|
+
var es_iterator_for_each = __webpack_require__(7588);
|
|
38484
|
+
// EXTERNAL MODULE: ./package/baseComp.vue + 5 modules
|
|
38485
|
+
var baseComp = __webpack_require__(7135);
|
|
38486
|
+
;// ./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
|
|
38487
|
+
|
|
38488
|
+
|
|
38489
|
+
|
|
38490
|
+
|
|
38491
|
+
|
|
38492
|
+
/* harmony default export */ var Viewvue_type_script_lang_js = ({
|
|
38493
|
+
name: "cms-video",
|
|
38494
|
+
components: {
|
|
38495
|
+
BaseComp: baseComp["default"]
|
|
38496
|
+
},
|
|
38497
|
+
props: {
|
|
38498
|
+
data: {
|
|
38499
|
+
type: Object,
|
|
38500
|
+
default: () => {
|
|
38501
|
+
return {};
|
|
38502
|
+
}
|
|
38503
|
+
},
|
|
38504
|
+
nowCompId: {
|
|
38505
|
+
type: [String, Number],
|
|
38506
|
+
default: ""
|
|
38507
|
+
},
|
|
38508
|
+
isOpcacity: {
|
|
38509
|
+
type: Boolean,
|
|
38510
|
+
default: true
|
|
38511
|
+
},
|
|
38512
|
+
lang: {
|
|
38513
|
+
type: String,
|
|
38514
|
+
default: "zh-HK"
|
|
38515
|
+
}
|
|
38516
|
+
},
|
|
38517
|
+
data() {
|
|
38518
|
+
return {
|
|
38519
|
+
configData: {},
|
|
38520
|
+
videoLoaded: false,
|
|
38521
|
+
videoError: false,
|
|
38522
|
+
// 默认配置数据
|
|
38523
|
+
defaultConfig: {
|
|
38524
|
+
// 视频源设置
|
|
38525
|
+
videoType: "direct",
|
|
38526
|
+
videoUrl: "",
|
|
38527
|
+
embedCode: "",
|
|
38528
|
+
posterUrl: "",
|
|
38529
|
+
// 播放控制
|
|
38530
|
+
showControls: true,
|
|
38531
|
+
autoplay: false,
|
|
38532
|
+
loop: false,
|
|
38533
|
+
muted: false,
|
|
38534
|
+
// 尺寸控制
|
|
38535
|
+
widthType: "auto",
|
|
38536
|
+
widthValue: 100,
|
|
38537
|
+
heightType: "auto",
|
|
38538
|
+
heightValue: 100,
|
|
38539
|
+
aspectRatio: "16:9",
|
|
38540
|
+
customAspectRatio: "16:9",
|
|
38541
|
+
maxWidth: 0,
|
|
38542
|
+
maxHeight: 0,
|
|
38543
|
+
// 样式设置
|
|
38544
|
+
borderRadius: 0,
|
|
38545
|
+
// 高级配置
|
|
38546
|
+
customClass: "",
|
|
38547
|
+
customStyle: ""
|
|
38548
|
+
}
|
|
38549
|
+
};
|
|
38550
|
+
},
|
|
38551
|
+
mounted() {
|
|
38552
|
+
this.initConfigData();
|
|
38553
|
+
},
|
|
38554
|
+
watch: {
|
|
38555
|
+
configData: {
|
|
38556
|
+
handler() {
|
|
38557
|
+
this.updateStyles();
|
|
38558
|
+
},
|
|
38559
|
+
deep: true
|
|
38560
|
+
}
|
|
38561
|
+
},
|
|
38562
|
+
computed: {
|
|
38563
|
+
// 视频类型
|
|
38564
|
+
videoType() {
|
|
38565
|
+
return this.configData.videoType || this.defaultConfig.videoType;
|
|
38566
|
+
},
|
|
38567
|
+
// 实际使用的宽高比
|
|
38568
|
+
actualAspectRatio() {
|
|
38569
|
+
const config = {
|
|
38570
|
+
...this.defaultConfig,
|
|
38571
|
+
...this.configData
|
|
38572
|
+
};
|
|
38573
|
+
if (config.aspectRatio === "custom") {
|
|
38574
|
+
return config.customAspectRatio || "16:9";
|
|
38575
|
+
}
|
|
38576
|
+
return config.aspectRatio;
|
|
38577
|
+
},
|
|
38578
|
+
// 容器样式
|
|
38579
|
+
containerStyle() {
|
|
38580
|
+
const config = {
|
|
38581
|
+
...this.defaultConfig,
|
|
38582
|
+
...this.configData
|
|
38583
|
+
};
|
|
38584
|
+
return {
|
|
38585
|
+
...this.parseCustomStyle(config.customStyle)
|
|
38586
|
+
};
|
|
38587
|
+
},
|
|
38588
|
+
// 包装器样式
|
|
38589
|
+
wrapperStyle() {
|
|
38590
|
+
const config = {
|
|
38591
|
+
...this.defaultConfig,
|
|
38592
|
+
...this.configData
|
|
38593
|
+
};
|
|
38594
|
+
let width = "auto";
|
|
38595
|
+
let height = "auto";
|
|
38596
|
+
|
|
38597
|
+
// 宽度设置
|
|
38598
|
+
if (config.widthType === "fixed") {
|
|
38599
|
+
width = `${config.widthValue}px`;
|
|
38600
|
+
} else if (config.widthType === "percent") {
|
|
38601
|
+
width = `${config.widthValue}%`;
|
|
38602
|
+
}
|
|
38603
|
+
|
|
38604
|
+
// 高度设置
|
|
38605
|
+
if (config.heightType === "fixed") {
|
|
38606
|
+
height = `${config.heightValue}px`;
|
|
38607
|
+
} else if (config.heightType === "percent") {
|
|
38608
|
+
height = `${config.heightValue}%`;
|
|
38609
|
+
} else if (config.heightType === "aspect") {
|
|
38610
|
+
// 根据宽高比计算高度
|
|
38611
|
+
height = "auto";
|
|
38612
|
+
}
|
|
38613
|
+
return {
|
|
38614
|
+
width,
|
|
38615
|
+
height,
|
|
38616
|
+
maxWidth: config.maxWidth > 0 ? `${config.maxWidth}px` : "none",
|
|
38617
|
+
maxHeight: config.maxHeight > 0 ? `${config.maxHeight}px` : "none",
|
|
38618
|
+
borderRadius: `${config.borderRadius}px`,
|
|
38619
|
+
overflow: "hidden",
|
|
38620
|
+
display: "block",
|
|
38621
|
+
position: "relative"
|
|
38622
|
+
};
|
|
38623
|
+
},
|
|
38624
|
+
// 视频样式
|
|
38625
|
+
videoStyle() {
|
|
38626
|
+
const config = {
|
|
38627
|
+
...this.defaultConfig,
|
|
38628
|
+
...this.configData
|
|
38629
|
+
};
|
|
38630
|
+
let style = {
|
|
38631
|
+
width: "100%",
|
|
38632
|
+
height: "100%",
|
|
38633
|
+
display: "block",
|
|
38634
|
+
border: "none",
|
|
38635
|
+
outline: "none"
|
|
38636
|
+
};
|
|
38637
|
+
|
|
38638
|
+
// 如果是宽高比模式,设置aspect-ratio
|
|
38639
|
+
if (config.heightType === "aspect") {
|
|
38640
|
+
style.aspectRatio = this.actualAspectRatio.replace(":", "/");
|
|
38641
|
+
}
|
|
38642
|
+
return style;
|
|
38643
|
+
},
|
|
38644
|
+
// 占位符样式
|
|
38645
|
+
placeholderStyle() {
|
|
38646
|
+
const config = {
|
|
38647
|
+
...this.defaultConfig,
|
|
38648
|
+
...this.configData
|
|
38649
|
+
};
|
|
38650
|
+
let width = "100%";
|
|
38651
|
+
let height = "auto";
|
|
38652
|
+
|
|
38653
|
+
// 如果设置了固定尺寸,使用设置的尺寸
|
|
38654
|
+
if (config.widthType === "fixed") {
|
|
38655
|
+
width = `${config.widthValue}px`;
|
|
38656
|
+
} else if (config.widthType === "percent") {
|
|
38657
|
+
width = `${config.widthValue}%`;
|
|
38658
|
+
}
|
|
38659
|
+
if (config.heightType === "fixed") {
|
|
38660
|
+
height = `${config.heightValue}px`;
|
|
38661
|
+
} else if (config.heightType === "aspect") {
|
|
38662
|
+
// 使用aspect-ratio保持16:9比例
|
|
38663
|
+
height = "auto";
|
|
38664
|
+
} else {
|
|
38665
|
+
// 默认使用16:9比例
|
|
38666
|
+
height = "auto";
|
|
38667
|
+
}
|
|
38668
|
+
const style = {
|
|
38669
|
+
width,
|
|
38670
|
+
height,
|
|
38671
|
+
backgroundColor: "#f5f7fa",
|
|
38672
|
+
border: "1px dashed #dcdfe6",
|
|
38673
|
+
borderRadius: `${config.borderRadius}px`,
|
|
38674
|
+
display: "flex",
|
|
38675
|
+
flexDirection: "column",
|
|
38676
|
+
alignItems: "center",
|
|
38677
|
+
justifyContent: "center",
|
|
38678
|
+
color: "#909399",
|
|
38679
|
+
fontSize: "14px"
|
|
38680
|
+
};
|
|
38681
|
+
|
|
38682
|
+
// 如果不是固定高度,使用aspect-ratio保持16:9比例
|
|
38683
|
+
if (config.heightType !== "fixed") {
|
|
38684
|
+
style.aspectRatio = this.actualAspectRatio.replace(":", "/");
|
|
38685
|
+
}
|
|
38686
|
+
return style;
|
|
38687
|
+
}
|
|
38688
|
+
},
|
|
38689
|
+
methods: {
|
|
38690
|
+
// 初始化配置数据
|
|
38691
|
+
initConfigData() {
|
|
38692
|
+
this.configData = {
|
|
38693
|
+
...this.defaultConfig,
|
|
38694
|
+
...this.configData
|
|
38695
|
+
};
|
|
38696
|
+
},
|
|
38697
|
+
// 获取配置数据
|
|
38698
|
+
getConfigData(configData) {
|
|
38699
|
+
this.configData = {
|
|
38700
|
+
...this.defaultConfig,
|
|
38701
|
+
...configData
|
|
38702
|
+
};
|
|
38703
|
+
this.updateStyles();
|
|
38704
|
+
},
|
|
38705
|
+
// 更新样式
|
|
38706
|
+
updateStyles() {
|
|
38707
|
+
this.$nextTick(() => {
|
|
38708
|
+
this.$forceUpdate();
|
|
38709
|
+
});
|
|
38710
|
+
},
|
|
38711
|
+
// 视频开始加载
|
|
38712
|
+
onVideoLoadStart() {
|
|
38713
|
+
this.videoLoaded = false;
|
|
38714
|
+
this.videoError = false;
|
|
38715
|
+
},
|
|
38716
|
+
// 视频加载完成
|
|
38717
|
+
onVideoLoaded() {
|
|
38718
|
+
this.videoLoaded = true;
|
|
38719
|
+
this.videoError = false;
|
|
38720
|
+
},
|
|
38721
|
+
// 视频加载失败
|
|
38722
|
+
onVideoError() {
|
|
38723
|
+
this.videoLoaded = false;
|
|
38724
|
+
this.videoError = true;
|
|
38725
|
+
},
|
|
38726
|
+
// 解析自定义样式
|
|
38727
|
+
parseCustomStyle(customStyle) {
|
|
38728
|
+
if (!customStyle) return {};
|
|
38729
|
+
try {
|
|
38730
|
+
const styles = {};
|
|
38731
|
+
const declarations = customStyle.split(";");
|
|
38732
|
+
declarations.forEach(declaration => {
|
|
38733
|
+
const [property, value] = declaration.split(":");
|
|
38734
|
+
if (property && value) {
|
|
38735
|
+
const camelCaseProperty = property.trim().replace(/-([a-z])/g, g => g[1].toUpperCase());
|
|
38736
|
+
styles[camelCaseProperty] = value.trim();
|
|
38737
|
+
}
|
|
38738
|
+
});
|
|
38739
|
+
return styles;
|
|
38740
|
+
} catch (error) {
|
|
38741
|
+
console.warn("解析自定义样式失败:", error);
|
|
38742
|
+
return {};
|
|
38743
|
+
}
|
|
38744
|
+
}
|
|
38745
|
+
}
|
|
38746
|
+
});
|
|
38747
|
+
;// ./package/cms-video/View.vue?vue&type=script&lang=js
|
|
38748
|
+
/* harmony default export */ var cms_video_Viewvue_type_script_lang_js = (Viewvue_type_script_lang_js);
|
|
38749
|
+
;// ./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
|
|
38750
|
+
// extracted by mini-css-extract-plugin
|
|
38751
|
+
|
|
38752
|
+
;// ./package/cms-video/View.vue?vue&type=style&index=0&id=b1a44b52&prod&lang=scss&scoped=true
|
|
38753
|
+
|
|
38754
|
+
// EXTERNAL MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
|
|
38755
|
+
var componentNormalizer = __webpack_require__(1656);
|
|
38756
|
+
;// ./package/cms-video/View.vue
|
|
38757
|
+
|
|
38758
|
+
|
|
38759
|
+
|
|
38760
|
+
;
|
|
38761
|
+
|
|
38762
|
+
|
|
38763
|
+
/* normalize component */
|
|
38764
|
+
|
|
38765
|
+
var component = (0,componentNormalizer/* default */.A)(
|
|
38766
|
+
cms_video_Viewvue_type_script_lang_js,
|
|
38767
|
+
render,
|
|
38768
|
+
staticRenderFns,
|
|
38769
|
+
false,
|
|
38770
|
+
null,
|
|
38771
|
+
"b1a44b52",
|
|
38772
|
+
null
|
|
38773
|
+
|
|
38774
|
+
)
|
|
38775
|
+
|
|
38776
|
+
/* harmony default export */ var View = (component.exports);
|
|
38777
|
+
|
|
38778
|
+
/***/ }),
|
|
38779
|
+
|
|
37621
38780
|
/***/ 5854:
|
|
37622
38781
|
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
|
|
37623
38782
|
|
|
@@ -41538,384 +42697,6 @@ Sortable.mount(Remove, Revert);
|
|
|
41538
42697
|
/* harmony default export */ __webpack_exports__["default"] = (Sortable);
|
|
41539
42698
|
|
|
41540
42699
|
|
|
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
42700
|
/***/ }),
|
|
41920
42701
|
|
|
41921
42702
|
/***/ 6269:
|
|
@@ -47341,281 +48122,6 @@ module.exports = function (argument) {
|
|
|
47341
48122
|
};
|
|
47342
48123
|
|
|
47343
48124
|
|
|
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
48125
|
/***/ }),
|
|
47620
48126
|
|
|
47621
48127
|
/***/ 8066:
|
|
@@ -52577,513 +53083,6 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
52577
53083
|
|
|
52578
53084
|
/***/ }),
|
|
52579
53085
|
|
|
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
53086
|
/***/ 9429:
|
|
53088
53087
|
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
|
|
53089
53088
|
|