fix

.babelrc

@@ -50,6 +50,9 @@
       }
     ],
     ["@babel/plugin-syntax-dynamic-import"],
+    ["@babel/plugin-transform-modules-commonjs", {
+      "loose": true
+    }], // This plugin transforms ES2015 modules to CommonJS
     ["@babel/plugin-transform-arrow-functions", { "spec": false }],
     ["@babel/plugin-proposal-class-properties", { "loose": true }],
     ["react-hot-loader/babel"]

package.json

@@ -37,17 +37,19 @@
     "@babel/plugin-proposal-decorators": "^7.6.0",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-arrow-functions": "^7.2.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.7.0",
     "@babel/plugin-transform-runtime": "^7.6.2",
-    "@babel/polyfill": "^7.6.0",
+    "@babel/polyfill": "^7.7.0",
     "@babel/preset-env": "^7.6.3",
     "@babel/preset-react": "^7.6.3",
     "@babel/register": "^7.6.2",
+    "@babel/runtime": "^7.7.2",
     "@babel/runtime-corejs3": "^7.6.3",
     "@hot-loader/react-dom": "^16.10.2",
     "autoprefixer": "^9.7.0",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
-    "core-js": "^3.3.5",
+    "core-js": "^3.4.1",
     "cross-env": "^6.0.3",
     "css-loader": "^3.2.0",
     "eslint": "^6.6.0",

src/styles/index.less

@@ -10,4 +10,5 @@
   /* IE 6/7/8/9/10 */
   z-index: -@zIndex\8\9\0; /* stylelint-disable-line */
   z-index/*\**/: -@zIndex\9; /* stylelint-disable-line */
+  overflow: hidden;
 }

src/utils/drawSvg.js

@@ -1,3 +1,5 @@
+import style from '@styles';
+
 export default function drawSvg() {
   const {
     can,
@@ -12,11 +14,13 @@ export default function drawSvg() {
     svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
     svg.setAttribute('version', '1.1');
     isCreateSvg = true;
+    this.can = svg;
   }
+  // svg.className = style.waterMark;
+  svg.setAttribute('class', style.waterMark);
   svg.setAttribute(
     'style',
-    `z-index:200;
-    font-weight:${textStyle.fontWeight};font-size:${
+    `font-weight:${textStyle.fontWeight};font-size:${
       textStyle.fontSize
     };font-family:${textStyle.font};
     background:${textStyle.background};
@@ -59,7 +63,7 @@ export default function drawSvg() {
           'tspan'
         );
         svgTspan.textContent = text[t];
-        svgTspan.setAttribute('x', x + this.w / 2);
+        svgTspan.setAttribute('x', x);
         svgTspan.setAttribute('y', y + stratYOffset + offset * t);
         // append
         svgText.appendChild(svgTspan);
@@ -68,7 +72,7 @@ export default function drawSvg() {
     }
   }
   svg.setAttribute('fill', textStyle.color);
-  svg.innerHTML = '';
+  svg.textContent = '';
   svg.appendChild(fragment);
   if (isCreateSvg) {
     document.body.appendChild(svg);

src/watermark/native/index.js

@@ -31,7 +31,7 @@ NativeWaterMark.prototype = {
     }
     this.ie = !!window['ActiveXObject'] || 'ActiveXObject' in window;
     // ie11以下不兼容pointer-event,故使用svg
-    this.draw = !!window['ActiveXObject'] ? drawSvg : drawCanvas;
+    this.draw = window['ActiveXObject'] ? drawSvg : drawCanvas;
 
     this.initWaterMark();
     this.loadWaterMark();
@@ -61,7 +61,5 @@ NativeWaterMark.prototype = {
   }
 };
 
-export {
-  NativeWaterMark
-}
+export { NativeWaterMark };
 export default NativeWaterMark;

src/watermark/react/index.jsx

@@ -8,7 +8,9 @@ import { canRedraw, drawCanvas, drawSvg } from '@utils/draw';
 import { addEventListen } from '@utils/eventListener';
 import style from '@styles';
 // 保证script的native使用
-export default class WaterMark extends (typeof React === 'object' ? React.PureComponent : Object) {
+export default class WaterMark extends (typeof React === 'object'
+  ? React.PureComponent
+  : Object) {
   loadWaterMark = loadWaterMark;
   initWaterMark = initWaterMark('waterMark');
   constructor(props) {
@@ -28,13 +30,13 @@ export default class WaterMark extends (typeof React === 'object' ? React.PureCo
      **/
     this.ie = !!window['ActiveXObject'] || 'ActiveXObject' in window; // eslint-disable-line
     // ie11以下不兼容pointer-event,故使用svg
-    this.draw = !!window['ActiveXObject'] ? drawSvg : drawCanvas;
+    this.draw = window['ActiveXObject'] ? drawSvg : drawCanvas;
     this.initWaterMark();
     this.loadWaterMark();
   }
 
   render() {
-    if (!!window['ActiveXObject']) {
+    if (window['ActiveXObject']) {
       return <svg className={style.waterMark} ref={this.canvas}></svg>;
     }
     return <canvas className={style.waterMark} ref={this.canvas}></canvas>;

webpack/prod.config.js

@@ -59,8 +59,12 @@ module.exports = merge(WebpackCommonConfig, {
           ie8: true, // 支持ie8
           ecma: 8,
           mangle: true,
+          // mangleProperties: {
+          //   screw_ie8: false,
+          //   except: ['e']
+          // },
           compress: {
-            properties: true,
+            properties: false, // 是否将常量属性名转为调用表达式。如 a["foo"] → a.foo。
             // 在UglifyJs删除没有用到的代码时不输出警告
             // warnings: false,
             // 删除所有的 `console` 语句，可以兼容ie浏览器