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.common.js
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
__webpack_require__.r(__webpack_exports__);
|
|
9
9
|
/* harmony import */ var _baseConfig__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(649);
|
|
10
10
|
|
|
11
|
-
const View = () => Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__,
|
|
11
|
+
const View = () => Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 8573));
|
|
12
12
|
const langData = {
|
|
13
13
|
// 视频源设置
|
|
14
14
|
title: '',
|
|
@@ -1282,513 +1282,6 @@ module.exports = Math.pow;
|
|
|
1282
1282
|
module.exports = {};
|
|
1283
1283
|
|
|
1284
1284
|
|
|
1285
|
-
/***/ }),
|
|
1286
|
-
|
|
1287
|
-
/***/ 470:
|
|
1288
|
-
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
1289
|
-
|
|
1290
|
-
"use strict";
|
|
1291
|
-
// ESM COMPAT FLAG
|
|
1292
|
-
__webpack_require__.r(__webpack_exports__);
|
|
1293
|
-
|
|
1294
|
-
// EXPORTS
|
|
1295
|
-
__webpack_require__.d(__webpack_exports__, {
|
|
1296
|
-
"default": function() { return /* binding */ View; }
|
|
1297
|
-
});
|
|
1298
|
-
|
|
1299
|
-
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.constructor.js
|
|
1300
|
-
var es_iterator_constructor = __webpack_require__(8111);
|
|
1301
|
-
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.drop.js
|
|
1302
|
-
var es_iterator_drop = __webpack_require__(9314);
|
|
1303
|
-
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
var render = function render() {
|
|
1309
|
-
var _vm = this,
|
|
1310
|
-
_c = _vm._self._c;
|
|
1311
|
-
return _c('BaseComp', _vm._b({
|
|
1312
|
-
attrs: {
|
|
1313
|
-
"data": _vm.data,
|
|
1314
|
-
"nowCompId": _vm.nowCompId,
|
|
1315
|
-
"isOpcacity": _vm.isOpcacity,
|
|
1316
|
-
"isMask": false,
|
|
1317
|
-
"lang": _vm.lang,
|
|
1318
|
-
"showDel": false
|
|
1319
|
-
},
|
|
1320
|
-
on: {
|
|
1321
|
-
"getConfigData": _vm.getConfigData
|
|
1322
|
-
}
|
|
1323
|
-
}, 'BaseComp', _vm.$attrs, false), [_vm.isConfigPage ? _c('div', {
|
|
1324
|
-
staticClass: "main_drag hoverBorderClass",
|
|
1325
|
-
style: _vm.cardContainerStyle,
|
|
1326
|
-
attrs: {
|
|
1327
|
-
"id": `cardTarget${_vm.data.componentId}`
|
|
1328
|
-
},
|
|
1329
|
-
on: {
|
|
1330
|
-
"dragover": _vm.dragover,
|
|
1331
|
-
"dragend": function ($event) {
|
|
1332
|
-
_vm.showAddCom = false;
|
|
1333
|
-
},
|
|
1334
|
-
"drop": _vm.drop
|
|
1335
|
-
}
|
|
1336
|
-
}, [_c('Draggable', {
|
|
1337
|
-
staticStyle: {
|
|
1338
|
-
"position": "relative"
|
|
1339
|
-
},
|
|
1340
|
-
attrs: {
|
|
1341
|
-
"group": _vm.groupConfigForMain,
|
|
1342
|
-
"chosen-class": "chosen",
|
|
1343
|
-
"force-fallback": "true",
|
|
1344
|
-
"animation": "1000",
|
|
1345
|
-
"move": _vm.onMove
|
|
1346
|
-
},
|
|
1347
|
-
on: {
|
|
1348
|
-
"start": _vm.onStart,
|
|
1349
|
-
"end": function ($event) {
|
|
1350
|
-
_vm.showAddCom = false;
|
|
1351
|
-
}
|
|
1352
|
-
},
|
|
1353
|
-
model: {
|
|
1354
|
-
value: _vm.data.childList,
|
|
1355
|
-
callback: function ($$v) {
|
|
1356
|
-
_vm.$set(_vm.data, "childList", $$v);
|
|
1357
|
-
},
|
|
1358
|
-
expression: "data.childList"
|
|
1359
|
-
}
|
|
1360
|
-
}, [_vm._l(_vm.data.childList, function (item, index) {
|
|
1361
|
-
return _c('div', {
|
|
1362
|
-
key: item.componentId,
|
|
1363
|
-
staticStyle: {
|
|
1364
|
-
"position": "relative"
|
|
1365
|
-
}
|
|
1366
|
-
}, [_vm.showAddCom ? _c('div', {
|
|
1367
|
-
staticClass: "up_insert",
|
|
1368
|
-
attrs: {
|
|
1369
|
-
"id": `${item.componentId}-cardTargetup`
|
|
1370
|
-
}
|
|
1371
|
-
}, [_c('i', {
|
|
1372
|
-
staticClass: "icon-up",
|
|
1373
|
-
attrs: {
|
|
1374
|
-
"id": `${item.componentId}-upi`
|
|
1375
|
-
}
|
|
1376
|
-
}), _c('span', {
|
|
1377
|
-
attrs: {
|
|
1378
|
-
"id": `${item.componentId}-upspan`
|
|
1379
|
-
}
|
|
1380
|
-
}, [_vm._v("插入组件")])]) : _vm._e(), _c(item.cmsCompName, {
|
|
1381
|
-
tag: "component",
|
|
1382
|
-
style: {
|
|
1383
|
-
marginTop: _vm.showAddCom && index == 0 ? '20px' : '0px'
|
|
1384
|
-
},
|
|
1385
|
-
attrs: {
|
|
1386
|
-
"data": item,
|
|
1387
|
-
"lang": _vm.lang,
|
|
1388
|
-
"isOpcacity": _vm.isOpcacity,
|
|
1389
|
-
"nowCompId": _vm.nowCompId
|
|
1390
|
-
}
|
|
1391
|
-
})], 1);
|
|
1392
|
-
}), _vm.showAddCom ? _c('div', {
|
|
1393
|
-
staticClass: "up_insert insert_bottom",
|
|
1394
|
-
style: {
|
|
1395
|
-
bottom: _vm.data.childList.length ? '0px' : '-24px'
|
|
1396
|
-
},
|
|
1397
|
-
attrs: {
|
|
1398
|
-
"id": `-cardTargetdown`
|
|
1399
|
-
}
|
|
1400
|
-
}, [_c('i', {
|
|
1401
|
-
staticClass: "icon-up"
|
|
1402
|
-
}), _c('span', [_vm._v("插入组件")])]) : _vm._e()], 2)], 1) : _c('cms-view', _vm._b({
|
|
1403
|
-
style: _vm.cardContainerStyle,
|
|
1404
|
-
attrs: {
|
|
1405
|
-
"data": _vm.data.childList,
|
|
1406
|
-
"lang": _vm.lang,
|
|
1407
|
-
"isOpcacity": false
|
|
1408
|
-
}
|
|
1409
|
-
}, 'cms-view', _vm.$attrs, false))], 1);
|
|
1410
|
-
};
|
|
1411
|
-
var staticRenderFns = [];
|
|
1412
|
-
|
|
1413
|
-
;// ./package/cms-column-card/View.vue?vue&type=template&id=28effaca&scoped=true
|
|
1414
|
-
|
|
1415
|
-
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
|
|
1416
|
-
var es_array_push = __webpack_require__(4114);
|
|
1417
|
-
// EXTERNAL MODULE: ./package/baseComp.vue + 5 modules
|
|
1418
|
-
var baseComp = __webpack_require__(5298);
|
|
1419
|
-
// EXTERNAL MODULE: ./node_modules/vuedraggable/dist/vuedraggable.umd.js
|
|
1420
|
-
var vuedraggable_umd = __webpack_require__(1527);
|
|
1421
|
-
var vuedraggable_umd_default = /*#__PURE__*/__webpack_require__.n(vuedraggable_umd);
|
|
1422
|
-
// EXTERNAL MODULE: ./package/baseConfig.js
|
|
1423
|
-
var baseConfig = __webpack_require__(649);
|
|
1424
|
-
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.find.js
|
|
1425
|
-
var es_iterator_find = __webpack_require__(116);
|
|
1426
|
-
// EXTERNAL MODULE: ./src/utils/index.js
|
|
1427
|
-
var utils = __webpack_require__(1996);
|
|
1428
|
-
;// ./src/views/standard_page.js
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
const standard_page_list = [{
|
|
1435
|
-
id: 1,
|
|
1436
|
-
componentId: 1,
|
|
1437
|
-
componentName: "范本1-防诈骗提示",
|
|
1438
|
-
standList: ["cms-banner", "cms-titleCenter", "cms-lineThree"]
|
|
1439
|
-
}, {
|
|
1440
|
-
id: 2,
|
|
1441
|
-
componentId: 2,
|
|
1442
|
-
componentName: "范本2-员工优惠",
|
|
1443
|
-
standList: ["cms-banner", "cms-description", "cms-activityCountdown", "cms-titleLeft", "cms-proCard", "cms-termsAndConditions"]
|
|
1444
|
-
}];
|
|
1445
|
-
const getComponentKey = (compList, id, noCompId = false) => {
|
|
1446
|
-
if (noCompId) return id;
|
|
1447
|
-
let compConfig = compList.find(item => item.id == id);
|
|
1448
|
-
if (compConfig.type == "1") {
|
|
1449
|
-
return compConfig.componentId;
|
|
1450
|
-
}
|
|
1451
|
-
return "cms-dynamic-comp";
|
|
1452
|
-
};
|
|
1453
|
-
const getCopyTemplateCompConfig = (compList, componentKey) => {
|
|
1454
|
-
let otherConfig = {};
|
|
1455
|
-
const configureJson = compList.find(item => item.id == componentKey).configureJson;
|
|
1456
|
-
if (configureJson.wujieConfig) {
|
|
1457
|
-
//如果是第三方组件加一个临时标识
|
|
1458
|
-
otherConfig = {
|
|
1459
|
-
originalComponentId: configureJson.componentId,
|
|
1460
|
-
originalVersionId: configureJson.wujieConfig.versionId,
|
|
1461
|
-
operation: "copyTemplate"
|
|
1462
|
-
};
|
|
1463
|
-
}
|
|
1464
|
-
return {
|
|
1465
|
-
...configureJson,
|
|
1466
|
-
componentId: (0,utils/* getUuidCode */.J0)(32),
|
|
1467
|
-
...otherConfig
|
|
1468
|
-
};
|
|
1469
|
-
};
|
|
1470
|
-
const isStaticComp = componentKey => {
|
|
1471
|
-
return ["cms-header", "cms-footer", "cms-breadCrumb"].includes(componentKey);
|
|
1472
|
-
};
|
|
1473
|
-
const getWujieCompInfo = (compList, componentId, isTemplate) => {
|
|
1474
|
-
let compConfig = compList.find(item => item.id == componentId);
|
|
1475
|
-
if (isTemplate) if (compConfig.type == "1") {
|
|
1476
|
-
return compConfig;
|
|
1477
|
-
}
|
|
1478
|
-
return {
|
|
1479
|
-
...compConfig
|
|
1480
|
-
};
|
|
1481
|
-
};
|
|
1482
|
-
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
/* harmony default export */ var Viewvue_type_script_lang_js = ({
|
|
1490
|
-
name: "cms-column-card",
|
|
1491
|
-
components: {
|
|
1492
|
-
BaseComp: baseComp["default"],
|
|
1493
|
-
Draggable: (vuedraggable_umd_default())
|
|
1494
|
-
},
|
|
1495
|
-
props: {
|
|
1496
|
-
data: {
|
|
1497
|
-
type: Object,
|
|
1498
|
-
default: () => {
|
|
1499
|
-
return {};
|
|
1500
|
-
}
|
|
1501
|
-
},
|
|
1502
|
-
nowCompId: {
|
|
1503
|
-
type: [String, Number],
|
|
1504
|
-
default: ""
|
|
1505
|
-
},
|
|
1506
|
-
isOpcacity: {
|
|
1507
|
-
type: Boolean,
|
|
1508
|
-
default: true
|
|
1509
|
-
},
|
|
1510
|
-
lang: {
|
|
1511
|
-
type: String,
|
|
1512
|
-
default: "zh-HK"
|
|
1513
|
-
}
|
|
1514
|
-
},
|
|
1515
|
-
data() {
|
|
1516
|
-
return {
|
|
1517
|
-
configData: {},
|
|
1518
|
-
messFold: true,
|
|
1519
|
-
showAddCom: false,
|
|
1520
|
-
temporaryList: []
|
|
1521
|
-
};
|
|
1522
|
-
},
|
|
1523
|
-
computed: {
|
|
1524
|
-
isConfigPage() {
|
|
1525
|
-
return this.$EventBus && this.isOpcacity;
|
|
1526
|
-
},
|
|
1527
|
-
groupConfigForMain() {
|
|
1528
|
-
return {
|
|
1529
|
-
name: "task",
|
|
1530
|
-
pull: true,
|
|
1531
|
-
// A列表的元素可以被拖出
|
|
1532
|
-
put: (to, from, dragEl) => {
|
|
1533
|
-
console.log(from.el.classList);
|
|
1534
|
-
if (from.el.classList.contains("main_drag")) {
|
|
1535
|
-
const dataId = this.findFirstComponentKey(dragEl);
|
|
1536
|
-
const allowedComponents = ["cms-text", "cms-image", "cms-video", "cms-button", "cms-richText", "cms-column"];
|
|
1537
|
-
console.log("allowedComponents", dataId);
|
|
1538
|
-
if (dataId === "cms-column") {
|
|
1539
|
-
if (!this.checkColumnNestingLevel()) {
|
|
1540
|
-
console.log("cms-column 嵌套层级超出限制");
|
|
1541
|
-
return false;
|
|
1542
|
-
}
|
|
1543
|
-
}
|
|
1544
|
-
return allowedComponents.includes(dataId);
|
|
1545
|
-
}
|
|
1546
|
-
return true;
|
|
1547
|
-
}
|
|
1548
|
-
};
|
|
1549
|
-
},
|
|
1550
|
-
// 卡片容器样式
|
|
1551
|
-
cardContainerStyle() {
|
|
1552
|
-
return {
|
|
1553
|
-
backgroundImage: this.configData.backgroundImage ? `url('${this.configData.backgroundImage}')` : "none",
|
|
1554
|
-
backgroundSize: "cover",
|
|
1555
|
-
backgroundRepeat: "no-repeat",
|
|
1556
|
-
backgroundPosition: "center center",
|
|
1557
|
-
height: this.getContainerHeight(),
|
|
1558
|
-
border: this.getContainerBorder(),
|
|
1559
|
-
borderRadius: this.getContainerBorderRadius(),
|
|
1560
|
-
backgroundColor: this.configData.backgroundColor || "transparent",
|
|
1561
|
-
boxShadow: this.configData.boxShadow || "none"
|
|
1562
|
-
};
|
|
1563
|
-
}
|
|
1564
|
-
},
|
|
1565
|
-
mounted() {
|
|
1566
|
-
if (this.$EventBus) {
|
|
1567
|
-
this.$EventBus.$on("handleDragEnd", () => {
|
|
1568
|
-
this.showAddCom = false;
|
|
1569
|
-
});
|
|
1570
|
-
}
|
|
1571
|
-
},
|
|
1572
|
-
watch: {},
|
|
1573
|
-
methods: {
|
|
1574
|
-
findFirstComponentKey(root) {
|
|
1575
|
-
var _root$querySelector;
|
|
1576
|
-
if (!root) return null;
|
|
1577
|
-
|
|
1578
|
-
// 若起点自身就有
|
|
1579
|
-
if (root.nodeType === 1 && root.hasAttribute("component-key")) {
|
|
1580
|
-
return root.getAttribute("component-key");
|
|
1581
|
-
}
|
|
1582
|
-
|
|
1583
|
-
// 向下查找第一个匹配的后代
|
|
1584
|
-
const el = (_root$querySelector = root.querySelector) === null || _root$querySelector === void 0 ? void 0 : _root$querySelector.call(root, "[component-key]");
|
|
1585
|
-
return el ? el.getAttribute("component-key") : null;
|
|
1586
|
-
},
|
|
1587
|
-
// 获取容器高度
|
|
1588
|
-
getContainerHeight() {
|
|
1589
|
-
if (this.configData.heightType === "fixed") {
|
|
1590
|
-
return `${this.configData.fixedHeight}px`;
|
|
1591
|
-
}
|
|
1592
|
-
return this.isOpcacity ? "100%" : "auto";
|
|
1593
|
-
},
|
|
1594
|
-
// 获取容器边框
|
|
1595
|
-
getContainerBorder() {
|
|
1596
|
-
if (this.configData.borderWidth) {
|
|
1597
|
-
return `${this.configData.borderWidth}px ${this.configData.borderStyle} ${this.configData.borderColor}`;
|
|
1598
|
-
}
|
|
1599
|
-
return "none";
|
|
1600
|
-
},
|
|
1601
|
-
// 获取容器圆角
|
|
1602
|
-
getContainerBorderRadius() {
|
|
1603
|
-
if (this.configData.borderRadius) {
|
|
1604
|
-
return `${this.configData.borderRadius}px`;
|
|
1605
|
-
}
|
|
1606
|
-
return "0";
|
|
1607
|
-
},
|
|
1608
|
-
getConfigData(configData) {
|
|
1609
|
-
this.configData = configData;
|
|
1610
|
-
},
|
|
1611
|
-
foldMessText() {
|
|
1612
|
-
this.messFold = !this.messFold;
|
|
1613
|
-
},
|
|
1614
|
-
decodeJumpUrl(url) {
|
|
1615
|
-
if (!url) return;
|
|
1616
|
-
top.location.href = url;
|
|
1617
|
-
},
|
|
1618
|
-
onStart(evt) {
|
|
1619
|
-
console.log("drag start in column-card", evt);
|
|
1620
|
-
this.showAddCom = true;
|
|
1621
|
-
},
|
|
1622
|
-
// 限制拖拽的组件类型
|
|
1623
|
-
onMove(evt) {
|
|
1624
|
-
const {
|
|
1625
|
-
draggedContext
|
|
1626
|
-
} = evt;
|
|
1627
|
-
|
|
1628
|
-
// 允许的组件类型
|
|
1629
|
-
const allowedComponents = ["cms-text", "cms-image", "cms-video", "cms-button", "cms-richText", "cms-column" // 允许拖入 cms-column
|
|
1630
|
-
];
|
|
1631
|
-
|
|
1632
|
-
// 如果是从外部拖入的组件
|
|
1633
|
-
if (draggedContext && draggedContext.element) {
|
|
1634
|
-
const componentType = draggedContext.element.cmsCompName;
|
|
1635
|
-
if (componentType && !allowedComponents.includes(componentType)) {
|
|
1636
|
-
console.log("draggedContext.element", draggedContext.element);
|
|
1637
|
-
console.log(`组件类型 ${componentType} 不允许拖入 column-card`);
|
|
1638
|
-
return false;
|
|
1639
|
-
}
|
|
1640
|
-
|
|
1641
|
-
// 特殊处理 cms-column:检查嵌套层级
|
|
1642
|
-
if (componentType === "cms-column") {
|
|
1643
|
-
if (!this.checkColumnNestingLevel()) {
|
|
1644
|
-
console.log("cms-column 嵌套层级超出限制");
|
|
1645
|
-
return false;
|
|
1646
|
-
}
|
|
1647
|
-
}
|
|
1648
|
-
}
|
|
1649
|
-
return true;
|
|
1650
|
-
},
|
|
1651
|
-
// 检查 cms-column 嵌套层级
|
|
1652
|
-
checkColumnNestingLevel() {
|
|
1653
|
-
// 检查当前 column-card 是否已经在 cms-column 内部
|
|
1654
|
-
let parent = this.$parent;
|
|
1655
|
-
let columnDepth = 0;
|
|
1656
|
-
while (parent) {
|
|
1657
|
-
// 检查父组件是否是 cms-column 或包含 cms-column
|
|
1658
|
-
if (parent.$options.name === "cms-column" || parent.$data && parent.$data.data && parent.$data.data.cmsCompName === "cms-column") {
|
|
1659
|
-
columnDepth++;
|
|
1660
|
-
}
|
|
1661
|
-
|
|
1662
|
-
// 如果已经有一层 cms-column,则不允许再嵌套
|
|
1663
|
-
if (columnDepth >= 2) {
|
|
1664
|
-
console.log(`检测到 cms-column 嵌套层级: ${columnDepth}, 超出限制`);
|
|
1665
|
-
return false;
|
|
1666
|
-
}
|
|
1667
|
-
parent = parent.$parent;
|
|
1668
|
-
}
|
|
1669
|
-
console.log(`cms-column 嵌套层级检查通过: ${columnDepth}`);
|
|
1670
|
-
return true;
|
|
1671
|
-
},
|
|
1672
|
-
// 处理拖拽悬停
|
|
1673
|
-
dragover(e) {
|
|
1674
|
-
e.preventDefault();
|
|
1675
|
-
this.showAddCom = true;
|
|
1676
|
-
},
|
|
1677
|
-
// 处理拖拽放置
|
|
1678
|
-
drop(e) {
|
|
1679
|
-
e.preventDefault();
|
|
1680
|
-
const componentKey = e.dataTransfer.getData("componentKey");
|
|
1681
|
-
let temporaryId = "";
|
|
1682
|
-
this.temporaryList = e.dataTransfer.getData("temporaryList") ? JSON.parse(e.dataTransfer.getData("temporaryList")) : [];
|
|
1683
|
-
console.log("cms-colum-card-drop", componentKey, this.temporaryList);
|
|
1684
|
-
if (!componentKey) return;
|
|
1685
|
-
const isTemporaryItem = e.dataTransfer.getData("isTemporaryItem");
|
|
1686
|
-
const isTemporary = isTemporaryItem === "true";
|
|
1687
|
-
if (isTemporary) {
|
|
1688
|
-
temporaryId = getCopyTemplateCompConfig(this.temporaryList, componentKey).cmsCompName;
|
|
1689
|
-
}
|
|
1690
|
-
const componentType = isTemporary ? temporaryId : componentKey;
|
|
1691
|
-
// 允许的组件类型
|
|
1692
|
-
const allowedComponents = ["cms-text", "cms-image", "cms-video", "cms-button", "cms-richText", "cms-column" // 允许拖入 cms-column
|
|
1693
|
-
];
|
|
1694
|
-
|
|
1695
|
-
// 检查组件类型是否允许
|
|
1696
|
-
if (!allowedComponents.includes(componentType)) {
|
|
1697
|
-
console.log(`组件类型 ${componentType} 不允许拖入 column-card`);
|
|
1698
|
-
this.$message && this.$message.warning(`该组件类型不支持拖入卡片容器`);
|
|
1699
|
-
this.showAddCom = false;
|
|
1700
|
-
return;
|
|
1701
|
-
}
|
|
1702
|
-
|
|
1703
|
-
// 特殊处理 cms-column:检查嵌套层级
|
|
1704
|
-
if (componentType === "cms-column") {
|
|
1705
|
-
if (!this.checkColumnNestingLevel()) {
|
|
1706
|
-
console.log("cms-column 嵌套层级超出限制");
|
|
1707
|
-
this.$message && this.$message.warning(`cms-column 只能嵌套一层`);
|
|
1708
|
-
this.showAddCom = false;
|
|
1709
|
-
return;
|
|
1710
|
-
}
|
|
1711
|
-
}
|
|
1712
|
-
this.addOneComp(e, componentKey);
|
|
1713
|
-
},
|
|
1714
|
-
// 添加组件到卡片容器
|
|
1715
|
-
addOneComp(e, componentKey) {
|
|
1716
|
-
this.showAddCom = false;
|
|
1717
|
-
console.log("drop to column-card", componentKey);
|
|
1718
|
-
|
|
1719
|
-
// 动态导入组件配置
|
|
1720
|
-
let initCompData;
|
|
1721
|
-
try {
|
|
1722
|
-
const isTemporaryItem = e.dataTransfer.getData("isTemporaryItem");
|
|
1723
|
-
if (isTemporaryItem === "true") {
|
|
1724
|
-
initCompData = getCopyTemplateCompConfig(this.temporaryList, componentKey);
|
|
1725
|
-
} else {
|
|
1726
|
-
initCompData = __webpack_require__(1640)(`./${componentKey}`).default.settings(componentKey);
|
|
1727
|
-
}
|
|
1728
|
-
initCompData = {
|
|
1729
|
-
...initCompData,
|
|
1730
|
-
styleConfig: {
|
|
1731
|
-
pc: componentKey == "cms-text" ? [...(0,baseConfig.styleBaseConfig)(16, 16, 0, 0, "px")] : [...(0,baseConfig.styleBaseConfig)(0, 0, 0, 0, "px")],
|
|
1732
|
-
mb: componentKey == "cms-text" ? [...(0,baseConfig.styleBaseConfig)(12, 12, 0, 0, "px")] : [...(0,baseConfig.styleBaseConfig)(0, 0, 0, 0, "px")]
|
|
1733
|
-
}
|
|
1734
|
-
};
|
|
1735
|
-
} catch (error) {
|
|
1736
|
-
console.error(`无法加载组件 ${componentKey}:`, error);
|
|
1737
|
-
this.$message && this.$message.error(`组件加载失败`);
|
|
1738
|
-
return;
|
|
1739
|
-
}
|
|
1740
|
-
const toElementId = e.toElement.id;
|
|
1741
|
-
if (toElementId === `cardTarget${this.data.componentId}` || toElementId.includes("cardTargetdown")) {
|
|
1742
|
-
// 添加到卡片容器末尾
|
|
1743
|
-
this.data.childList.push(initCompData);
|
|
1744
|
-
} else if (toElementId.includes("cardTargetup")) {
|
|
1745
|
-
// 插入到指定位置
|
|
1746
|
-
const underComponentId = toElementId.split("-cardTargetup")[0];
|
|
1747
|
-
const index = this.data.childList.findIndex(item => item.componentId === underComponentId);
|
|
1748
|
-
if (index !== -1) {
|
|
1749
|
-
this.data.childList.splice(index, 0, initCompData);
|
|
1750
|
-
}
|
|
1751
|
-
}
|
|
1752
|
-
|
|
1753
|
-
// 触发数据更新
|
|
1754
|
-
this.$emit("update:data", this.data);
|
|
1755
|
-
if (componentKey === "cms-column") {
|
|
1756
|
-
this.$EventBus.$emit("handleNowComp", initCompData);
|
|
1757
|
-
}
|
|
1758
|
-
}
|
|
1759
|
-
}
|
|
1760
|
-
});
|
|
1761
|
-
;// ./package/cms-column-card/View.vue?vue&type=script&lang=js
|
|
1762
|
-
/* harmony default export */ var cms_column_card_Viewvue_type_script_lang_js = (Viewvue_type_script_lang_js);
|
|
1763
|
-
;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.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
|
|
1764
|
-
// extracted by mini-css-extract-plugin
|
|
1765
|
-
|
|
1766
|
-
;// ./package/cms-column-card/View.vue?vue&type=style&index=0&id=28effaca&prod&lang=scss&scoped=true
|
|
1767
|
-
|
|
1768
|
-
// EXTERNAL MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
|
|
1769
|
-
var componentNormalizer = __webpack_require__(1656);
|
|
1770
|
-
;// ./package/cms-column-card/View.vue
|
|
1771
|
-
|
|
1772
|
-
|
|
1773
|
-
|
|
1774
|
-
;
|
|
1775
|
-
|
|
1776
|
-
|
|
1777
|
-
/* normalize component */
|
|
1778
|
-
|
|
1779
|
-
var component = (0,componentNormalizer/* default */.A)(
|
|
1780
|
-
cms_column_card_Viewvue_type_script_lang_js,
|
|
1781
|
-
render,
|
|
1782
|
-
staticRenderFns,
|
|
1783
|
-
false,
|
|
1784
|
-
null,
|
|
1785
|
-
"28effaca",
|
|
1786
|
-
null
|
|
1787
|
-
|
|
1788
|
-
)
|
|
1789
|
-
|
|
1790
|
-
/* harmony default export */ var View = (component.exports);
|
|
1791
|
-
|
|
1792
1285
|
/***/ }),
|
|
1793
1286
|
|
|
1794
1287
|
/***/ 492:
|
|
@@ -10061,13 +9554,13 @@ var map = {
|
|
|
10061
9554
|
"./cms-column": 3923,
|
|
10062
9555
|
"./cms-column-card": 5340,
|
|
10063
9556
|
"./cms-column-card/": 5340,
|
|
10064
|
-
"./cms-column-card/View":
|
|
10065
|
-
"./cms-column-card/View.vue":
|
|
9557
|
+
"./cms-column-card/View": 2328,
|
|
9558
|
+
"./cms-column-card/View.vue": 2328,
|
|
10066
9559
|
"./cms-column-card/index": 5340,
|
|
10067
9560
|
"./cms-column-card/index.js": 5340,
|
|
10068
9561
|
"./cms-column/": 3923,
|
|
10069
|
-
"./cms-column/View":
|
|
10070
|
-
"./cms-column/View.vue":
|
|
9562
|
+
"./cms-column/View": 2802,
|
|
9563
|
+
"./cms-column/View.vue": 2802,
|
|
10071
9564
|
"./cms-column/index": 3923,
|
|
10072
9565
|
"./cms-column/index.js": 3923,
|
|
10073
9566
|
"./cms-description": 1921,
|
|
@@ -10216,8 +9709,8 @@ var map = {
|
|
|
10216
9709
|
"./cms-video-group/index": 622,
|
|
10217
9710
|
"./cms-video-group/index.js": 622,
|
|
10218
9711
|
"./cms-video/": 23,
|
|
10219
|
-
"./cms-video/View":
|
|
10220
|
-
"./cms-video/View.vue":
|
|
9712
|
+
"./cms-video/View": 8573,
|
|
9713
|
+
"./cms-video/View.vue": 8573,
|
|
10221
9714
|
"./cms-video/index": 23,
|
|
10222
9715
|
"./cms-video/index.js": 23,
|
|
10223
9716
|
"./cms-view": 2392,
|
|
@@ -11271,384 +10764,6 @@ function getDevice() {
|
|
|
11271
10764
|
|
|
11272
10765
|
/***/ }),
|
|
11273
10766
|
|
|
11274
|
-
/***/ 2048:
|
|
11275
|
-
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
11276
|
-
|
|
11277
|
-
"use strict";
|
|
11278
|
-
// ESM COMPAT FLAG
|
|
11279
|
-
__webpack_require__.r(__webpack_exports__);
|
|
11280
|
-
|
|
11281
|
-
// EXPORTS
|
|
11282
|
-
__webpack_require__.d(__webpack_exports__, {
|
|
11283
|
-
"default": function() { return /* binding */ View; }
|
|
11284
|
-
});
|
|
11285
|
-
|
|
11286
|
-
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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
|
|
11287
|
-
var render = function render() {
|
|
11288
|
-
var _vm = this,
|
|
11289
|
-
_c = _vm._self._c;
|
|
11290
|
-
return _c('BaseComp', _vm._b({
|
|
11291
|
-
attrs: {
|
|
11292
|
-
"data": _vm.data,
|
|
11293
|
-
"nowCompId": _vm.nowCompId,
|
|
11294
|
-
"isOpcacity": _vm.isOpcacity,
|
|
11295
|
-
"isMask": false,
|
|
11296
|
-
"lang": _vm.lang
|
|
11297
|
-
},
|
|
11298
|
-
on: {
|
|
11299
|
-
"getConfigData": _vm.getConfigData
|
|
11300
|
-
}
|
|
11301
|
-
}, 'BaseComp', _vm.$attrs, false), [_c('section', {
|
|
11302
|
-
staticClass: "cms-video-container",
|
|
11303
|
-
class: [_vm.configData.customClass || ''],
|
|
11304
|
-
style: _vm.containerStyle
|
|
11305
|
-
}, [_c('div', {
|
|
11306
|
-
staticClass: "f-c-c"
|
|
11307
|
-
}, [_vm._v(_vm._s(_vm.configData.title))]), _c('div', {
|
|
11308
|
-
staticClass: "video-wrapper",
|
|
11309
|
-
style: _vm.wrapperStyle
|
|
11310
|
-
}, [_vm.videoType === 'direct' && _vm.configData.videoUrl ? _c('video', {
|
|
11311
|
-
staticClass: "cms-video direct-video",
|
|
11312
|
-
style: _vm.videoStyle,
|
|
11313
|
-
attrs: {
|
|
11314
|
-
"src": _vm.configData.videoUrl,
|
|
11315
|
-
"controls": _vm.configData.showControls,
|
|
11316
|
-
"autoplay": _vm.configData.autoplay,
|
|
11317
|
-
"loop": _vm.configData.loop,
|
|
11318
|
-
"poster": _vm.configData.posterUrl
|
|
11319
|
-
},
|
|
11320
|
-
domProps: {
|
|
11321
|
-
"muted": _vm.configData.muted
|
|
11322
|
-
},
|
|
11323
|
-
on: {
|
|
11324
|
-
"loadstart": _vm.onVideoLoadStart,
|
|
11325
|
-
"loadeddata": _vm.onVideoLoaded,
|
|
11326
|
-
"error": _vm.onVideoError
|
|
11327
|
-
}
|
|
11328
|
-
}) : _vm.configData.embedCode ? _c('div', {
|
|
11329
|
-
staticClass: "cms-video embed-video",
|
|
11330
|
-
style: _vm.videoStyle,
|
|
11331
|
-
domProps: {
|
|
11332
|
-
"innerHTML": _vm._s(_vm.configData.embedCode)
|
|
11333
|
-
}
|
|
11334
|
-
}) : _c('div', {
|
|
11335
|
-
staticClass: "video-placeholder",
|
|
11336
|
-
style: _vm.placeholderStyle
|
|
11337
|
-
}, [_c('img', {
|
|
11338
|
-
staticStyle: {
|
|
11339
|
-
"width": "97.82px",
|
|
11340
|
-
"height": "97.82px"
|
|
11341
|
-
},
|
|
11342
|
-
attrs: {
|
|
11343
|
-
"src": __webpack_require__(6148),
|
|
11344
|
-
"alt": "Video Camera"
|
|
11345
|
-
}
|
|
11346
|
-
})])])])]);
|
|
11347
|
-
};
|
|
11348
|
-
var staticRenderFns = [];
|
|
11349
|
-
|
|
11350
|
-
;// ./package/cms-video/View.vue?vue&type=template&id=787ca866&scoped=true
|
|
11351
|
-
|
|
11352
|
-
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.constructor.js
|
|
11353
|
-
var es_iterator_constructor = __webpack_require__(8111);
|
|
11354
|
-
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.for-each.js
|
|
11355
|
-
var es_iterator_for_each = __webpack_require__(7588);
|
|
11356
|
-
// EXTERNAL MODULE: ./package/baseComp.vue + 5 modules
|
|
11357
|
-
var baseComp = __webpack_require__(5298);
|
|
11358
|
-
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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
|
|
11359
|
-
|
|
11360
|
-
|
|
11361
|
-
|
|
11362
|
-
|
|
11363
|
-
|
|
11364
|
-
/* harmony default export */ var Viewvue_type_script_lang_js = ({
|
|
11365
|
-
name: "cms-video",
|
|
11366
|
-
components: {
|
|
11367
|
-
BaseComp: baseComp["default"]
|
|
11368
|
-
},
|
|
11369
|
-
props: {
|
|
11370
|
-
data: {
|
|
11371
|
-
type: Object,
|
|
11372
|
-
default: () => {
|
|
11373
|
-
return {};
|
|
11374
|
-
}
|
|
11375
|
-
},
|
|
11376
|
-
nowCompId: {
|
|
11377
|
-
type: [String, Number],
|
|
11378
|
-
default: ""
|
|
11379
|
-
},
|
|
11380
|
-
isOpcacity: {
|
|
11381
|
-
type: Boolean,
|
|
11382
|
-
default: true
|
|
11383
|
-
},
|
|
11384
|
-
lang: {
|
|
11385
|
-
type: String,
|
|
11386
|
-
default: "zh-HK"
|
|
11387
|
-
}
|
|
11388
|
-
},
|
|
11389
|
-
data() {
|
|
11390
|
-
return {
|
|
11391
|
-
configData: {},
|
|
11392
|
-
videoLoaded: false,
|
|
11393
|
-
videoError: false,
|
|
11394
|
-
// 默认配置数据
|
|
11395
|
-
defaultConfig: {
|
|
11396
|
-
// 视频源设置
|
|
11397
|
-
videoType: "direct",
|
|
11398
|
-
videoUrl: "",
|
|
11399
|
-
embedCode: "",
|
|
11400
|
-
posterUrl: "",
|
|
11401
|
-
// 播放控制
|
|
11402
|
-
showControls: true,
|
|
11403
|
-
autoplay: false,
|
|
11404
|
-
loop: false,
|
|
11405
|
-
muted: false,
|
|
11406
|
-
// 尺寸控制
|
|
11407
|
-
widthType: "auto",
|
|
11408
|
-
widthValue: 100,
|
|
11409
|
-
heightType: "auto",
|
|
11410
|
-
heightValue: 100,
|
|
11411
|
-
aspectRatio: "16:9",
|
|
11412
|
-
customAspectRatio: "16:9",
|
|
11413
|
-
maxWidth: 0,
|
|
11414
|
-
maxHeight: 0,
|
|
11415
|
-
// 样式设置
|
|
11416
|
-
borderRadius: 0,
|
|
11417
|
-
// 高级配置
|
|
11418
|
-
customClass: "",
|
|
11419
|
-
customStyle: ""
|
|
11420
|
-
}
|
|
11421
|
-
};
|
|
11422
|
-
},
|
|
11423
|
-
mounted() {
|
|
11424
|
-
this.initConfigData();
|
|
11425
|
-
},
|
|
11426
|
-
watch: {
|
|
11427
|
-
configData: {
|
|
11428
|
-
handler() {
|
|
11429
|
-
this.updateStyles();
|
|
11430
|
-
},
|
|
11431
|
-
deep: true
|
|
11432
|
-
}
|
|
11433
|
-
},
|
|
11434
|
-
computed: {
|
|
11435
|
-
// 视频类型
|
|
11436
|
-
videoType() {
|
|
11437
|
-
return this.configData.videoType || this.defaultConfig.videoType;
|
|
11438
|
-
},
|
|
11439
|
-
// 实际使用的宽高比
|
|
11440
|
-
actualAspectRatio() {
|
|
11441
|
-
const config = {
|
|
11442
|
-
...this.defaultConfig,
|
|
11443
|
-
...this.configData
|
|
11444
|
-
};
|
|
11445
|
-
if (config.aspectRatio === "custom") {
|
|
11446
|
-
return config.customAspectRatio || "16:9";
|
|
11447
|
-
}
|
|
11448
|
-
return config.aspectRatio;
|
|
11449
|
-
},
|
|
11450
|
-
// 容器样式
|
|
11451
|
-
containerStyle() {
|
|
11452
|
-
const config = {
|
|
11453
|
-
...this.defaultConfig,
|
|
11454
|
-
...this.configData
|
|
11455
|
-
};
|
|
11456
|
-
return {
|
|
11457
|
-
...this.parseCustomStyle(config.customStyle)
|
|
11458
|
-
};
|
|
11459
|
-
},
|
|
11460
|
-
// 包装器样式
|
|
11461
|
-
wrapperStyle() {
|
|
11462
|
-
const config = {
|
|
11463
|
-
...this.defaultConfig,
|
|
11464
|
-
...this.configData
|
|
11465
|
-
};
|
|
11466
|
-
let width = "auto";
|
|
11467
|
-
let height = "auto";
|
|
11468
|
-
|
|
11469
|
-
// 宽度设置
|
|
11470
|
-
if (config.widthType === "fixed") {
|
|
11471
|
-
width = `${config.widthValue}px`;
|
|
11472
|
-
} else if (config.widthType === "percent") {
|
|
11473
|
-
width = `${config.widthValue}%`;
|
|
11474
|
-
}
|
|
11475
|
-
|
|
11476
|
-
// 高度设置
|
|
11477
|
-
if (config.heightType === "fixed") {
|
|
11478
|
-
height = `${config.heightValue}px`;
|
|
11479
|
-
} else if (config.heightType === "percent") {
|
|
11480
|
-
height = `${config.heightValue}%`;
|
|
11481
|
-
} else if (config.heightType === "aspect") {
|
|
11482
|
-
// 根据宽高比计算高度
|
|
11483
|
-
height = "auto";
|
|
11484
|
-
}
|
|
11485
|
-
return {
|
|
11486
|
-
width,
|
|
11487
|
-
height,
|
|
11488
|
-
maxWidth: config.maxWidth > 0 ? `${config.maxWidth}px` : "none",
|
|
11489
|
-
maxHeight: config.maxHeight > 0 ? `${config.maxHeight}px` : "none",
|
|
11490
|
-
borderRadius: `${config.borderRadius}px`,
|
|
11491
|
-
overflow: "hidden",
|
|
11492
|
-
display: "block",
|
|
11493
|
-
position: "relative"
|
|
11494
|
-
};
|
|
11495
|
-
},
|
|
11496
|
-
// 视频样式
|
|
11497
|
-
videoStyle() {
|
|
11498
|
-
const config = {
|
|
11499
|
-
...this.defaultConfig,
|
|
11500
|
-
...this.configData
|
|
11501
|
-
};
|
|
11502
|
-
let style = {
|
|
11503
|
-
width: "100%",
|
|
11504
|
-
height: "100%",
|
|
11505
|
-
display: "block",
|
|
11506
|
-
border: "none",
|
|
11507
|
-
outline: "none"
|
|
11508
|
-
};
|
|
11509
|
-
|
|
11510
|
-
// 如果是宽高比模式,设置aspect-ratio
|
|
11511
|
-
if (config.heightType === "aspect") {
|
|
11512
|
-
style.aspectRatio = this.actualAspectRatio.replace(":", "/");
|
|
11513
|
-
}
|
|
11514
|
-
return style;
|
|
11515
|
-
},
|
|
11516
|
-
// 占位符样式
|
|
11517
|
-
placeholderStyle() {
|
|
11518
|
-
const config = {
|
|
11519
|
-
...this.defaultConfig,
|
|
11520
|
-
...this.configData
|
|
11521
|
-
};
|
|
11522
|
-
let width = "100%";
|
|
11523
|
-
let height = "auto";
|
|
11524
|
-
|
|
11525
|
-
// 如果设置了固定尺寸,使用设置的尺寸
|
|
11526
|
-
if (config.widthType === "fixed") {
|
|
11527
|
-
width = `${config.widthValue}px`;
|
|
11528
|
-
} else if (config.widthType === "percent") {
|
|
11529
|
-
width = `${config.widthValue}%`;
|
|
11530
|
-
}
|
|
11531
|
-
if (config.heightType === "fixed") {
|
|
11532
|
-
height = `${config.heightValue}px`;
|
|
11533
|
-
} else if (config.heightType === "aspect") {
|
|
11534
|
-
// 使用aspect-ratio保持16:9比例
|
|
11535
|
-
height = "auto";
|
|
11536
|
-
} else {
|
|
11537
|
-
// 默认使用16:9比例
|
|
11538
|
-
height = "auto";
|
|
11539
|
-
}
|
|
11540
|
-
const style = {
|
|
11541
|
-
width,
|
|
11542
|
-
height,
|
|
11543
|
-
backgroundColor: "#f5f7fa",
|
|
11544
|
-
border: "1px dashed #dcdfe6",
|
|
11545
|
-
borderRadius: `${config.borderRadius}px`,
|
|
11546
|
-
display: "flex",
|
|
11547
|
-
flexDirection: "column",
|
|
11548
|
-
alignItems: "center",
|
|
11549
|
-
justifyContent: "center",
|
|
11550
|
-
color: "#909399",
|
|
11551
|
-
fontSize: "14px"
|
|
11552
|
-
};
|
|
11553
|
-
|
|
11554
|
-
// 如果不是固定高度,使用aspect-ratio保持16:9比例
|
|
11555
|
-
if (config.heightType !== "fixed") {
|
|
11556
|
-
style.aspectRatio = this.actualAspectRatio.replace(":", "/");
|
|
11557
|
-
}
|
|
11558
|
-
return style;
|
|
11559
|
-
}
|
|
11560
|
-
},
|
|
11561
|
-
methods: {
|
|
11562
|
-
// 初始化配置数据
|
|
11563
|
-
initConfigData() {
|
|
11564
|
-
this.configData = {
|
|
11565
|
-
...this.defaultConfig,
|
|
11566
|
-
...this.configData
|
|
11567
|
-
};
|
|
11568
|
-
},
|
|
11569
|
-
// 获取配置数据
|
|
11570
|
-
getConfigData(configData) {
|
|
11571
|
-
this.configData = {
|
|
11572
|
-
...this.defaultConfig,
|
|
11573
|
-
...configData
|
|
11574
|
-
};
|
|
11575
|
-
this.updateStyles();
|
|
11576
|
-
},
|
|
11577
|
-
// 更新样式
|
|
11578
|
-
updateStyles() {
|
|
11579
|
-
this.$nextTick(() => {
|
|
11580
|
-
this.$forceUpdate();
|
|
11581
|
-
});
|
|
11582
|
-
},
|
|
11583
|
-
// 视频开始加载
|
|
11584
|
-
onVideoLoadStart() {
|
|
11585
|
-
this.videoLoaded = false;
|
|
11586
|
-
this.videoError = false;
|
|
11587
|
-
},
|
|
11588
|
-
// 视频加载完成
|
|
11589
|
-
onVideoLoaded() {
|
|
11590
|
-
this.videoLoaded = true;
|
|
11591
|
-
this.videoError = false;
|
|
11592
|
-
},
|
|
11593
|
-
// 视频加载失败
|
|
11594
|
-
onVideoError() {
|
|
11595
|
-
this.videoLoaded = false;
|
|
11596
|
-
this.videoError = true;
|
|
11597
|
-
},
|
|
11598
|
-
// 解析自定义样式
|
|
11599
|
-
parseCustomStyle(customStyle) {
|
|
11600
|
-
if (!customStyle) return {};
|
|
11601
|
-
try {
|
|
11602
|
-
const styles = {};
|
|
11603
|
-
const declarations = customStyle.split(";");
|
|
11604
|
-
declarations.forEach(declaration => {
|
|
11605
|
-
const [property, value] = declaration.split(":");
|
|
11606
|
-
if (property && value) {
|
|
11607
|
-
const camelCaseProperty = property.trim().replace(/-([a-z])/g, g => g[1].toUpperCase());
|
|
11608
|
-
styles[camelCaseProperty] = value.trim();
|
|
11609
|
-
}
|
|
11610
|
-
});
|
|
11611
|
-
return styles;
|
|
11612
|
-
} catch (error) {
|
|
11613
|
-
console.warn("解析自定义样式失败:", error);
|
|
11614
|
-
return {};
|
|
11615
|
-
}
|
|
11616
|
-
}
|
|
11617
|
-
}
|
|
11618
|
-
});
|
|
11619
|
-
;// ./package/cms-video/View.vue?vue&type=script&lang=js
|
|
11620
|
-
/* harmony default export */ var cms_video_Viewvue_type_script_lang_js = (Viewvue_type_script_lang_js);
|
|
11621
|
-
;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.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
|
|
11622
|
-
// extracted by mini-css-extract-plugin
|
|
11623
|
-
|
|
11624
|
-
;// ./package/cms-video/View.vue?vue&type=style&index=0&id=787ca866&prod&lang=scss&scoped=true
|
|
11625
|
-
|
|
11626
|
-
// EXTERNAL MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
|
|
11627
|
-
var componentNormalizer = __webpack_require__(1656);
|
|
11628
|
-
;// ./package/cms-video/View.vue
|
|
11629
|
-
|
|
11630
|
-
|
|
11631
|
-
|
|
11632
|
-
;
|
|
11633
|
-
|
|
11634
|
-
|
|
11635
|
-
/* normalize component */
|
|
11636
|
-
|
|
11637
|
-
var component = (0,componentNormalizer/* default */.A)(
|
|
11638
|
-
cms_video_Viewvue_type_script_lang_js,
|
|
11639
|
-
render,
|
|
11640
|
-
staticRenderFns,
|
|
11641
|
-
false,
|
|
11642
|
-
null,
|
|
11643
|
-
"787ca866",
|
|
11644
|
-
null
|
|
11645
|
-
|
|
11646
|
-
)
|
|
11647
|
-
|
|
11648
|
-
/* harmony default export */ var View = (component.exports);
|
|
11649
|
-
|
|
11650
|
-
/***/ }),
|
|
11651
|
-
|
|
11652
10767
|
/***/ 2071:
|
|
11653
10768
|
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
|
|
11654
10769
|
|
|
@@ -12555,6 +11670,524 @@ const validateSchema = (0,_baseConfig__WEBPACK_IMPORTED_MODULE_0__.getValidateSc
|
|
|
12555
11670
|
|
|
12556
11671
|
/***/ }),
|
|
12557
11672
|
|
|
11673
|
+
/***/ 2328:
|
|
11674
|
+
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
11675
|
+
|
|
11676
|
+
"use strict";
|
|
11677
|
+
// ESM COMPAT FLAG
|
|
11678
|
+
__webpack_require__.r(__webpack_exports__);
|
|
11679
|
+
|
|
11680
|
+
// EXPORTS
|
|
11681
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
11682
|
+
"default": function() { return /* binding */ View; }
|
|
11683
|
+
});
|
|
11684
|
+
|
|
11685
|
+
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.constructor.js
|
|
11686
|
+
var es_iterator_constructor = __webpack_require__(8111);
|
|
11687
|
+
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.drop.js
|
|
11688
|
+
var es_iterator_drop = __webpack_require__(9314);
|
|
11689
|
+
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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
|
|
11690
|
+
|
|
11691
|
+
|
|
11692
|
+
|
|
11693
|
+
|
|
11694
|
+
var render = function render() {
|
|
11695
|
+
var _vm = this,
|
|
11696
|
+
_c = _vm._self._c;
|
|
11697
|
+
return _c('BaseComp', _vm._b({
|
|
11698
|
+
attrs: {
|
|
11699
|
+
"data": _vm.data,
|
|
11700
|
+
"nowCompId": _vm.nowCompId,
|
|
11701
|
+
"isOpcacity": _vm.isOpcacity,
|
|
11702
|
+
"isMask": false,
|
|
11703
|
+
"lang": _vm.lang,
|
|
11704
|
+
"showDel": false
|
|
11705
|
+
},
|
|
11706
|
+
on: {
|
|
11707
|
+
"getConfigData": _vm.getConfigData
|
|
11708
|
+
}
|
|
11709
|
+
}, 'BaseComp', _vm.$attrs, false), [_vm.isConfigPage ? _c('div', {
|
|
11710
|
+
staticClass: "main_drag hoverBorderClass",
|
|
11711
|
+
style: _vm.cardContainerStyle,
|
|
11712
|
+
attrs: {
|
|
11713
|
+
"id": `cardTarget${_vm.data.componentId}`
|
|
11714
|
+
},
|
|
11715
|
+
on: {
|
|
11716
|
+
"dragover": _vm.dragover,
|
|
11717
|
+
"dragend": function ($event) {
|
|
11718
|
+
_vm.showAddCom = false;
|
|
11719
|
+
},
|
|
11720
|
+
"drop": _vm.drop
|
|
11721
|
+
}
|
|
11722
|
+
}, [_c('Draggable', {
|
|
11723
|
+
staticStyle: {
|
|
11724
|
+
"position": "relative"
|
|
11725
|
+
},
|
|
11726
|
+
attrs: {
|
|
11727
|
+
"group": _vm.groupConfigForMain,
|
|
11728
|
+
"chosen-class": "chosen",
|
|
11729
|
+
"force-fallback": "true",
|
|
11730
|
+
"animation": "1000",
|
|
11731
|
+
"move": _vm.onMove
|
|
11732
|
+
},
|
|
11733
|
+
on: {
|
|
11734
|
+
"start": _vm.onStart,
|
|
11735
|
+
"end": function ($event) {
|
|
11736
|
+
_vm.showAddCom = false;
|
|
11737
|
+
}
|
|
11738
|
+
},
|
|
11739
|
+
model: {
|
|
11740
|
+
value: _vm.data.childList,
|
|
11741
|
+
callback: function ($$v) {
|
|
11742
|
+
_vm.$set(_vm.data, "childList", $$v);
|
|
11743
|
+
},
|
|
11744
|
+
expression: "data.childList"
|
|
11745
|
+
}
|
|
11746
|
+
}, [_vm._l(_vm.data.childList, function (item, index) {
|
|
11747
|
+
return _c('div', {
|
|
11748
|
+
key: item.componentId,
|
|
11749
|
+
staticStyle: {
|
|
11750
|
+
"position": "relative"
|
|
11751
|
+
}
|
|
11752
|
+
}, [_vm.showAddCom ? _c('div', {
|
|
11753
|
+
staticClass: "up_insert",
|
|
11754
|
+
attrs: {
|
|
11755
|
+
"id": `${item.componentId}-cardTargetup`
|
|
11756
|
+
}
|
|
11757
|
+
}, [_c('i', {
|
|
11758
|
+
staticClass: "icon-up",
|
|
11759
|
+
attrs: {
|
|
11760
|
+
"id": `${item.componentId}-upi`
|
|
11761
|
+
}
|
|
11762
|
+
}), _c('span', {
|
|
11763
|
+
attrs: {
|
|
11764
|
+
"id": `${item.componentId}-upspan`
|
|
11765
|
+
}
|
|
11766
|
+
}, [_vm._v("插入组件")])]) : _vm._e(), _c(item.cmsCompName, {
|
|
11767
|
+
tag: "component",
|
|
11768
|
+
style: {
|
|
11769
|
+
marginTop: _vm.showAddCom && index == 0 ? '20px' : '0px'
|
|
11770
|
+
},
|
|
11771
|
+
attrs: {
|
|
11772
|
+
"data": item,
|
|
11773
|
+
"lang": _vm.lang,
|
|
11774
|
+
"isOpcacity": _vm.isOpcacity,
|
|
11775
|
+
"nowCompId": _vm.nowCompId
|
|
11776
|
+
}
|
|
11777
|
+
})], 1);
|
|
11778
|
+
}), _vm.showAddCom ? _c('div', {
|
|
11779
|
+
staticClass: "up_insert insert_bottom",
|
|
11780
|
+
style: {
|
|
11781
|
+
bottom: _vm.data.childList.length ? '0px' : '-24px'
|
|
11782
|
+
},
|
|
11783
|
+
attrs: {
|
|
11784
|
+
"id": `-cardTargetdown`
|
|
11785
|
+
}
|
|
11786
|
+
}, [_c('i', {
|
|
11787
|
+
staticClass: "icon-up"
|
|
11788
|
+
}), _c('span', [_vm._v("插入组件")])]) : _vm._e()], 2)], 1) : _c('cms-view', _vm._b({
|
|
11789
|
+
style: _vm.cardContainerStyle,
|
|
11790
|
+
attrs: {
|
|
11791
|
+
"data": _vm.data.childList,
|
|
11792
|
+
"lang": _vm.lang,
|
|
11793
|
+
"isOpcacity": false
|
|
11794
|
+
}
|
|
11795
|
+
}, 'cms-view', _vm.$attrs, false))], 1);
|
|
11796
|
+
};
|
|
11797
|
+
var staticRenderFns = [];
|
|
11798
|
+
|
|
11799
|
+
;// ./package/cms-column-card/View.vue?vue&type=template&id=2dcb9de2&scoped=true
|
|
11800
|
+
|
|
11801
|
+
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
|
|
11802
|
+
var es_array_push = __webpack_require__(4114);
|
|
11803
|
+
// EXTERNAL MODULE: ./package/baseComp.vue + 5 modules
|
|
11804
|
+
var baseComp = __webpack_require__(5298);
|
|
11805
|
+
// EXTERNAL MODULE: ./node_modules/vuedraggable/dist/vuedraggable.umd.js
|
|
11806
|
+
var vuedraggable_umd = __webpack_require__(1527);
|
|
11807
|
+
var vuedraggable_umd_default = /*#__PURE__*/__webpack_require__.n(vuedraggable_umd);
|
|
11808
|
+
// EXTERNAL MODULE: ./package/baseConfig.js
|
|
11809
|
+
var baseConfig = __webpack_require__(649);
|
|
11810
|
+
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.find.js
|
|
11811
|
+
var es_iterator_find = __webpack_require__(116);
|
|
11812
|
+
// EXTERNAL MODULE: ./src/utils/index.js
|
|
11813
|
+
var utils = __webpack_require__(1996);
|
|
11814
|
+
;// ./src/views/standard_page.js
|
|
11815
|
+
|
|
11816
|
+
|
|
11817
|
+
|
|
11818
|
+
|
|
11819
|
+
|
|
11820
|
+
const standard_page_list = [{
|
|
11821
|
+
id: 1,
|
|
11822
|
+
componentId: 1,
|
|
11823
|
+
componentName: "范本1-防诈骗提示",
|
|
11824
|
+
standList: ["cms-banner", "cms-titleCenter", "cms-lineThree"]
|
|
11825
|
+
}, {
|
|
11826
|
+
id: 2,
|
|
11827
|
+
componentId: 2,
|
|
11828
|
+
componentName: "范本2-员工优惠",
|
|
11829
|
+
standList: ["cms-banner", "cms-description", "cms-activityCountdown", "cms-titleLeft", "cms-proCard", "cms-termsAndConditions"]
|
|
11830
|
+
}];
|
|
11831
|
+
const getComponentKey = (compList, id, noCompId = false) => {
|
|
11832
|
+
if (noCompId) return id;
|
|
11833
|
+
let compConfig = compList.find(item => item.id == id);
|
|
11834
|
+
if (compConfig.type == "1") {
|
|
11835
|
+
return compConfig.componentId;
|
|
11836
|
+
}
|
|
11837
|
+
return "cms-dynamic-comp";
|
|
11838
|
+
};
|
|
11839
|
+
const getCopyTemplateCompConfig = (compList, componentKey) => {
|
|
11840
|
+
let otherConfig = {};
|
|
11841
|
+
const configureJson = compList.find(item => item.id == componentKey).configureJson;
|
|
11842
|
+
if (configureJson.wujieConfig) {
|
|
11843
|
+
//如果是第三方组件加一个临时标识
|
|
11844
|
+
otherConfig = {
|
|
11845
|
+
originalComponentId: configureJson.componentId,
|
|
11846
|
+
originalVersionId: configureJson.wujieConfig.versionId,
|
|
11847
|
+
operation: "copyTemplate"
|
|
11848
|
+
};
|
|
11849
|
+
}
|
|
11850
|
+
return {
|
|
11851
|
+
...configureJson,
|
|
11852
|
+
componentId: (0,utils/* getUuidCode */.J0)(32),
|
|
11853
|
+
...otherConfig
|
|
11854
|
+
};
|
|
11855
|
+
};
|
|
11856
|
+
const isStaticComp = componentKey => {
|
|
11857
|
+
return ["cms-header", "cms-footer", "cms-breadCrumb"].includes(componentKey);
|
|
11858
|
+
};
|
|
11859
|
+
const getWujieCompInfo = (compList, componentId, isTemplate) => {
|
|
11860
|
+
let compConfig = compList.find(item => item.id == componentId);
|
|
11861
|
+
if (isTemplate) if (compConfig.type == "1") {
|
|
11862
|
+
return compConfig;
|
|
11863
|
+
}
|
|
11864
|
+
return {
|
|
11865
|
+
...compConfig
|
|
11866
|
+
};
|
|
11867
|
+
};
|
|
11868
|
+
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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
|
|
11869
|
+
|
|
11870
|
+
|
|
11871
|
+
|
|
11872
|
+
|
|
11873
|
+
|
|
11874
|
+
|
|
11875
|
+
/* harmony default export */ var Viewvue_type_script_lang_js = ({
|
|
11876
|
+
name: "cms-column-card",
|
|
11877
|
+
components: {
|
|
11878
|
+
BaseComp: baseComp["default"],
|
|
11879
|
+
Draggable: (vuedraggable_umd_default())
|
|
11880
|
+
},
|
|
11881
|
+
props: {
|
|
11882
|
+
data: {
|
|
11883
|
+
type: Object,
|
|
11884
|
+
default: () => {
|
|
11885
|
+
return {};
|
|
11886
|
+
}
|
|
11887
|
+
},
|
|
11888
|
+
nowCompId: {
|
|
11889
|
+
type: [String, Number],
|
|
11890
|
+
default: ""
|
|
11891
|
+
},
|
|
11892
|
+
isOpcacity: {
|
|
11893
|
+
type: Boolean,
|
|
11894
|
+
default: true
|
|
11895
|
+
},
|
|
11896
|
+
lang: {
|
|
11897
|
+
type: String,
|
|
11898
|
+
default: "zh-HK"
|
|
11899
|
+
},
|
|
11900
|
+
isMobile: {
|
|
11901
|
+
type: Boolean,
|
|
11902
|
+
default: false
|
|
11903
|
+
},
|
|
11904
|
+
mobileLayout: {
|
|
11905
|
+
type: String,
|
|
11906
|
+
default: ""
|
|
11907
|
+
}
|
|
11908
|
+
},
|
|
11909
|
+
data() {
|
|
11910
|
+
return {
|
|
11911
|
+
configData: {},
|
|
11912
|
+
messFold: true,
|
|
11913
|
+
showAddCom: false,
|
|
11914
|
+
temporaryList: []
|
|
11915
|
+
};
|
|
11916
|
+
},
|
|
11917
|
+
computed: {
|
|
11918
|
+
isConfigPage() {
|
|
11919
|
+
return this.$EventBus && this.isOpcacity;
|
|
11920
|
+
},
|
|
11921
|
+
groupConfigForMain() {
|
|
11922
|
+
return {
|
|
11923
|
+
name: "task",
|
|
11924
|
+
pull: true,
|
|
11925
|
+
// A列表的元素可以被拖出
|
|
11926
|
+
put: (to, from, dragEl) => {
|
|
11927
|
+
console.log(from.el.classList);
|
|
11928
|
+
if (from.el.classList.contains("main_drag")) {
|
|
11929
|
+
const dataId = this.findFirstComponentKey(dragEl);
|
|
11930
|
+
const allowedComponents = ["cms-text", "cms-image", "cms-video", "cms-button", "cms-richText", "cms-column"];
|
|
11931
|
+
console.log("allowedComponents", dataId);
|
|
11932
|
+
if (dataId === "cms-column") {
|
|
11933
|
+
if (!this.checkColumnNestingLevel()) {
|
|
11934
|
+
console.log("cms-column 嵌套层级超出限制");
|
|
11935
|
+
return false;
|
|
11936
|
+
}
|
|
11937
|
+
}
|
|
11938
|
+
return allowedComponents.includes(dataId);
|
|
11939
|
+
}
|
|
11940
|
+
return true;
|
|
11941
|
+
}
|
|
11942
|
+
};
|
|
11943
|
+
},
|
|
11944
|
+
// 卡片容器样式
|
|
11945
|
+
cardContainerStyle() {
|
|
11946
|
+
return {
|
|
11947
|
+
backgroundImage: this.configData.backgroundImage ? `url('${this.configData.backgroundImage}')` : "none",
|
|
11948
|
+
backgroundSize: "cover",
|
|
11949
|
+
backgroundRepeat: "no-repeat",
|
|
11950
|
+
backgroundPosition: "center center",
|
|
11951
|
+
height: this.getContainerHeight(),
|
|
11952
|
+
border: this.getContainerBorder(),
|
|
11953
|
+
borderRadius: this.getContainerBorderRadius(),
|
|
11954
|
+
backgroundColor: this.configData.backgroundColor || "transparent",
|
|
11955
|
+
boxShadow: this.configData.boxShadow || "none"
|
|
11956
|
+
};
|
|
11957
|
+
}
|
|
11958
|
+
},
|
|
11959
|
+
mounted() {
|
|
11960
|
+
if (this.$EventBus) {
|
|
11961
|
+
this.$EventBus.$on("handleDragEnd", () => {
|
|
11962
|
+
this.showAddCom = false;
|
|
11963
|
+
});
|
|
11964
|
+
}
|
|
11965
|
+
},
|
|
11966
|
+
watch: {},
|
|
11967
|
+
methods: {
|
|
11968
|
+
findFirstComponentKey(root) {
|
|
11969
|
+
var _root$querySelector;
|
|
11970
|
+
if (!root) return null;
|
|
11971
|
+
|
|
11972
|
+
// 若起点自身就有
|
|
11973
|
+
if (root.nodeType === 1 && root.hasAttribute("component-key")) {
|
|
11974
|
+
return root.getAttribute("component-key");
|
|
11975
|
+
}
|
|
11976
|
+
|
|
11977
|
+
// 向下查找第一个匹配的后代
|
|
11978
|
+
const el = (_root$querySelector = root.querySelector) === null || _root$querySelector === void 0 ? void 0 : _root$querySelector.call(root, "[component-key]");
|
|
11979
|
+
return el ? el.getAttribute("component-key") : null;
|
|
11980
|
+
},
|
|
11981
|
+
// 获取容器高度
|
|
11982
|
+
getContainerHeight() {
|
|
11983
|
+
if (this.configData.heightType === "fixed") {
|
|
11984
|
+
return `${this.configData.fixedHeight}px`;
|
|
11985
|
+
}
|
|
11986
|
+
return this.isMobile && this.mobileLayout == "vertical" ? "auto" : "100%";
|
|
11987
|
+
},
|
|
11988
|
+
// 获取容器边框
|
|
11989
|
+
getContainerBorder() {
|
|
11990
|
+
if (this.configData.borderWidth) {
|
|
11991
|
+
return `${this.configData.borderWidth}px ${this.configData.borderStyle} ${this.configData.borderColor}`;
|
|
11992
|
+
}
|
|
11993
|
+
return "none";
|
|
11994
|
+
},
|
|
11995
|
+
// 获取容器圆角
|
|
11996
|
+
getContainerBorderRadius() {
|
|
11997
|
+
if (this.configData.borderRadius) {
|
|
11998
|
+
return `${this.configData.borderRadius}px`;
|
|
11999
|
+
}
|
|
12000
|
+
return "0";
|
|
12001
|
+
},
|
|
12002
|
+
getConfigData(configData) {
|
|
12003
|
+
this.configData = configData;
|
|
12004
|
+
},
|
|
12005
|
+
foldMessText() {
|
|
12006
|
+
this.messFold = !this.messFold;
|
|
12007
|
+
},
|
|
12008
|
+
decodeJumpUrl(url) {
|
|
12009
|
+
if (!url) return;
|
|
12010
|
+
top.location.href = url;
|
|
12011
|
+
},
|
|
12012
|
+
onStart(evt) {
|
|
12013
|
+
console.log("drag start in column-card", evt);
|
|
12014
|
+
this.showAddCom = true;
|
|
12015
|
+
},
|
|
12016
|
+
// 限制拖拽的组件类型
|
|
12017
|
+
onMove(evt) {
|
|
12018
|
+
const {
|
|
12019
|
+
draggedContext
|
|
12020
|
+
} = evt;
|
|
12021
|
+
|
|
12022
|
+
// 允许的组件类型
|
|
12023
|
+
const allowedComponents = ["cms-text", "cms-image", "cms-video", "cms-button", "cms-richText", "cms-column" // 允许拖入 cms-column
|
|
12024
|
+
];
|
|
12025
|
+
|
|
12026
|
+
// 如果是从外部拖入的组件
|
|
12027
|
+
if (draggedContext && draggedContext.element) {
|
|
12028
|
+
const componentType = draggedContext.element.cmsCompName;
|
|
12029
|
+
if (componentType && !allowedComponents.includes(componentType)) {
|
|
12030
|
+
console.log("draggedContext.element", draggedContext.element);
|
|
12031
|
+
console.log(`组件类型 ${componentType} 不允许拖入 column-card`);
|
|
12032
|
+
return false;
|
|
12033
|
+
}
|
|
12034
|
+
|
|
12035
|
+
// 特殊处理 cms-column:检查嵌套层级
|
|
12036
|
+
if (componentType === "cms-column") {
|
|
12037
|
+
if (!this.checkColumnNestingLevel()) {
|
|
12038
|
+
console.log("cms-column 嵌套层级超出限制");
|
|
12039
|
+
return false;
|
|
12040
|
+
}
|
|
12041
|
+
}
|
|
12042
|
+
}
|
|
12043
|
+
return true;
|
|
12044
|
+
},
|
|
12045
|
+
// 检查 cms-column 嵌套层级
|
|
12046
|
+
checkColumnNestingLevel() {
|
|
12047
|
+
// 检查当前 column-card 是否已经在 cms-column 内部
|
|
12048
|
+
let parent = this.$parent;
|
|
12049
|
+
let columnDepth = 0;
|
|
12050
|
+
while (parent) {
|
|
12051
|
+
// 检查父组件是否是 cms-column 或包含 cms-column
|
|
12052
|
+
if (parent.$options.name === "cms-column" || parent.$data && parent.$data.data && parent.$data.data.cmsCompName === "cms-column") {
|
|
12053
|
+
columnDepth++;
|
|
12054
|
+
}
|
|
12055
|
+
|
|
12056
|
+
// 如果已经有一层 cms-column,则不允许再嵌套
|
|
12057
|
+
if (columnDepth >= 2) {
|
|
12058
|
+
console.log(`检测到 cms-column 嵌套层级: ${columnDepth}, 超出限制`);
|
|
12059
|
+
return false;
|
|
12060
|
+
}
|
|
12061
|
+
parent = parent.$parent;
|
|
12062
|
+
}
|
|
12063
|
+
console.log(`cms-column 嵌套层级检查通过: ${columnDepth}`);
|
|
12064
|
+
return true;
|
|
12065
|
+
},
|
|
12066
|
+
// 处理拖拽悬停
|
|
12067
|
+
dragover(e) {
|
|
12068
|
+
e.preventDefault();
|
|
12069
|
+
this.showAddCom = true;
|
|
12070
|
+
},
|
|
12071
|
+
// 处理拖拽放置
|
|
12072
|
+
drop(e) {
|
|
12073
|
+
e.preventDefault();
|
|
12074
|
+
const componentKey = e.dataTransfer.getData("componentKey");
|
|
12075
|
+
let temporaryId = "";
|
|
12076
|
+
this.temporaryList = e.dataTransfer.getData("temporaryList") ? JSON.parse(e.dataTransfer.getData("temporaryList")) : [];
|
|
12077
|
+
console.log("cms-colum-card-drop", componentKey, this.temporaryList);
|
|
12078
|
+
if (!componentKey) return;
|
|
12079
|
+
const isTemporaryItem = e.dataTransfer.getData("isTemporaryItem");
|
|
12080
|
+
const isTemporary = isTemporaryItem === "true";
|
|
12081
|
+
if (isTemporary) {
|
|
12082
|
+
temporaryId = getCopyTemplateCompConfig(this.temporaryList, componentKey).cmsCompName;
|
|
12083
|
+
}
|
|
12084
|
+
const componentType = isTemporary ? temporaryId : componentKey;
|
|
12085
|
+
// 允许的组件类型
|
|
12086
|
+
const allowedComponents = ["cms-text", "cms-image", "cms-video", "cms-button", "cms-richText", "cms-column" // 允许拖入 cms-column
|
|
12087
|
+
];
|
|
12088
|
+
|
|
12089
|
+
// 检查组件类型是否允许
|
|
12090
|
+
if (!allowedComponents.includes(componentType)) {
|
|
12091
|
+
console.log(`组件类型 ${componentType} 不允许拖入 column-card`);
|
|
12092
|
+
this.$message && this.$message.warning(`该组件类型不支持拖入卡片容器`);
|
|
12093
|
+
this.showAddCom = false;
|
|
12094
|
+
return;
|
|
12095
|
+
}
|
|
12096
|
+
|
|
12097
|
+
// 特殊处理 cms-column:检查嵌套层级
|
|
12098
|
+
if (componentType === "cms-column") {
|
|
12099
|
+
if (!this.checkColumnNestingLevel()) {
|
|
12100
|
+
console.log("cms-column 嵌套层级超出限制");
|
|
12101
|
+
this.$message && this.$message.warning(`cms-column 只能嵌套一层`);
|
|
12102
|
+
this.showAddCom = false;
|
|
12103
|
+
return;
|
|
12104
|
+
}
|
|
12105
|
+
}
|
|
12106
|
+
this.addOneComp(e, componentKey);
|
|
12107
|
+
},
|
|
12108
|
+
// 添加组件到卡片容器
|
|
12109
|
+
addOneComp(e, componentKey) {
|
|
12110
|
+
this.showAddCom = false;
|
|
12111
|
+
console.log("drop to column-card", componentKey);
|
|
12112
|
+
|
|
12113
|
+
// 动态导入组件配置
|
|
12114
|
+
let initCompData;
|
|
12115
|
+
try {
|
|
12116
|
+
const isTemporaryItem = e.dataTransfer.getData("isTemporaryItem");
|
|
12117
|
+
const isTemporary = isTemporaryItem === "true";
|
|
12118
|
+
if (isTemporary) {
|
|
12119
|
+
initCompData = getCopyTemplateCompConfig(this.temporaryList, componentKey);
|
|
12120
|
+
} else {
|
|
12121
|
+
initCompData = __webpack_require__(1640)(`./${componentKey}`).default.settings(componentKey);
|
|
12122
|
+
}
|
|
12123
|
+
if (!isTemporary) {
|
|
12124
|
+
initCompData = {
|
|
12125
|
+
...initCompData,
|
|
12126
|
+
styleConfig: {
|
|
12127
|
+
pc: componentKey == "cms-text" ? [...(0,baseConfig.styleBaseConfig)(16, 16, 0, 0, "px")] : [...(0,baseConfig.styleBaseConfig)(0, 0, 0, 0, "px")],
|
|
12128
|
+
mb: componentKey == "cms-text" ? [...(0,baseConfig.styleBaseConfig)(12, 12, 0, 0, "px")] : [...(0,baseConfig.styleBaseConfig)(0, 0, 0, 0, "px")]
|
|
12129
|
+
}
|
|
12130
|
+
};
|
|
12131
|
+
}
|
|
12132
|
+
} catch (error) {
|
|
12133
|
+
console.error(`无法加载组件 ${componentKey}:`, error);
|
|
12134
|
+
this.$message && this.$message.error(`组件加载失败`);
|
|
12135
|
+
return;
|
|
12136
|
+
}
|
|
12137
|
+
const toElementId = e.toElement.id;
|
|
12138
|
+
if (toElementId === `cardTarget${this.data.componentId}` || toElementId.includes("cardTargetdown")) {
|
|
12139
|
+
// 添加到卡片容器末尾
|
|
12140
|
+
this.data.childList.push(initCompData);
|
|
12141
|
+
} else if (toElementId.includes("cardTargetup")) {
|
|
12142
|
+
// 插入到指定位置
|
|
12143
|
+
const underComponentId = toElementId.split("-cardTargetup")[0];
|
|
12144
|
+
const index = this.data.childList.findIndex(item => item.componentId === underComponentId);
|
|
12145
|
+
if (index !== -1) {
|
|
12146
|
+
this.data.childList.splice(index, 0, initCompData);
|
|
12147
|
+
}
|
|
12148
|
+
}
|
|
12149
|
+
|
|
12150
|
+
// 触发数据更新
|
|
12151
|
+
this.$emit("update:data", this.data);
|
|
12152
|
+
if (componentKey === "cms-column") {
|
|
12153
|
+
this.$EventBus.$emit("handleNowComp", initCompData);
|
|
12154
|
+
}
|
|
12155
|
+
}
|
|
12156
|
+
}
|
|
12157
|
+
});
|
|
12158
|
+
;// ./package/cms-column-card/View.vue?vue&type=script&lang=js
|
|
12159
|
+
/* harmony default export */ var cms_column_card_Viewvue_type_script_lang_js = (Viewvue_type_script_lang_js);
|
|
12160
|
+
;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.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
|
|
12161
|
+
// extracted by mini-css-extract-plugin
|
|
12162
|
+
|
|
12163
|
+
;// ./package/cms-column-card/View.vue?vue&type=style&index=0&id=2dcb9de2&prod&lang=scss&scoped=true
|
|
12164
|
+
|
|
12165
|
+
// EXTERNAL MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
|
|
12166
|
+
var componentNormalizer = __webpack_require__(1656);
|
|
12167
|
+
;// ./package/cms-column-card/View.vue
|
|
12168
|
+
|
|
12169
|
+
|
|
12170
|
+
|
|
12171
|
+
;
|
|
12172
|
+
|
|
12173
|
+
|
|
12174
|
+
/* normalize component */
|
|
12175
|
+
|
|
12176
|
+
var component = (0,componentNormalizer/* default */.A)(
|
|
12177
|
+
cms_column_card_Viewvue_type_script_lang_js,
|
|
12178
|
+
render,
|
|
12179
|
+
staticRenderFns,
|
|
12180
|
+
false,
|
|
12181
|
+
null,
|
|
12182
|
+
"2dcb9de2",
|
|
12183
|
+
null
|
|
12184
|
+
|
|
12185
|
+
)
|
|
12186
|
+
|
|
12187
|
+
/* harmony default export */ var View = (component.exports);
|
|
12188
|
+
|
|
12189
|
+
/***/ }),
|
|
12190
|
+
|
|
12558
12191
|
/***/ 2360:
|
|
12559
12192
|
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
|
|
12560
12193
|
|
|
@@ -25386,6 +25019,270 @@ var POLYFILL = isForced.POLYFILL = 'P';
|
|
|
25386
25019
|
module.exports = isForced;
|
|
25387
25020
|
|
|
25388
25021
|
|
|
25022
|
+
/***/ }),
|
|
25023
|
+
|
|
25024
|
+
/***/ 2802:
|
|
25025
|
+
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
25026
|
+
|
|
25027
|
+
"use strict";
|
|
25028
|
+
// ESM COMPAT FLAG
|
|
25029
|
+
__webpack_require__.r(__webpack_exports__);
|
|
25030
|
+
|
|
25031
|
+
// EXPORTS
|
|
25032
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
25033
|
+
"default": function() { return /* binding */ View; }
|
|
25034
|
+
});
|
|
25035
|
+
|
|
25036
|
+
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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
|
|
25037
|
+
var render = function render() {
|
|
25038
|
+
var _vm = this,
|
|
25039
|
+
_c = _vm._self._c;
|
|
25040
|
+
return _c('BaseComp', _vm._b({
|
|
25041
|
+
attrs: {
|
|
25042
|
+
"data": _vm.data,
|
|
25043
|
+
"nowCompId": _vm.nowCompId,
|
|
25044
|
+
"isOpcacity": _vm.isOpcacity,
|
|
25045
|
+
"isMask": false,
|
|
25046
|
+
"lang": _vm.lang
|
|
25047
|
+
},
|
|
25048
|
+
on: {
|
|
25049
|
+
"getConfigData": _vm.getConfigData
|
|
25050
|
+
},
|
|
25051
|
+
scopedSlots: _vm._u([{
|
|
25052
|
+
key: "default",
|
|
25053
|
+
fn: function (slotProps) {
|
|
25054
|
+
return [_c('section', {
|
|
25055
|
+
class: (_vm.configData.widthType === 'full' ? 'width-full' : 'cmhk-home_main', {
|
|
25056
|
+
hoverBorderClass: _vm.isConfigPage
|
|
25057
|
+
}),
|
|
25058
|
+
style: _vm.containerStyle
|
|
25059
|
+
}, [_c('div', {
|
|
25060
|
+
staticClass: "column-setting",
|
|
25061
|
+
class: [`layout-${_vm.configData.layoutType || 'default'}`, `${slotProps.isMobile && _vm.configData.mobileLayout === 'vertical' ? 'mobile-vertical' : 'mobile-horizontal'}`],
|
|
25062
|
+
style: _vm.columnStyle
|
|
25063
|
+
}, _vm._l(_vm.data.childList, function (item, index) {
|
|
25064
|
+
return _c('cms-column-card', _vm._b({
|
|
25065
|
+
key: item.componentId,
|
|
25066
|
+
class: _vm.getColumnItemClass(index),
|
|
25067
|
+
style: _vm.getColumnItemStyle(index),
|
|
25068
|
+
attrs: {
|
|
25069
|
+
"data": item,
|
|
25070
|
+
"nowCompId": _vm.nowCompId,
|
|
25071
|
+
"isOpcacity": _vm.isOpcacity,
|
|
25072
|
+
"isMask": false,
|
|
25073
|
+
"lang": _vm.lang,
|
|
25074
|
+
"isMobile": slotProps.isMobile,
|
|
25075
|
+
"mobileLayout": _vm.configData.mobileLayout
|
|
25076
|
+
}
|
|
25077
|
+
}, 'cms-column-card', _vm.$attrs, false));
|
|
25078
|
+
}), 1)])];
|
|
25079
|
+
}
|
|
25080
|
+
}])
|
|
25081
|
+
}, 'BaseComp', _vm.$attrs, false));
|
|
25082
|
+
};
|
|
25083
|
+
var staticRenderFns = [];
|
|
25084
|
+
|
|
25085
|
+
// EXTERNAL MODULE: ./package/baseComp.vue + 5 modules
|
|
25086
|
+
var baseComp = __webpack_require__(5298);
|
|
25087
|
+
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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
|
|
25088
|
+
|
|
25089
|
+
/* harmony default export */ var Viewvue_type_script_lang_js = ({
|
|
25090
|
+
name: "cms-column",
|
|
25091
|
+
components: {
|
|
25092
|
+
BaseComp: baseComp["default"]
|
|
25093
|
+
},
|
|
25094
|
+
props: {
|
|
25095
|
+
data: {
|
|
25096
|
+
type: Object,
|
|
25097
|
+
default: () => {
|
|
25098
|
+
return {};
|
|
25099
|
+
}
|
|
25100
|
+
},
|
|
25101
|
+
nowCompId: {
|
|
25102
|
+
type: [String, Number],
|
|
25103
|
+
default: ""
|
|
25104
|
+
},
|
|
25105
|
+
isOpcacity: {
|
|
25106
|
+
type: Boolean,
|
|
25107
|
+
default: true
|
|
25108
|
+
},
|
|
25109
|
+
lang: {
|
|
25110
|
+
type: String,
|
|
25111
|
+
default: "zh-HK"
|
|
25112
|
+
}
|
|
25113
|
+
},
|
|
25114
|
+
data() {
|
|
25115
|
+
return {
|
|
25116
|
+
configData: {},
|
|
25117
|
+
messFold: true,
|
|
25118
|
+
// 默认配置数据
|
|
25119
|
+
defaultConfig: {
|
|
25120
|
+
layoutType: "100",
|
|
25121
|
+
heightType: "auto",
|
|
25122
|
+
widthType: "auto",
|
|
25123
|
+
mobileLayout: "vertical",
|
|
25124
|
+
fixedHeight: 300,
|
|
25125
|
+
borderWidth: 0,
|
|
25126
|
+
borderStyle: "solid",
|
|
25127
|
+
borderColor: "",
|
|
25128
|
+
backgroundColor: "#FFF",
|
|
25129
|
+
backgroundImage: "",
|
|
25130
|
+
boxShadow: "",
|
|
25131
|
+
borderRadius: 0,
|
|
25132
|
+
columnGap: 0,
|
|
25133
|
+
rowGap: 0,
|
|
25134
|
+
title: "",
|
|
25135
|
+
description: "",
|
|
25136
|
+
input1: "",
|
|
25137
|
+
showTitle: true,
|
|
25138
|
+
showDescription: true,
|
|
25139
|
+
animationDuration: 300,
|
|
25140
|
+
responsiveBreakpoint: 768
|
|
25141
|
+
}
|
|
25142
|
+
};
|
|
25143
|
+
},
|
|
25144
|
+
mounted() {},
|
|
25145
|
+
watch: {
|
|
25146
|
+
configData: {
|
|
25147
|
+
handler() {
|
|
25148
|
+
this.updateStyles();
|
|
25149
|
+
},
|
|
25150
|
+
immediate: true,
|
|
25151
|
+
deep: true
|
|
25152
|
+
}
|
|
25153
|
+
},
|
|
25154
|
+
computed: {
|
|
25155
|
+
isConfigPage() {
|
|
25156
|
+
return this.$EventBus && this.isOpcacity;
|
|
25157
|
+
},
|
|
25158
|
+
// 容器样式
|
|
25159
|
+
containerStyle() {
|
|
25160
|
+
return {
|
|
25161
|
+
backgroundColor: this.configData.backgroundColor || this.defaultConfig.backgroundColor,
|
|
25162
|
+
backgroundImage: this.configData.backgroundImage ? `url(${this.configData.backgroundImage})` : "",
|
|
25163
|
+
backgroundSize: "cover",
|
|
25164
|
+
backgroundRepeat: "no-repeat",
|
|
25165
|
+
backgroundPosition: "center center",
|
|
25166
|
+
boxShadow: this.configData.boxShadow || this.defaultConfig.boxShadow,
|
|
25167
|
+
borderRadius: `${this.configData.borderRadius || this.defaultConfig.borderRadius}px`,
|
|
25168
|
+
minHeight: this.configData.heightType === "fixed" ? `${this.configData.fixedHeight}px` : "auto"
|
|
25169
|
+
};
|
|
25170
|
+
},
|
|
25171
|
+
// 分栏容器样式
|
|
25172
|
+
columnStyle() {
|
|
25173
|
+
// const gap = this.configData.rowGap || this.defaultConfig.rowGap;
|
|
25174
|
+
return {
|
|
25175
|
+
// gap: `${gap}px`,
|
|
25176
|
+
border: this.configData.borderWidth ? `${this.configData.borderWidth}px ${this.configData.borderStyle} ${this.configData.borderColor}` : "none"
|
|
25177
|
+
};
|
|
25178
|
+
}
|
|
25179
|
+
},
|
|
25180
|
+
methods: {
|
|
25181
|
+
// 获取配置数据
|
|
25182
|
+
getConfigData(configData) {
|
|
25183
|
+
this.configData = configData;
|
|
25184
|
+
this.updateStyles();
|
|
25185
|
+
},
|
|
25186
|
+
// 更新样式
|
|
25187
|
+
updateStyles() {
|
|
25188
|
+
this.$nextTick(() => {
|
|
25189
|
+
// 触发样式更新
|
|
25190
|
+
this.$forceUpdate();
|
|
25191
|
+
});
|
|
25192
|
+
},
|
|
25193
|
+
// 获取分栏项的类名
|
|
25194
|
+
getColumnItemClass(index) {
|
|
25195
|
+
const layoutType = this.configData.layoutType || this.defaultConfig.layoutType;
|
|
25196
|
+
return ["column-item", `column-item-${index}`, `layout-${layoutType}`, {
|
|
25197
|
+
"min-h": this.$EventBus && this.isOpcacity,
|
|
25198
|
+
"first-item": index === 0,
|
|
25199
|
+
"last-item": index === this.data.childList.length - 1
|
|
25200
|
+
}];
|
|
25201
|
+
},
|
|
25202
|
+
// 获取分栏项的样式
|
|
25203
|
+
getColumnItemStyle(index) {
|
|
25204
|
+
const layoutType = this.configData.layoutType || this.defaultConfig.layoutType;
|
|
25205
|
+
const gap = this.configData.rowGap || this.defaultConfig.rowGap;
|
|
25206
|
+
let flexBasis = "100%";
|
|
25207
|
+
let marginRight = "0";
|
|
25208
|
+
|
|
25209
|
+
// 根据布局类型设置宽度
|
|
25210
|
+
switch (layoutType) {
|
|
25211
|
+
case "50-50":
|
|
25212
|
+
flexBasis = `calc(50% - ${gap / 2}px)`;
|
|
25213
|
+
marginRight = index % 2 === 0 ? `${gap}px` : "0";
|
|
25214
|
+
break;
|
|
25215
|
+
case "33-66":
|
|
25216
|
+
flexBasis = index === 0 ? `calc(33.33% - ${gap / 2}px)` : `calc(66.67% - ${gap / 2}px)`;
|
|
25217
|
+
marginRight = index === 0 ? `${gap}px` : "0";
|
|
25218
|
+
break;
|
|
25219
|
+
case "66-33":
|
|
25220
|
+
flexBasis = index === 0 ? `calc(66.67% - ${gap / 2}px)` : `calc(33.33% - ${gap / 2}px)`;
|
|
25221
|
+
marginRight = index === 0 ? `${gap}px` : "0";
|
|
25222
|
+
break;
|
|
25223
|
+
case "33-33-33":
|
|
25224
|
+
flexBasis = `calc(33.33% - ${gap * 2 / 3}px)`;
|
|
25225
|
+
marginRight = index < 2 ? `${gap}px` : "0";
|
|
25226
|
+
break;
|
|
25227
|
+
case "25-50-25":
|
|
25228
|
+
if (index === 0 || index === 2) {
|
|
25229
|
+
flexBasis = `calc(25% - ${gap * 2 / 3}px)`;
|
|
25230
|
+
} else {
|
|
25231
|
+
flexBasis = `calc(50% - ${gap * 2 / 3}px)`;
|
|
25232
|
+
}
|
|
25233
|
+
marginRight = index < 2 ? `${gap}px` : "0";
|
|
25234
|
+
break;
|
|
25235
|
+
default:
|
|
25236
|
+
flexBasis = "100%";
|
|
25237
|
+
}
|
|
25238
|
+
return {
|
|
25239
|
+
flexBasis,
|
|
25240
|
+
marginRight,
|
|
25241
|
+
marginBottom: `${this.configData.columnGap || this.defaultConfig.columnGap}px`
|
|
25242
|
+
};
|
|
25243
|
+
},
|
|
25244
|
+
// 折叠/展开文本
|
|
25245
|
+
foldMessText() {
|
|
25246
|
+
this.messFold = !this.messFold;
|
|
25247
|
+
},
|
|
25248
|
+
// 处理跳转链接
|
|
25249
|
+
decodeJumpUrl(url) {
|
|
25250
|
+
if (!url) return;
|
|
25251
|
+
top.location.href = url;
|
|
25252
|
+
}
|
|
25253
|
+
}
|
|
25254
|
+
});
|
|
25255
|
+
;// ./package/cms-column/View.vue?vue&type=script&lang=js
|
|
25256
|
+
/* harmony default export */ var cms_column_Viewvue_type_script_lang_js = (Viewvue_type_script_lang_js);
|
|
25257
|
+
;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.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
|
|
25258
|
+
// extracted by mini-css-extract-plugin
|
|
25259
|
+
|
|
25260
|
+
;// ./package/cms-column/View.vue?vue&type=style&index=0&id=f2ba72e8&prod&lang=scss&scoped=true
|
|
25261
|
+
|
|
25262
|
+
// EXTERNAL MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
|
|
25263
|
+
var componentNormalizer = __webpack_require__(1656);
|
|
25264
|
+
;// ./package/cms-column/View.vue
|
|
25265
|
+
|
|
25266
|
+
|
|
25267
|
+
|
|
25268
|
+
;
|
|
25269
|
+
|
|
25270
|
+
|
|
25271
|
+
/* normalize component */
|
|
25272
|
+
|
|
25273
|
+
var component = (0,componentNormalizer/* default */.A)(
|
|
25274
|
+
cms_column_Viewvue_type_script_lang_js,
|
|
25275
|
+
render,
|
|
25276
|
+
staticRenderFns,
|
|
25277
|
+
false,
|
|
25278
|
+
null,
|
|
25279
|
+
"f2ba72e8",
|
|
25280
|
+
null
|
|
25281
|
+
|
|
25282
|
+
)
|
|
25283
|
+
|
|
25284
|
+
/* harmony default export */ var View = (component.exports);
|
|
25285
|
+
|
|
25389
25286
|
/***/ }),
|
|
25390
25287
|
|
|
25391
25288
|
/***/ 2806:
|
|
@@ -26681,7 +26578,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
26681
26578
|
__webpack_require__.r(__webpack_exports__);
|
|
26682
26579
|
/* harmony import */ var _baseConfig__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(649);
|
|
26683
26580
|
|
|
26684
|
-
const View = () => Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__,
|
|
26581
|
+
const View = () => Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 2802));
|
|
26685
26582
|
const langData = {
|
|
26686
26583
|
// 布局配置
|
|
26687
26584
|
layoutType: "100",
|
|
@@ -38406,8 +38303,8 @@ var map = {
|
|
|
38406
38303
|
"./cms-banner/View.vue": 2646,
|
|
38407
38304
|
"./cms-button/View.vue": 2404,
|
|
38408
38305
|
"./cms-cells/View.vue": 5700,
|
|
38409
|
-
"./cms-column-card/View.vue":
|
|
38410
|
-
"./cms-column/View.vue":
|
|
38306
|
+
"./cms-column-card/View.vue": 2328,
|
|
38307
|
+
"./cms-column/View.vue": 2802,
|
|
38411
38308
|
"./cms-description/View.vue": 3203,
|
|
38412
38309
|
"./cms-dynamic-comp/View.vue": 1705,
|
|
38413
38310
|
"./cms-iconFour/View.vue": 8235,
|
|
@@ -38432,7 +38329,7 @@ var map = {
|
|
|
38432
38329
|
"./cms-titleLeft/View.vue": 9004,
|
|
38433
38330
|
"./cms-via-storedValueCard/View.vue": 7243,
|
|
38434
38331
|
"./cms-video-group/View.vue": 8216,
|
|
38435
|
-
"./cms-video/View.vue":
|
|
38332
|
+
"./cms-video/View.vue": 8573,
|
|
38436
38333
|
"./cms-view/View.vue": 1380
|
|
38437
38334
|
};
|
|
38438
38335
|
|
|
@@ -39089,7 +38986,7 @@ var component = (0,componentNormalizer/* default */.A)(
|
|
|
39089
38986
|
__webpack_require__.r(__webpack_exports__);
|
|
39090
38987
|
/* harmony import */ var _baseConfig__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(649);
|
|
39091
38988
|
|
|
39092
|
-
const View = () => Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__,
|
|
38989
|
+
const View = () => Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 2328));
|
|
39093
38990
|
|
|
39094
38991
|
// 默认配置数据
|
|
39095
38992
|
const langData = {
|
|
@@ -40224,281 +40121,6 @@ module.exports = function (obj) {
|
|
|
40224
40121
|
module.exports = {};
|
|
40225
40122
|
|
|
40226
40123
|
|
|
40227
|
-
/***/ }),
|
|
40228
|
-
|
|
40229
|
-
/***/ 6278:
|
|
40230
|
-
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
40231
|
-
|
|
40232
|
-
"use strict";
|
|
40233
|
-
// ESM COMPAT FLAG
|
|
40234
|
-
__webpack_require__.r(__webpack_exports__);
|
|
40235
|
-
|
|
40236
|
-
// EXPORTS
|
|
40237
|
-
__webpack_require__.d(__webpack_exports__, {
|
|
40238
|
-
"default": function() { return /* binding */ View; }
|
|
40239
|
-
});
|
|
40240
|
-
|
|
40241
|
-
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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
|
|
40242
|
-
var render = function render() {
|
|
40243
|
-
var _vm = this,
|
|
40244
|
-
_c = _vm._self._c;
|
|
40245
|
-
return _c('BaseComp', _vm._b({
|
|
40246
|
-
attrs: {
|
|
40247
|
-
"data": _vm.data,
|
|
40248
|
-
"nowCompId": _vm.nowCompId,
|
|
40249
|
-
"isOpcacity": _vm.isOpcacity,
|
|
40250
|
-
"isMask": false,
|
|
40251
|
-
"lang": _vm.lang
|
|
40252
|
-
},
|
|
40253
|
-
on: {
|
|
40254
|
-
"getConfigData": _vm.getConfigData
|
|
40255
|
-
},
|
|
40256
|
-
scopedSlots: _vm._u([{
|
|
40257
|
-
key: "default",
|
|
40258
|
-
fn: function (slotProps) {
|
|
40259
|
-
return [_c('section', {
|
|
40260
|
-
class: (_vm.configData.widthType === 'full' ? 'width-full' : 'cmhk-home_main', {
|
|
40261
|
-
hoverBorderClass: _vm.isConfigPage
|
|
40262
|
-
}),
|
|
40263
|
-
style: _vm.containerStyle
|
|
40264
|
-
}, [_c('div', {
|
|
40265
|
-
staticClass: "column-setting",
|
|
40266
|
-
class: [`layout-${_vm.configData.layoutType || 'default'}`, `${slotProps.isMobile && _vm.configData.mobileLayout === 'vertical' ? 'mobile-vertical' : 'mobile-horizontal'}`],
|
|
40267
|
-
style: _vm.columnStyle
|
|
40268
|
-
}, _vm._l(_vm.data.childList, function (item, index) {
|
|
40269
|
-
return _c('cms-column-card', {
|
|
40270
|
-
key: item.componentId,
|
|
40271
|
-
class: _vm.getColumnItemClass(index),
|
|
40272
|
-
style: _vm.getColumnItemStyle(index),
|
|
40273
|
-
attrs: {
|
|
40274
|
-
"data": item,
|
|
40275
|
-
"nowCompId": _vm.nowCompId,
|
|
40276
|
-
"isOpcacity": _vm.isOpcacity,
|
|
40277
|
-
"isMask": false,
|
|
40278
|
-
"lang": _vm.lang
|
|
40279
|
-
}
|
|
40280
|
-
});
|
|
40281
|
-
}), 1)])];
|
|
40282
|
-
}
|
|
40283
|
-
}])
|
|
40284
|
-
}, 'BaseComp', _vm.$attrs, false));
|
|
40285
|
-
};
|
|
40286
|
-
var staticRenderFns = [];
|
|
40287
|
-
|
|
40288
|
-
// EXTERNAL MODULE: ./package/baseComp.vue + 5 modules
|
|
40289
|
-
var baseComp = __webpack_require__(5298);
|
|
40290
|
-
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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
|
|
40291
|
-
|
|
40292
|
-
/* harmony default export */ var Viewvue_type_script_lang_js = ({
|
|
40293
|
-
name: "cms-column",
|
|
40294
|
-
components: {
|
|
40295
|
-
BaseComp: baseComp["default"]
|
|
40296
|
-
},
|
|
40297
|
-
props: {
|
|
40298
|
-
data: {
|
|
40299
|
-
type: Object,
|
|
40300
|
-
default: () => {
|
|
40301
|
-
return {};
|
|
40302
|
-
}
|
|
40303
|
-
},
|
|
40304
|
-
nowCompId: {
|
|
40305
|
-
type: [String, Number],
|
|
40306
|
-
default: ""
|
|
40307
|
-
},
|
|
40308
|
-
isOpcacity: {
|
|
40309
|
-
type: Boolean,
|
|
40310
|
-
default: true
|
|
40311
|
-
},
|
|
40312
|
-
lang: {
|
|
40313
|
-
type: String,
|
|
40314
|
-
default: "zh-HK"
|
|
40315
|
-
}
|
|
40316
|
-
},
|
|
40317
|
-
data() {
|
|
40318
|
-
return {
|
|
40319
|
-
configData: {},
|
|
40320
|
-
messFold: true,
|
|
40321
|
-
// 默认配置数据
|
|
40322
|
-
defaultConfig: {
|
|
40323
|
-
layoutType: "100",
|
|
40324
|
-
heightType: "auto",
|
|
40325
|
-
widthType: "auto",
|
|
40326
|
-
mobileLayout: "vertical",
|
|
40327
|
-
fixedHeight: 300,
|
|
40328
|
-
borderWidth: 0,
|
|
40329
|
-
borderStyle: "solid",
|
|
40330
|
-
borderColor: "",
|
|
40331
|
-
backgroundColor: "#FFF",
|
|
40332
|
-
backgroundImage: "",
|
|
40333
|
-
boxShadow: "",
|
|
40334
|
-
borderRadius: 0,
|
|
40335
|
-
columnGap: 0,
|
|
40336
|
-
rowGap: 0,
|
|
40337
|
-
title: "",
|
|
40338
|
-
description: "",
|
|
40339
|
-
input1: "",
|
|
40340
|
-
showTitle: true,
|
|
40341
|
-
showDescription: true,
|
|
40342
|
-
animationDuration: 300,
|
|
40343
|
-
responsiveBreakpoint: 768
|
|
40344
|
-
}
|
|
40345
|
-
};
|
|
40346
|
-
},
|
|
40347
|
-
mounted() {
|
|
40348
|
-
this.initConfigData();
|
|
40349
|
-
// 添加窗口大小变化监听
|
|
40350
|
-
},
|
|
40351
|
-
watch: {
|
|
40352
|
-
configData: {
|
|
40353
|
-
handler() {
|
|
40354
|
-
this.updateStyles();
|
|
40355
|
-
},
|
|
40356
|
-
deep: true
|
|
40357
|
-
}
|
|
40358
|
-
},
|
|
40359
|
-
computed: {
|
|
40360
|
-
isConfigPage() {
|
|
40361
|
-
return this.$EventBus && this.isOpcacity;
|
|
40362
|
-
},
|
|
40363
|
-
// 容器样式
|
|
40364
|
-
containerStyle() {
|
|
40365
|
-
return {
|
|
40366
|
-
backgroundColor: this.configData.backgroundColor || this.defaultConfig.backgroundColor,
|
|
40367
|
-
backgroundImage: this.configData.backgroundImage ? `url(${this.configData.backgroundImage})` : "",
|
|
40368
|
-
backgroundSize: "cover",
|
|
40369
|
-
backgroundRepeat: "no-repeat",
|
|
40370
|
-
backgroundPosition: "center center",
|
|
40371
|
-
boxShadow: this.configData.boxShadow || this.defaultConfig.boxShadow,
|
|
40372
|
-
borderRadius: `${this.configData.borderRadius || this.defaultConfig.borderRadius}px`,
|
|
40373
|
-
minHeight: this.configData.heightType === "fixed" ? `${this.configData.fixedHeight}px` : "auto"
|
|
40374
|
-
};
|
|
40375
|
-
},
|
|
40376
|
-
// 分栏容器样式
|
|
40377
|
-
columnStyle() {
|
|
40378
|
-
// const gap = this.configData.rowGap || this.defaultConfig.rowGap;
|
|
40379
|
-
return {
|
|
40380
|
-
// gap: `${gap}px`,
|
|
40381
|
-
border: this.configData.borderWidth ? `${this.configData.borderWidth}px ${this.configData.borderStyle} ${this.configData.borderColor}` : "none"
|
|
40382
|
-
};
|
|
40383
|
-
}
|
|
40384
|
-
},
|
|
40385
|
-
methods: {
|
|
40386
|
-
// 初始化配置数据
|
|
40387
|
-
initConfigData() {
|
|
40388
|
-
// 合并默认配置和传入配置
|
|
40389
|
-
this.configData = {
|
|
40390
|
-
...this.defaultConfig,
|
|
40391
|
-
...this.configData
|
|
40392
|
-
};
|
|
40393
|
-
},
|
|
40394
|
-
// 获取配置数据
|
|
40395
|
-
getConfigData(configData) {
|
|
40396
|
-
this.configData = {
|
|
40397
|
-
...this.defaultConfig,
|
|
40398
|
-
...configData
|
|
40399
|
-
};
|
|
40400
|
-
this.updateStyles();
|
|
40401
|
-
},
|
|
40402
|
-
// 更新样式
|
|
40403
|
-
updateStyles() {
|
|
40404
|
-
this.$nextTick(() => {
|
|
40405
|
-
// 触发样式更新
|
|
40406
|
-
this.$forceUpdate();
|
|
40407
|
-
});
|
|
40408
|
-
},
|
|
40409
|
-
// 获取分栏项的类名
|
|
40410
|
-
getColumnItemClass(index) {
|
|
40411
|
-
const layoutType = this.configData.layoutType || this.defaultConfig.layoutType;
|
|
40412
|
-
return ["column-item", `column-item-${index}`, `layout-${layoutType}`, {
|
|
40413
|
-
"min-h": this.$EventBus && this.isOpcacity,
|
|
40414
|
-
"first-item": index === 0,
|
|
40415
|
-
"last-item": index === this.data.childList.length - 1
|
|
40416
|
-
}];
|
|
40417
|
-
},
|
|
40418
|
-
// 获取分栏项的样式
|
|
40419
|
-
getColumnItemStyle(index) {
|
|
40420
|
-
const layoutType = this.configData.layoutType || this.defaultConfig.layoutType;
|
|
40421
|
-
const gap = this.configData.rowGap || this.defaultConfig.rowGap;
|
|
40422
|
-
let flexBasis = "100%";
|
|
40423
|
-
let marginRight = "0";
|
|
40424
|
-
|
|
40425
|
-
// 根据布局类型设置宽度
|
|
40426
|
-
switch (layoutType) {
|
|
40427
|
-
case "50-50":
|
|
40428
|
-
flexBasis = `calc(50% - ${gap / 2}px)`;
|
|
40429
|
-
marginRight = index % 2 === 0 ? `${gap}px` : "0";
|
|
40430
|
-
break;
|
|
40431
|
-
case "33-66":
|
|
40432
|
-
flexBasis = index === 0 ? `calc(33.33% - ${gap / 2}px)` : `calc(66.67% - ${gap / 2}px)`;
|
|
40433
|
-
marginRight = index === 0 ? `${gap}px` : "0";
|
|
40434
|
-
break;
|
|
40435
|
-
case "66-33":
|
|
40436
|
-
flexBasis = index === 0 ? `calc(66.67% - ${gap / 2}px)` : `calc(33.33% - ${gap / 2}px)`;
|
|
40437
|
-
marginRight = index === 0 ? `${gap}px` : "0";
|
|
40438
|
-
break;
|
|
40439
|
-
case "33-33-33":
|
|
40440
|
-
flexBasis = `calc(33.33% - ${gap * 2 / 3}px)`;
|
|
40441
|
-
marginRight = index < 2 ? `${gap}px` : "0";
|
|
40442
|
-
break;
|
|
40443
|
-
case "25-50-25":
|
|
40444
|
-
if (index === 0 || index === 2) {
|
|
40445
|
-
flexBasis = `calc(25% - ${gap * 2 / 3}px)`;
|
|
40446
|
-
} else {
|
|
40447
|
-
flexBasis = `calc(50% - ${gap * 2 / 3}px)`;
|
|
40448
|
-
}
|
|
40449
|
-
marginRight = index < 2 ? `${gap}px` : "0";
|
|
40450
|
-
break;
|
|
40451
|
-
default:
|
|
40452
|
-
flexBasis = "100%";
|
|
40453
|
-
}
|
|
40454
|
-
return {
|
|
40455
|
-
flexBasis,
|
|
40456
|
-
marginRight,
|
|
40457
|
-
marginBottom: `${this.configData.columnGap || this.defaultConfig.columnGap}px`
|
|
40458
|
-
};
|
|
40459
|
-
},
|
|
40460
|
-
// 折叠/展开文本
|
|
40461
|
-
foldMessText() {
|
|
40462
|
-
this.messFold = !this.messFold;
|
|
40463
|
-
},
|
|
40464
|
-
// 处理跳转链接
|
|
40465
|
-
decodeJumpUrl(url) {
|
|
40466
|
-
if (!url) return;
|
|
40467
|
-
top.location.href = url;
|
|
40468
|
-
}
|
|
40469
|
-
}
|
|
40470
|
-
});
|
|
40471
|
-
;// ./package/cms-column/View.vue?vue&type=script&lang=js
|
|
40472
|
-
/* harmony default export */ var cms_column_Viewvue_type_script_lang_js = (Viewvue_type_script_lang_js);
|
|
40473
|
-
;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.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
|
|
40474
|
-
// extracted by mini-css-extract-plugin
|
|
40475
|
-
|
|
40476
|
-
;// ./package/cms-column/View.vue?vue&type=style&index=0&id=73699845&prod&lang=scss&scoped=true
|
|
40477
|
-
|
|
40478
|
-
// EXTERNAL MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
|
|
40479
|
-
var componentNormalizer = __webpack_require__(1656);
|
|
40480
|
-
;// ./package/cms-column/View.vue
|
|
40481
|
-
|
|
40482
|
-
|
|
40483
|
-
|
|
40484
|
-
;
|
|
40485
|
-
|
|
40486
|
-
|
|
40487
|
-
/* normalize component */
|
|
40488
|
-
|
|
40489
|
-
var component = (0,componentNormalizer/* default */.A)(
|
|
40490
|
-
cms_column_Viewvue_type_script_lang_js,
|
|
40491
|
-
render,
|
|
40492
|
-
staticRenderFns,
|
|
40493
|
-
false,
|
|
40494
|
-
null,
|
|
40495
|
-
"73699845",
|
|
40496
|
-
null
|
|
40497
|
-
|
|
40498
|
-
)
|
|
40499
|
-
|
|
40500
|
-
/* harmony default export */ var View = (component.exports);
|
|
40501
|
-
|
|
40502
40124
|
/***/ }),
|
|
40503
40125
|
|
|
40504
40126
|
/***/ 6279:
|
|
@@ -40623,19 +40245,19 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
40623
40245
|
|
|
40624
40246
|
const View = () => Promise.resolve(/* import() */).then(__webpack_require__.bind(__webpack_require__, 9487));
|
|
40625
40247
|
const langData = {
|
|
40626
|
-
input1: "
|
|
40248
|
+
input1: "描述",
|
|
40627
40249
|
input2: "标题",
|
|
40628
|
-
input3: "
|
|
40250
|
+
input3: "高亮标题"
|
|
40629
40251
|
};
|
|
40630
40252
|
const configDataType = (0,_baseConfig__WEBPACK_IMPORTED_MODULE_0__.getLangDataType)(langData, {
|
|
40631
40253
|
input1: {
|
|
40632
|
-
label: "
|
|
40254
|
+
label: "描述"
|
|
40633
40255
|
},
|
|
40634
40256
|
input2: {
|
|
40635
40257
|
label: "标题"
|
|
40636
40258
|
},
|
|
40637
40259
|
input3: {
|
|
40638
|
-
label: "
|
|
40260
|
+
label: "高亮标题"
|
|
40639
40261
|
}
|
|
40640
40262
|
});
|
|
40641
40263
|
const validateSchema = (0,_baseConfig__WEBPACK_IMPORTED_MODULE_0__.getValidateSchema)(langData);
|
|
@@ -52720,6 +52342,383 @@ module.exports = function (argument) {
|
|
|
52720
52342
|
};
|
|
52721
52343
|
|
|
52722
52344
|
|
|
52345
|
+
/***/ }),
|
|
52346
|
+
|
|
52347
|
+
/***/ 8573:
|
|
52348
|
+
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
52349
|
+
|
|
52350
|
+
"use strict";
|
|
52351
|
+
// ESM COMPAT FLAG
|
|
52352
|
+
__webpack_require__.r(__webpack_exports__);
|
|
52353
|
+
|
|
52354
|
+
// EXPORTS
|
|
52355
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
52356
|
+
"default": function() { return /* binding */ View; }
|
|
52357
|
+
});
|
|
52358
|
+
|
|
52359
|
+
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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
|
|
52360
|
+
var render = function render() {
|
|
52361
|
+
var _vm = this,
|
|
52362
|
+
_c = _vm._self._c;
|
|
52363
|
+
return _c('BaseComp', _vm._b({
|
|
52364
|
+
attrs: {
|
|
52365
|
+
"data": _vm.data,
|
|
52366
|
+
"nowCompId": _vm.nowCompId,
|
|
52367
|
+
"isOpcacity": _vm.isOpcacity,
|
|
52368
|
+
"lang": _vm.lang
|
|
52369
|
+
},
|
|
52370
|
+
on: {
|
|
52371
|
+
"getConfigData": _vm.getConfigData
|
|
52372
|
+
}
|
|
52373
|
+
}, 'BaseComp', _vm.$attrs, false), [_c('section', {
|
|
52374
|
+
staticClass: "cms-video-container",
|
|
52375
|
+
class: [_vm.configData.customClass || ''],
|
|
52376
|
+
style: _vm.containerStyle
|
|
52377
|
+
}, [_c('div', {
|
|
52378
|
+
staticClass: "f-c-c"
|
|
52379
|
+
}, [_vm._v(_vm._s(_vm.configData.title))]), _c('div', {
|
|
52380
|
+
staticClass: "video-wrapper",
|
|
52381
|
+
style: _vm.wrapperStyle
|
|
52382
|
+
}, [_vm.videoType === 'direct' && _vm.configData.videoUrl ? _c('video', {
|
|
52383
|
+
staticClass: "cms-video direct-video",
|
|
52384
|
+
style: _vm.videoStyle,
|
|
52385
|
+
attrs: {
|
|
52386
|
+
"src": _vm.configData.videoUrl,
|
|
52387
|
+
"controls": _vm.configData.showControls,
|
|
52388
|
+
"autoplay": _vm.configData.autoplay,
|
|
52389
|
+
"loop": _vm.configData.loop,
|
|
52390
|
+
"poster": _vm.configData.posterUrl
|
|
52391
|
+
},
|
|
52392
|
+
domProps: {
|
|
52393
|
+
"muted": _vm.configData.muted
|
|
52394
|
+
},
|
|
52395
|
+
on: {
|
|
52396
|
+
"loadstart": _vm.onVideoLoadStart,
|
|
52397
|
+
"loadeddata": _vm.onVideoLoaded,
|
|
52398
|
+
"error": _vm.onVideoError
|
|
52399
|
+
}
|
|
52400
|
+
}) : _vm.configData.embedCode ? _c('div', {
|
|
52401
|
+
staticClass: "cms-video embed-video",
|
|
52402
|
+
style: _vm.videoStyle,
|
|
52403
|
+
domProps: {
|
|
52404
|
+
"innerHTML": _vm._s(_vm.configData.embedCode)
|
|
52405
|
+
}
|
|
52406
|
+
}) : _c('div', {
|
|
52407
|
+
staticClass: "video-placeholder",
|
|
52408
|
+
style: _vm.placeholderStyle
|
|
52409
|
+
}, [_c('img', {
|
|
52410
|
+
staticStyle: {
|
|
52411
|
+
"width": "97.82px",
|
|
52412
|
+
"height": "97.82px"
|
|
52413
|
+
},
|
|
52414
|
+
attrs: {
|
|
52415
|
+
"src": __webpack_require__(6148),
|
|
52416
|
+
"alt": "Video Camera"
|
|
52417
|
+
}
|
|
52418
|
+
})])])])]);
|
|
52419
|
+
};
|
|
52420
|
+
var staticRenderFns = [];
|
|
52421
|
+
|
|
52422
|
+
;// ./package/cms-video/View.vue?vue&type=template&id=b1a44b52&scoped=true
|
|
52423
|
+
|
|
52424
|
+
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.constructor.js
|
|
52425
|
+
var es_iterator_constructor = __webpack_require__(8111);
|
|
52426
|
+
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.for-each.js
|
|
52427
|
+
var es_iterator_for_each = __webpack_require__(7588);
|
|
52428
|
+
// EXTERNAL MODULE: ./package/baseComp.vue + 5 modules
|
|
52429
|
+
var baseComp = __webpack_require__(5298);
|
|
52430
|
+
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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
|
|
52431
|
+
|
|
52432
|
+
|
|
52433
|
+
|
|
52434
|
+
|
|
52435
|
+
|
|
52436
|
+
/* harmony default export */ var Viewvue_type_script_lang_js = ({
|
|
52437
|
+
name: "cms-video",
|
|
52438
|
+
components: {
|
|
52439
|
+
BaseComp: baseComp["default"]
|
|
52440
|
+
},
|
|
52441
|
+
props: {
|
|
52442
|
+
data: {
|
|
52443
|
+
type: Object,
|
|
52444
|
+
default: () => {
|
|
52445
|
+
return {};
|
|
52446
|
+
}
|
|
52447
|
+
},
|
|
52448
|
+
nowCompId: {
|
|
52449
|
+
type: [String, Number],
|
|
52450
|
+
default: ""
|
|
52451
|
+
},
|
|
52452
|
+
isOpcacity: {
|
|
52453
|
+
type: Boolean,
|
|
52454
|
+
default: true
|
|
52455
|
+
},
|
|
52456
|
+
lang: {
|
|
52457
|
+
type: String,
|
|
52458
|
+
default: "zh-HK"
|
|
52459
|
+
}
|
|
52460
|
+
},
|
|
52461
|
+
data() {
|
|
52462
|
+
return {
|
|
52463
|
+
configData: {},
|
|
52464
|
+
videoLoaded: false,
|
|
52465
|
+
videoError: false,
|
|
52466
|
+
// 默认配置数据
|
|
52467
|
+
defaultConfig: {
|
|
52468
|
+
// 视频源设置
|
|
52469
|
+
videoType: "direct",
|
|
52470
|
+
videoUrl: "",
|
|
52471
|
+
embedCode: "",
|
|
52472
|
+
posterUrl: "",
|
|
52473
|
+
// 播放控制
|
|
52474
|
+
showControls: true,
|
|
52475
|
+
autoplay: false,
|
|
52476
|
+
loop: false,
|
|
52477
|
+
muted: false,
|
|
52478
|
+
// 尺寸控制
|
|
52479
|
+
widthType: "auto",
|
|
52480
|
+
widthValue: 100,
|
|
52481
|
+
heightType: "auto",
|
|
52482
|
+
heightValue: 100,
|
|
52483
|
+
aspectRatio: "16:9",
|
|
52484
|
+
customAspectRatio: "16:9",
|
|
52485
|
+
maxWidth: 0,
|
|
52486
|
+
maxHeight: 0,
|
|
52487
|
+
// 样式设置
|
|
52488
|
+
borderRadius: 0,
|
|
52489
|
+
// 高级配置
|
|
52490
|
+
customClass: "",
|
|
52491
|
+
customStyle: ""
|
|
52492
|
+
}
|
|
52493
|
+
};
|
|
52494
|
+
},
|
|
52495
|
+
mounted() {
|
|
52496
|
+
this.initConfigData();
|
|
52497
|
+
},
|
|
52498
|
+
watch: {
|
|
52499
|
+
configData: {
|
|
52500
|
+
handler() {
|
|
52501
|
+
this.updateStyles();
|
|
52502
|
+
},
|
|
52503
|
+
deep: true
|
|
52504
|
+
}
|
|
52505
|
+
},
|
|
52506
|
+
computed: {
|
|
52507
|
+
// 视频类型
|
|
52508
|
+
videoType() {
|
|
52509
|
+
return this.configData.videoType || this.defaultConfig.videoType;
|
|
52510
|
+
},
|
|
52511
|
+
// 实际使用的宽高比
|
|
52512
|
+
actualAspectRatio() {
|
|
52513
|
+
const config = {
|
|
52514
|
+
...this.defaultConfig,
|
|
52515
|
+
...this.configData
|
|
52516
|
+
};
|
|
52517
|
+
if (config.aspectRatio === "custom") {
|
|
52518
|
+
return config.customAspectRatio || "16:9";
|
|
52519
|
+
}
|
|
52520
|
+
return config.aspectRatio;
|
|
52521
|
+
},
|
|
52522
|
+
// 容器样式
|
|
52523
|
+
containerStyle() {
|
|
52524
|
+
const config = {
|
|
52525
|
+
...this.defaultConfig,
|
|
52526
|
+
...this.configData
|
|
52527
|
+
};
|
|
52528
|
+
return {
|
|
52529
|
+
...this.parseCustomStyle(config.customStyle)
|
|
52530
|
+
};
|
|
52531
|
+
},
|
|
52532
|
+
// 包装器样式
|
|
52533
|
+
wrapperStyle() {
|
|
52534
|
+
const config = {
|
|
52535
|
+
...this.defaultConfig,
|
|
52536
|
+
...this.configData
|
|
52537
|
+
};
|
|
52538
|
+
let width = "auto";
|
|
52539
|
+
let height = "auto";
|
|
52540
|
+
|
|
52541
|
+
// 宽度设置
|
|
52542
|
+
if (config.widthType === "fixed") {
|
|
52543
|
+
width = `${config.widthValue}px`;
|
|
52544
|
+
} else if (config.widthType === "percent") {
|
|
52545
|
+
width = `${config.widthValue}%`;
|
|
52546
|
+
}
|
|
52547
|
+
|
|
52548
|
+
// 高度设置
|
|
52549
|
+
if (config.heightType === "fixed") {
|
|
52550
|
+
height = `${config.heightValue}px`;
|
|
52551
|
+
} else if (config.heightType === "percent") {
|
|
52552
|
+
height = `${config.heightValue}%`;
|
|
52553
|
+
} else if (config.heightType === "aspect") {
|
|
52554
|
+
// 根据宽高比计算高度
|
|
52555
|
+
height = "auto";
|
|
52556
|
+
}
|
|
52557
|
+
return {
|
|
52558
|
+
width,
|
|
52559
|
+
height,
|
|
52560
|
+
maxWidth: config.maxWidth > 0 ? `${config.maxWidth}px` : "none",
|
|
52561
|
+
maxHeight: config.maxHeight > 0 ? `${config.maxHeight}px` : "none",
|
|
52562
|
+
borderRadius: `${config.borderRadius}px`,
|
|
52563
|
+
overflow: "hidden",
|
|
52564
|
+
display: "block",
|
|
52565
|
+
position: "relative"
|
|
52566
|
+
};
|
|
52567
|
+
},
|
|
52568
|
+
// 视频样式
|
|
52569
|
+
videoStyle() {
|
|
52570
|
+
const config = {
|
|
52571
|
+
...this.defaultConfig,
|
|
52572
|
+
...this.configData
|
|
52573
|
+
};
|
|
52574
|
+
let style = {
|
|
52575
|
+
width: "100%",
|
|
52576
|
+
height: "100%",
|
|
52577
|
+
display: "block",
|
|
52578
|
+
border: "none",
|
|
52579
|
+
outline: "none"
|
|
52580
|
+
};
|
|
52581
|
+
|
|
52582
|
+
// 如果是宽高比模式,设置aspect-ratio
|
|
52583
|
+
if (config.heightType === "aspect") {
|
|
52584
|
+
style.aspectRatio = this.actualAspectRatio.replace(":", "/");
|
|
52585
|
+
}
|
|
52586
|
+
return style;
|
|
52587
|
+
},
|
|
52588
|
+
// 占位符样式
|
|
52589
|
+
placeholderStyle() {
|
|
52590
|
+
const config = {
|
|
52591
|
+
...this.defaultConfig,
|
|
52592
|
+
...this.configData
|
|
52593
|
+
};
|
|
52594
|
+
let width = "100%";
|
|
52595
|
+
let height = "auto";
|
|
52596
|
+
|
|
52597
|
+
// 如果设置了固定尺寸,使用设置的尺寸
|
|
52598
|
+
if (config.widthType === "fixed") {
|
|
52599
|
+
width = `${config.widthValue}px`;
|
|
52600
|
+
} else if (config.widthType === "percent") {
|
|
52601
|
+
width = `${config.widthValue}%`;
|
|
52602
|
+
}
|
|
52603
|
+
if (config.heightType === "fixed") {
|
|
52604
|
+
height = `${config.heightValue}px`;
|
|
52605
|
+
} else if (config.heightType === "aspect") {
|
|
52606
|
+
// 使用aspect-ratio保持16:9比例
|
|
52607
|
+
height = "auto";
|
|
52608
|
+
} else {
|
|
52609
|
+
// 默认使用16:9比例
|
|
52610
|
+
height = "auto";
|
|
52611
|
+
}
|
|
52612
|
+
const style = {
|
|
52613
|
+
width,
|
|
52614
|
+
height,
|
|
52615
|
+
backgroundColor: "#f5f7fa",
|
|
52616
|
+
border: "1px dashed #dcdfe6",
|
|
52617
|
+
borderRadius: `${config.borderRadius}px`,
|
|
52618
|
+
display: "flex",
|
|
52619
|
+
flexDirection: "column",
|
|
52620
|
+
alignItems: "center",
|
|
52621
|
+
justifyContent: "center",
|
|
52622
|
+
color: "#909399",
|
|
52623
|
+
fontSize: "14px"
|
|
52624
|
+
};
|
|
52625
|
+
|
|
52626
|
+
// 如果不是固定高度,使用aspect-ratio保持16:9比例
|
|
52627
|
+
if (config.heightType !== "fixed") {
|
|
52628
|
+
style.aspectRatio = this.actualAspectRatio.replace(":", "/");
|
|
52629
|
+
}
|
|
52630
|
+
return style;
|
|
52631
|
+
}
|
|
52632
|
+
},
|
|
52633
|
+
methods: {
|
|
52634
|
+
// 初始化配置数据
|
|
52635
|
+
initConfigData() {
|
|
52636
|
+
this.configData = {
|
|
52637
|
+
...this.defaultConfig,
|
|
52638
|
+
...this.configData
|
|
52639
|
+
};
|
|
52640
|
+
},
|
|
52641
|
+
// 获取配置数据
|
|
52642
|
+
getConfigData(configData) {
|
|
52643
|
+
this.configData = {
|
|
52644
|
+
...this.defaultConfig,
|
|
52645
|
+
...configData
|
|
52646
|
+
};
|
|
52647
|
+
this.updateStyles();
|
|
52648
|
+
},
|
|
52649
|
+
// 更新样式
|
|
52650
|
+
updateStyles() {
|
|
52651
|
+
this.$nextTick(() => {
|
|
52652
|
+
this.$forceUpdate();
|
|
52653
|
+
});
|
|
52654
|
+
},
|
|
52655
|
+
// 视频开始加载
|
|
52656
|
+
onVideoLoadStart() {
|
|
52657
|
+
this.videoLoaded = false;
|
|
52658
|
+
this.videoError = false;
|
|
52659
|
+
},
|
|
52660
|
+
// 视频加载完成
|
|
52661
|
+
onVideoLoaded() {
|
|
52662
|
+
this.videoLoaded = true;
|
|
52663
|
+
this.videoError = false;
|
|
52664
|
+
},
|
|
52665
|
+
// 视频加载失败
|
|
52666
|
+
onVideoError() {
|
|
52667
|
+
this.videoLoaded = false;
|
|
52668
|
+
this.videoError = true;
|
|
52669
|
+
},
|
|
52670
|
+
// 解析自定义样式
|
|
52671
|
+
parseCustomStyle(customStyle) {
|
|
52672
|
+
if (!customStyle) return {};
|
|
52673
|
+
try {
|
|
52674
|
+
const styles = {};
|
|
52675
|
+
const declarations = customStyle.split(";");
|
|
52676
|
+
declarations.forEach(declaration => {
|
|
52677
|
+
const [property, value] = declaration.split(":");
|
|
52678
|
+
if (property && value) {
|
|
52679
|
+
const camelCaseProperty = property.trim().replace(/-([a-z])/g, g => g[1].toUpperCase());
|
|
52680
|
+
styles[camelCaseProperty] = value.trim();
|
|
52681
|
+
}
|
|
52682
|
+
});
|
|
52683
|
+
return styles;
|
|
52684
|
+
} catch (error) {
|
|
52685
|
+
console.warn("解析自定义样式失败:", error);
|
|
52686
|
+
return {};
|
|
52687
|
+
}
|
|
52688
|
+
}
|
|
52689
|
+
}
|
|
52690
|
+
});
|
|
52691
|
+
;// ./package/cms-video/View.vue?vue&type=script&lang=js
|
|
52692
|
+
/* harmony default export */ var cms_video_Viewvue_type_script_lang_js = (Viewvue_type_script_lang_js);
|
|
52693
|
+
;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.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
|
|
52694
|
+
// extracted by mini-css-extract-plugin
|
|
52695
|
+
|
|
52696
|
+
;// ./package/cms-video/View.vue?vue&type=style&index=0&id=b1a44b52&prod&lang=scss&scoped=true
|
|
52697
|
+
|
|
52698
|
+
// EXTERNAL MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
|
|
52699
|
+
var componentNormalizer = __webpack_require__(1656);
|
|
52700
|
+
;// ./package/cms-video/View.vue
|
|
52701
|
+
|
|
52702
|
+
|
|
52703
|
+
|
|
52704
|
+
;
|
|
52705
|
+
|
|
52706
|
+
|
|
52707
|
+
/* normalize component */
|
|
52708
|
+
|
|
52709
|
+
var component = (0,componentNormalizer/* default */.A)(
|
|
52710
|
+
cms_video_Viewvue_type_script_lang_js,
|
|
52711
|
+
render,
|
|
52712
|
+
staticRenderFns,
|
|
52713
|
+
false,
|
|
52714
|
+
null,
|
|
52715
|
+
"b1a44b52",
|
|
52716
|
+
null
|
|
52717
|
+
|
|
52718
|
+
)
|
|
52719
|
+
|
|
52720
|
+
/* harmony default export */ var View = (component.exports);
|
|
52721
|
+
|
|
52723
52722
|
/***/ }),
|
|
52724
52723
|
|
|
52725
52724
|
/***/ 8574:
|