From 9dc592c0c4f4a5ca03ffa9eca8d9a5ec8e2eca41 Mon Sep 17 00:00:00 2001 From: Imshann <851188611@qq.com> Date: Sun, 6 Mar 2022 16:05:51 +0800 Subject: [PATCH] 升级Image和ImagePreviewGroup到新版本 --- build/Image/Image.html | 2 +- build/Image/Image.js | 168 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------------------------- build/ImagePreviewGroup/ImagePreviewGroup.js | 183 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------------------------------------------------------- dist/ng-antd.js | 12 ++++++------ example/image.html | 10 +++++----- package.json | 3 ++- src/Image/Image.html | 2 +- src/Image/Image.js | 45 +++++++++++++++++++++++++-------------------- src/ImagePreviewGroup/ImagePreviewGroup.js | 17 +++++++++++------ temp.txt | 2 ++ webpack.config.js | 4 ++-- yarn.lock | 8 ++++---- 12 files changed, 227 insertions(+), 229 deletions(-) create mode 100644 temp.txt diff --git a/build/Image/Image.html b/build/Image/Image.html index 8954da9..bcb2952 100644 --- a/build/Image/Image.html +++ b/build/Image/Image.html @@ -1,6 +1,6 @@
-
+
预览
diff --git a/build/Image/Image.js b/build/Image/Image.js index e02bbaf..dcba676 100644 --- a/build/Image/Image.js +++ b/build/Image/Image.js @@ -1,68 +1,54 @@ import template from "./Image.html"; import style from "antd/lib/image/style/index.css"; -angular - .module("esNgAntd") - .directive("antdImage", function ($timeout, esNgAntd, $compile) { - return { - controllerAs: "antdImage", - restrict: "E", - transclude: true, - replace: true, - scope: { - src: "@", - dSrc: "@", - width: "@", - height: "@", - preview: "@", - }, - template: template, - controller: function ($scope, $element, $attrs) { - this.getContext = function () { - return $scope; - }; +angular.module("esNgAntd").directive("antdImage", ["$timeout", "esNgAntd", "$compile", function ($timeout, esNgAntd, $compile) { + return { + template: template, + restrict: "E", + replace: true, + transclude: true, + scope: { + src: "@", + dSrc: "@", + width: "=", + height: "=", + preview: "=" + }, + require: ["^?antdImagePreviewGroup"], + controller: function ($scope, $element) { + $scope.watch = { + dSrc: function (newVal) { + if (!["undefined", undefined, null, ""].includes(newVal)) { + $scope.state.hasImage = true; + $scope.state.src = newVal; + } + } + }; + $scope.state = { + src: "data:image/png;base64,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", + // 可见性 + visible: false, + // 有图片？ + hasImage: false, + // 索引 + index: null + }; - $scope.state = { - src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg==", - // 可见性 - visible: false, - // 有图片？ - hasImage: false, - // 索引 - index: null, - }; - $scope.watch = { - dSrc: function (newVal) { - if ( - !["undefined", undefined, null, ""].includes(newVal) - ) { - $scope.state.hasImage = true; - $scope.state.src = newVal; - } - }, - }; + $scope.handleOpen = function () { + if ($scope.antdImagePreviewGroup) { + $scope.antdImagePreviewGroup.handleOpen($scope.state.index); + return; + } - for (const key in $scope.watch) { - $scope.$watch(key, $scope.watch[key], true); - } + $scope.state.visible = true; + }; - $scope.handleOpen = function () { - if ($scope.antdImagePreviewGroup) { - $scope.antdImagePreviewGroup.handleOpen( - $scope.state.index - ); - return; - } + $scope.handleClose = function () { + $scope.state.visible = false; + }; - $scope.state.visible = true; - }; - - $scope.handleClose = function () { - $scope.state.visible = false; - }; - - $scope.handlePreview = function () { - let div = document.createElement("div"); - div.innerHTML = ` + $scope.handlePreview = function () { + let div = document.createElement("div"); + div.innerHTML = `
@@ -85,37 +71,37 @@ angular
`; - document.body.appendChild(div); - $compile(div)($scope); - }; - }, - require: ["?^antdImagePreviewGroup"], - link: function ( - $scope, - $element, - $attrs, - $controllers, - $transclude - ) { - let [antdImagePreviewGroup] = $controllers; - esNgAntd.createStyle("ant-image", style); - let src = $scope.state.src; + document.body.appendChild(div); + $compile(div)($scope); + }; + }, + link: function ($scope, $element, $attrs, $controllers) { + for (const key in $scope.watch) { + $scope.$watch(key, $scope.watch[key], true); + } + + [$element, $attrs, $controllers].forEach(function (value, key) { + if ([undefined, null, ""].includes(value)) { + throw new Error(`${["$element", "$attrs", "$controllers"][key]} parameter of constructor method is required.`); + } + }); + esNgAntd.createStyle("ant-image", style); + let src = $scope.state.src; + let [antdImagePreviewGroup] = $controllers; - $element.children("img")[0].onerror = function () { - $timeout(function () { - $scope.state.hasImage = false; - $scope.state.src = src; - }, 0); - }; + $element.children("img")[0].onerror = function () { + $timeout(function () { + $scope.state.hasImage = false; + $scope.state.src = src; + }, 0); + }; - if (antdImagePreviewGroup) { - $scope.antdImagePreviewGroup = - antdImagePreviewGroup.getContext(); - $scope.state.index = - $scope.antdImagePreviewGroup.addChildren($scope); - } else { - $scope.handlePreview(); - } - }, - }; - }); + if (antdImagePreviewGroup) { + $scope.antdImagePreviewGroup = antdImagePreviewGroup.getContext(); + $scope.state.index = $scope.antdImagePreviewGroup.addChildren($scope); + } else { + $scope.handlePreview(); + } + } + }; +}]); \ No newline at end of file diff --git a/build/ImagePreviewGroup/ImagePreviewGroup.js b/build/ImagePreviewGroup/ImagePreviewGroup.js index 75e2ce8..2314a5f 100644 --- a/build/ImagePreviewGroup/ImagePreviewGroup.js +++ b/build/ImagePreviewGroup/ImagePreviewGroup.js @@ -1,92 +1,90 @@ import template from "./ImagePreviewGroup.html"; -angular - .module("esNgAntd") - .directive("antdImagePreviewGroup", function (esNgAntd) { - return { - controllerAs: "antdImagePreviewGroup", - restrict: "E", - transclude: true, - replace: true, - scope: { - preview: "=", - }, - template: template, - controller: function ($scope, $element, $attrs) { - this.getContext = function () { - return $scope; - }; +angular.module("esNgAntd").directive("antdImagePreviewGroup", ["esNgAntd", function (esNgAntd) { + return { + template: template, + restrict: "E", + replace: true, + transclude: true, + scope: { + preview: "=" + }, + controller: function ($scope, $element, $attrs) { + $scope.state = { + current: 0, + visible: false, + src: null, + childrens: [] + }; - $scope.state = { - current: 0, - visible: false, - src: null, - childrens: [], - }; + $scope.addChildren = function (children) { + [children].forEach(function (value, key) { + if ([undefined, null, ""].includes(value)) { + throw new Error(`${["children"][key]} parameter of addChildren method is required.`); + } + }); + $scope.state.childrens.push(children); + return $scope.state.childrens.length - 1; + }; - $scope.addChildren = function (children) { - $scope.state.childrens.push(children); - return $scope.state.childrens.length - 1; - }; + $scope.setCurrent = function (value) { + [value].forEach(function (value, key) { + if ([undefined, null, ""].includes(value)) { + throw new Error(`${["value"][key]} parameter of setCurrent method is required.`); + } + }); + $scope.state.current = value; - $scope.setCurrent = function (value) { - $scope.state.current = value; + if (typeof $scope.preview === "object" && typeof $scope.preview.onCurrentChange === "function") { + $scope.preview.onCurrentChange(value); + } + }; - if ( - typeof $scope.preview === "object" && - typeof $scope.preview.onCurrentChange === "function" - ) { - $scope.preview.onCurrentChange(value); - } - }; + $scope.setVisible = function (value) { + [value].forEach(function (value, key) { + if ([undefined, null, ""].includes(value)) { + throw new Error(`${["value"][key]} parameter of setVisible method is required.`); + } + }); + $scope.state.visible = value; - $scope.setVisible = function (value) { - $scope.state.visible = value; + if (typeof $scope.preview === "object" && typeof $scope.preview.onVisibleChange === "function") { + $scope.preview.onVisibleChange(value); + } + }; - if ( - typeof $scope.preview === "object" && - typeof $scope.preview.onVisibleChange === "function" - ) { - $scope.preview.onVisibleChange(value); - } - }; + $scope.handleOpen = function (index) { + [index].forEach(function (value, key) { + if ([undefined, null, ""].includes(value)) { + throw new Error(`${["index"][key]} parameter of handleOpen method is required.`); + } + }); + $scope.setCurrent(index); + $scope.state.src = $scope.state.childrens[index].state.src; + $scope.setVisible(true); + }; - $scope.handleOpen = function (index) { - $scope.setCurrent(index); - $scope.state.src = $scope.state.childrens[index].state.src; - $scope.setVisible(true); - }; + $scope.handleClose = function () { + $scope.setVisible(false); + }; - $scope.handleClose = function () { - $scope.setVisible(false); - }; + $scope.handlePrev = function () { + $scope.setCurrent($scope.state.current > 0 ? $scope.state.current - 1 : 0); + $scope.state.src = $scope.state.childrens[$scope.state.current].state.src; + }; - $scope.handlePrev = function () { - $scope.setCurrent( - $scope.state.current > 0 ? $scope.state.current - 1 : 0 - ); - $scope.state.src = - $scope.state.childrens[$scope.state.current].state.src; - }; + $scope.handleNext = function () { + $scope.setCurrent($scope.state.current < $scope.state.childrens.length - 1 ? $scope.state.current + 1 : $scope.state.childrens.length - 1); + $scope.state.src = $scope.state.childrens[$scope.state.current].state.src; + }; - $scope.handleNext = function () { - $scope.setCurrent( - $scope.state.current < $scope.state.childrens.length - 1 - ? $scope.state.current + 1 - : $scope.state.childrens.length - 1 - ); - $scope.state.src = - $scope.state.childrens[$scope.state.current].state.src; - }; + $scope.handlePreview = function () { + let className; - $scope.handlePreview = function () { - let className; + if ($attrs.class) { + className = ` ${$attrs.class}`; + } - if ($attrs.class) { - className = ` ${$attrs.class}`; - } - - esNgAntd.createLayer( - ` + esNgAntd.createLayer(`
@@ -114,19 +112,20 @@ angular
- `, - $scope - ); - }; - }, - link: function ( - $scope, - $element, - $attrs, - $controllers, - $transclude - ) { - $scope.handlePreview(); - }, - }; - }); + `, $scope); + }; + + this.getContext = function () { + return $scope; + }; + }, + link: function ($scope, $element, $attrs) { + [$element, $attrs].forEach(function (value, key) { + if ([undefined, null, ""].includes(value)) { + throw new Error(`${["$element", "$attrs"][key]} parameter of constructor method is required.`); + } + }); + $scope.handlePreview(); + } + }; +}]); \ No newline at end of file diff --git a/dist/ng-antd.js b/dist/ng-antd.js index 33dc35f..f51d666 100644 --- a/dist/ng-antd.js +++ b/dist/ng-antd.js @@ -170,7 +170,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _ant /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Image_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Image.html */ \"./build/Image/Image.html\");\n/* harmony import */ var antd_lib_image_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/image/style/index.css */ \"./node_modules/antd/lib/image/style/index.css\");\n\n\nangular\n .module(\"esNgAntd\")\n .directive(\"antdImage\", function ($timeout, esNgAntd, $compile) {\n return {\n controllerAs: \"antdImage\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n src: \"@\",\n dSrc: \"@\",\n width: \"@\",\n height: \"@\",\n preview: \"@\",\n },\n template: _Image_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n controller: function ($scope, $element, $attrs) {\n this.getContext = function () {\n return $scope;\n };\n\n $scope.state = {\n src: \"data:image/png;base64,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\",\n // 可见性\n visible: false,\n // 有图片？\n hasImage: false,\n // 索引\n index: null,\n };\n\n $scope.handleOpen = function () {\n if ($scope.antdImagePreviewGroup) {\n $scope.antdImagePreviewGroup.handleOpen(\n $scope.state.index\n );\n return;\n }\n\n $scope.state.visible = true;\n };\n\n $scope.handleClose = function () {\n $scope.state.visible = false;\n };\n\n $scope.handlePreview = function () {\n let div = document.createElement(\"div\");\n div.innerHTML = `\n
\n
\n
\n
\n
\n
\n
    \n
  • \n \n \n \n
    • \n
\n
\n \n
\n
\n
\n
\n
\n
\n `;\n document.body.appendChild(div);\n $compile(div)($scope);\n };\n },\n require: [\"?^antdImagePreviewGroup\"],\n link: function (\n $scope,\n $element,\n $attrs,\n $controllers,\n $transclude\n ) {\n let [antdImagePreviewGroup] = $controllers;\n esNgAntd.createStyle(\"ant-image\", antd_lib_image_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n let src = $scope.state.src;\n\n $element.children(\"img\")[0].onerror = function () {\n $timeout(function () {\n $scope.state.hasImage = false;\n $scope.state.src = src;\n }, 0);\n };\n\n if (\n $scope.dSrc !== \"undefined\" &&\n $scope.dSrc !== undefined &&\n $scope.dSrc !== null &&\n $scope.dSrc !== \"\"\n ) {\n $scope.state.hasImage = true;\n $scope.state.src = $scope.dSrc;\n }\n\n if (antdImagePreviewGroup) {\n $scope.antdImagePreviewGroup =\n antdImagePreviewGroup.getContext();\n $scope.state.index =\n $scope.antdImagePreviewGroup.addChildren($scope);\n } else {\n $scope.handlePreview();\n }\n },\n };\n });\n\n\n//# sourceURL=webpack://ng-antd/./build/Image/Image.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Image_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Image.html */ \"./build/Image/Image.html\");\n/* harmony import */ var antd_lib_image_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/image/style/index.css */ \"./node_modules/antd/lib/image/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdImage\", [\"$timeout\", \"esNgAntd\", \"$compile\", function ($timeout, esNgAntd, $compile) {\n return {\n template: _Image_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n src: \"@\",\n dSrc: \"@\",\n width: \"=\",\n height: \"=\",\n preview: \"=\"\n },\n require: [\"^?antdImagePreviewGroup\"],\n controller: function ($scope, $element) {\n $scope.watch = {\n dSrc: function (newVal) {\n if (![\"undefined\", undefined, null, \"\"].includes(newVal)) {\n $scope.state.hasImage = true;\n $scope.state.src = newVal;\n }\n }\n };\n $scope.state = {\n src: \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg==\",\n // 可见性\n visible: false,\n // 有图片？\n hasImage: false,\n // 索引\n index: null\n };\n\n $scope.handleOpen = function () {\n if ($scope.antdImagePreviewGroup) {\n $scope.antdImagePreviewGroup.handleOpen($scope.state.index);\n return;\n }\n\n $scope.state.visible = true;\n };\n\n $scope.handleClose = function () {\n $scope.state.visible = false;\n };\n\n $scope.handlePreview = function () {\n let div = document.createElement(\"div\");\n div.innerHTML = `\n
\n
\n
\n
\n
\n
\n
    \n
  • \n \n \n \n
    • \n
\n
\n \n
\n
\n
\n
\n
\n
\n `;\n document.body.appendChild(div);\n $compile(div)($scope);\n };\n },\n link: function ($scope, $element, $attrs, $controllers) {\n for (const key in $scope.watch) {\n $scope.$watch(key, $scope.watch[key], true);\n }\n\n [$element, $attrs, $controllers].forEach(function (value, key) {\n if ([undefined, null, \"\"].includes(value)) {\n throw new Error(`${[\"$element\", \"$attrs\", \"$controllers\"][key]} parameter of constructor method is required.`);\n }\n });\n esNgAntd.createStyle(\"ant-image\", antd_lib_image_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n let src = $scope.state.src;\n let [antdImagePreviewGroup] = $controllers;\n\n $element.children(\"img\")[0].onerror = function () {\n $timeout(function () {\n $scope.state.hasImage = false;\n $scope.state.src = src;\n }, 0);\n };\n\n if (antdImagePreviewGroup) {\n $scope.antdImagePreviewGroup = antdImagePreviewGroup.getContext();\n $scope.state.index = $scope.antdImagePreviewGroup.addChildren($scope);\n } else {\n $scope.handlePreview();\n }\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Image/Image.js?"); /***/ }), @@ -181,7 +181,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Ima /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _ImagePreviewGroup_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ImagePreviewGroup.html */ \"./build/ImagePreviewGroup/ImagePreviewGroup.html\");\n\nangular\n .module(\"esNgAntd\")\n .directive(\"antdImagePreviewGroup\", function (esNgAntd) {\n return {\n controllerAs: \"antdImagePreviewGroup\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n preview: \"=\",\n },\n template: _ImagePreviewGroup_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n controller: function ($scope, $element, $attrs) {\n this.getContext = function () {\n return $scope;\n };\n\n $scope.state = {\n current: 0,\n visible: false,\n src: null,\n childrens: [],\n };\n\n $scope.addChildren = function (children) {\n $scope.state.childrens.push(children);\n return $scope.state.childrens.length - 1;\n };\n\n $scope.setCurrent = function (value) {\n $scope.state.current = value;\n\n if (\n typeof $scope.preview === \"object\" &&\n typeof $scope.preview.onCurrentChange === \"function\"\n ) {\n $scope.preview.onCurrentChange(value);\n }\n };\n\n $scope.setVisible = function (value) {\n $scope.state.visible = value;\n\n if (\n typeof $scope.preview === \"object\" &&\n typeof $scope.preview.onVisibleChange === \"function\"\n ) {\n $scope.preview.onVisibleChange(value);\n }\n };\n\n $scope.handleOpen = function (index) {\n $scope.setCurrent(index);\n $scope.state.src = $scope.state.childrens[index].state.src;\n $scope.setVisible(true);\n };\n\n $scope.handleClose = function () {\n $scope.setVisible(false);\n };\n\n $scope.handlePrev = function () {\n $scope.setCurrent(\n $scope.state.current > 0 ? $scope.state.current - 1 : 0\n );\n $scope.state.src =\n $scope.state.childrens[$scope.state.current].state.src;\n };\n\n $scope.handleNext = function () {\n $scope.setCurrent(\n $scope.state.current < $scope.state.childrens.length - 1\n ? $scope.state.current + 1\n : $scope.state.childrens.length - 1\n );\n $scope.state.src =\n $scope.state.childrens[$scope.state.current].state.src;\n };\n\n $scope.handlePreview = function () {\n let className;\n\n if ($attrs.class) {\n className = ` ${$attrs.class}`;\n }\n\n esNgAntd.createLayer(\n `\n
\n
\n
\n
\n
\n
\n
    \n
  • \n \n \n \n
    • \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n `,\n $scope\n );\n };\n },\n link: function (\n $scope,\n $element,\n $attrs,\n $controllers,\n $transclude\n ) {\n $scope.handlePreview();\n },\n };\n });\n\n\n//# sourceURL=webpack://ng-antd/./build/ImagePreviewGroup/ImagePreviewGroup.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _ImagePreviewGroup_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ImagePreviewGroup.html */ \"./build/ImagePreviewGroup/ImagePreviewGroup.html\");\n\nangular.module(\"esNgAntd\").directive(\"antdImagePreviewGroup\", [\"esNgAntd\", function (esNgAntd) {\n return {\n template: _ImagePreviewGroup_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n preview: \"=\"\n },\n controller: function ($scope, $element, $attrs) {\n $scope.state = {\n current: 0,\n visible: false,\n src: null,\n childrens: []\n };\n\n $scope.addChildren = function (children) {\n [children].forEach(function (value, key) {\n if ([undefined, null, \"\"].includes(value)) {\n throw new Error(`${[\"children\"][key]} parameter of addChildren method is required.`);\n }\n });\n $scope.state.childrens.push(children);\n return $scope.state.childrens.length - 1;\n };\n\n $scope.setCurrent = function (value) {\n [value].forEach(function (value, key) {\n if ([undefined, null, \"\"].includes(value)) {\n throw new Error(`${[\"value\"][key]} parameter of setCurrent method is required.`);\n }\n });\n $scope.state.current = value;\n\n if (typeof $scope.preview === \"object\" && typeof $scope.preview.onCurrentChange === \"function\") {\n $scope.preview.onCurrentChange(value);\n }\n };\n\n $scope.setVisible = function (value) {\n [value].forEach(function (value, key) {\n if ([undefined, null, \"\"].includes(value)) {\n throw new Error(`${[\"value\"][key]} parameter of setVisible method is required.`);\n }\n });\n $scope.state.visible = value;\n\n if (typeof $scope.preview === \"object\" && typeof $scope.preview.onVisibleChange === \"function\") {\n $scope.preview.onVisibleChange(value);\n }\n };\n\n $scope.handleOpen = function (index) {\n [index].forEach(function (value, key) {\n if ([undefined, null, \"\"].includes(value)) {\n throw new Error(`${[\"index\"][key]} parameter of handleOpen method is required.`);\n }\n });\n $scope.setCurrent(index);\n $scope.state.src = $scope.state.childrens[index].state.src;\n $scope.setVisible(true);\n };\n\n $scope.handleClose = function () {\n $scope.setVisible(false);\n };\n\n $scope.handlePrev = function () {\n $scope.setCurrent($scope.state.current > 0 ? $scope.state.current - 1 : 0);\n $scope.state.src = $scope.state.childrens[$scope.state.current].state.src;\n };\n\n $scope.handleNext = function () {\n $scope.setCurrent($scope.state.current < $scope.state.childrens.length - 1 ? $scope.state.current + 1 : $scope.state.childrens.length - 1);\n $scope.state.src = $scope.state.childrens[$scope.state.current].state.src;\n };\n\n $scope.handlePreview = function () {\n let className;\n\n if ($attrs.class) {\n className = ` ${$attrs.class}`;\n }\n\n esNgAntd.createLayer(`\n
\n
\n
\n
\n
\n
\n
    \n
  • \n \n \n \n
    • \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n `, $scope);\n };\n\n this.getContext = function () {\n return $scope;\n };\n },\n link: function ($scope, $element, $attrs) {\n [$element, $attrs].forEach(function (value, key) {\n if ([undefined, null, \"\"].includes(value)) {\n throw new Error(`${[\"$element\", \"$attrs\"][key]} parameter of constructor method is required.`);\n }\n });\n $scope.handlePreview();\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/ImagePreviewGroup/ImagePreviewGroup.js?"); /***/ }), @@ -367,7 +367,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Sel \****************************/ /***/ (() => { -eval("angular.module(\"esNgAntd\").directive(\"antdSlot\", function ($compile) {\n return {\n controllerAs: \"antdSlot\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n content: \"@\",\n context: \"=\",\n },\n controller: function ($scope, $element, $attrs) {\n this.getContext = function () {\n return $scope;\n };\n\n $scope.watch = {\n content: (newValue) => {\n if (newValue !== undefined) {\n if (/<[^>]+>/.test(newValue)) {\n $scope.parentElement.empty().append(\n $compile(newValue)(\n $scope.context ? $scope.context : $scope\n )\n );\n } else {\n $element.text(newValue);\n }\n }\n },\n };\n\n for (const key in $scope.watch) {\n $scope.$watch(key, $scope.watch[key], true);\n }\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n $scope.parentElement = $element.parent();\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Slot/Slot.js?"); +eval("angular.module(\"esNgAntd\").directive(\"antdSlot\", function ($compile) {\n return {\n controllerAs: \"antdSlot\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n content: \"@\",\n context: \"=\",\n },\n controller: function ($scope, $element, $attrs) {\n this.getContext = function () {\n return $scope;\n };\n\n $scope.watch = {\n content: (newValue) => {\n if (newValue !== undefined) {\n if (/<[^>]+>/.test(newValue)) {\n $scope.parentElement\n .empty()\n .append(\n $compile(newValue)(\n $scope.context ? $scope.context : $scope\n )\n );\n } else {\n $element.text(newValue);\n }\n }\n },\n };\n\n for (const key in $scope.watch) {\n $scope.$watch(key, $scope.watch[key], true);\n }\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n $scope.parentElement = $element.parent();\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Slot/Slot.js?"); /***/ }), @@ -9562,7 +9562,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"
\\n \\n
\\n
\\n 预览\\n
\\n
\\n
\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Image/Image.html?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"
\\n \\n
\\n
\\n 预览\\n
\\n
\\n
\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Image/Image.html?"); /***/ }), @@ -9639,7 +9639,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"
\\n
\\n
\\n
\\n
\\n
\\n \\n
\\n
{{title}}
\\n
\\n
\\n
\\n
\\n {{state.cancelText}}\\n {{state.okText}}\\n
\\n
\\n
\\n \\n
\\n
\\n
\\n
\\n
\\n
\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Modal/Modal.html?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"
\\n
\\n
\\n
\\n
\\n
\\n \\n
\\n
{{title}}
\\n
\\n
\\n
\\n
\\n {{state.cancelText}}\\n {{state.okText}}\\n
\\n
\\n
\\n \\n
\\n
\\n
\\n
\\n
\\n
\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Modal/Modal.html?"); /***/ }), @@ -9793,7 +9793,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"
\\n \\n
\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Textarea/Textarea.html?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"
\\n \\n
\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Textarea/Textarea.html?"); /***/ }), diff --git a/example/image.html b/example/image.html index 4c04ee5..968efc5 100644 --- a/example/image.html +++ b/example/image.html @@ -12,12 +12,12 @@
- + - - - - + + + +
diff --git a/package.json b/package.json index fc3ae26..72080b3 100644 --- a/package.json +++ b/package.json @@ -6,13 +6,14 @@ "scripts": { "build": "beanboom -s ./src/ -o ./build/ -t angular", "watch": "npx beanboom -s ./src/ -o ./build/ -t angular -w", + "bwatch": "npx beanboom build -s ./src/ -o ./build/ -t angular -w", "wp": "npx webpack --watch", "wpb": "npx webpack" }, "devDependencies": { "@ant-design/icons-svg": "^4.2.1", "antd": "^4.18.2", - "beanboom": "0.8.7", + "beanboom": "^0.10.0-beta7", "css-loader": "^6.5.1", "html-loader": "^3.0.1", "style-loader": "^3.3.1", diff --git a/src/Image/Image.html b/src/Image/Image.html index c709b2c..28470da 100644 --- a/src/Image/Image.html +++ b/src/Image/Image.html @@ -4,7 +4,7 @@ style={{ width: '100%', height: height + 'px' }} src={state.src} /> - {preview !== "false" && state.hasImage &&
+ {preview !== false && state.hasImage &&
预览
diff --git a/src/Image/Image.js b/src/Image/Image.js index b5d888a..8168aaa 100644 --- a/src/Image/Image.js +++ b/src/Image/Image.js @@ -2,13 +2,6 @@ import template from "./Image.html"; import style from "antd/lib/image/style/index.css"; class Image { - props = { - src: String, - dSrc: String, - width: Number, - height: Number, - preview: Boolean - }; state = { src: "data:image/png;base64,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", // 可见性 @@ -19,24 +12,15 @@ class Image { index: null, }; - template = template; - - require = ["antdImagePreviewGroup"] + require = ["^?antdImagePreviewGroup"]; useModules = ["$timeout", "esNgAntd", "$compile"]; - watch = { - dSrc: function (newVal) { - if (!["undefined", undefined, null, ""].includes(newVal)) { - this.state.hasImage = true; - this.state.src = newVal; - } - } - } - - constructor(antdImagePreviewGroup) { + constructor($element, $attrs, $controllers) { esNgAntd.createStyle("ant-image", style); let src = this.state.src; + let [antdImagePreviewGroup] = $controllers; + $element.children("img")[0].onerror = function () { $timeout(function () { this.state.hasImage = false; @@ -52,6 +36,15 @@ class Image { } } + componentDidUpdate() { + if (prevProps.dSrc !== this.props.dSrc) { + if (!["undefined", undefined, null, ""].includes(newVal)) { + this.state.hasImage = true; + this.state.src = newVal; + } + } + } + handleOpen() { if (this.antdImagePreviewGroup) { this.antdImagePreviewGroup.handleOpen(this.state.index); @@ -92,4 +85,16 @@ class Image { document.body.appendChild(div); $compile(div)($scope); } + + render() { + return template; + } } + +Image.propTypes = { + src: PropTypes.string, + dSrc: PropTypes.string, + width: PropTypes.number, + height: PropTypes.number, + preview: PropTypes.boolean, +}; diff --git a/src/ImagePreviewGroup/ImagePreviewGroup.js b/src/ImagePreviewGroup/ImagePreviewGroup.js index 56a1f73..7e6df7e 100644 --- a/src/ImagePreviewGroup/ImagePreviewGroup.js +++ b/src/ImagePreviewGroup/ImagePreviewGroup.js @@ -1,13 +1,10 @@ import template from "./ImagePreviewGroup.html"; class ImagePreviewGroup { - useModules = ["esNgAntd"]; - props = { - preview: Object, - }; + useModules = ["esNgAntd"]; - template = template; + context = true; state = { current: 0, @@ -16,7 +13,7 @@ class ImagePreviewGroup { childrens: [], }; - constructor() { + constructor($element, $attrs) { this.handlePreview(); } @@ -107,4 +104,12 @@ class ImagePreviewGroup { $scope ); } + + render() { + return template; + } +} + +ImagePreviewGroup.propTypes = { + preview: propTypes.object } diff --git a/temp.txt b/temp.txt new file mode 100644 index 0000000..b8ad4b7 --- /dev/null +++ b/temp.txt @@ -0,0 +1,2 @@ +image + preview=["']{{(.*?)}}["'] => preview="false" \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 700bc4e..075a231 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -10,9 +10,9 @@ module.exports = { // boss // path: "/Users/shann/Project/essa/boss/trunk/vendor-lib/ng-antd", // mvo - path: "/Users/shann/Project/essa/mvo/mvo-webapp/public/browser-vendor/ng-antd", + // path: "/Users/shann/Project/essa/mvo/mvo-webapp/public/browser-vendor/ng-antd", // local - // path: path.resolve(__dirname, "dist"), + path: path.resolve(__dirname, "dist"), filename: "ng-antd.js", }, module: { diff --git a/yarn.lock b/yarn.lock index d8808a9..0cd1faa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1320,10 +1320,10 @@ babel-plugin-polyfill-regenerator@^0.2.3: dependencies: "@babel/helper-define-polyfill-provider" "^0.2.4" -beanboom@0.8.7: - version "0.8.7" - resolved "https://registry.npmmirror.com/beanboom/download/beanboom-0.8.7.tgz#64c3b6b874bd8c271ee1dfd9babfaa9a621ec1d6" - integrity sha512-/P0cRqcxybyx/ynRd9K12n++OrVj/NTUW5lJQ6ToqbrY/JPIHvGQGZnnLyQ1thzSIKl+0jaz/pvHlRF1TYOc7Q== +beanboom@^0.10.0-beta7: + version "0.10.0-beta7" + resolved "https://registry.npmmirror.com/beanboom/-/beanboom-0.10.0-beta7.tgz#ccddfcd4d335bcdc415ca2711a9bf817ffe58c3e" + integrity sha512-UnXoRlXsqR2NoLRpIphOVzKIGixwsN5jmYGzD5xjwzO1Qw9019YevExLvaeUFtlBOAgicBy1iwhbm82Ivw8sHQ== dependencies: "@babel/core" "^7.12.10" "@babel/plugin-proposal-class-properties" "^7.13.0" -- libgit2 0.21.2