@web-utils/component 2.7.30 → 2.7.32

package/dist/components/sign/index.mjs

@@ -0,0 +1,236 @@
+import { s as setPx } from "../../chunks/util.b0d0b0ad.mjs";
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.9c6b8b3d.mjs";
+var render = function() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", {
+    staticClass: "avue-sige"
+  }, [_c("canvas", {
+    ref: "canvas",
+    staticClass: "avue-sige__canvas",
+    attrs: {
+      "width": _vm.width,
+      "height": _vm.height
+    }
+  })]);
+};
+var staticRenderFns = [];
+const Sign_vue_vue_type_style_index_0_lang = "";
+function create5star(context, sx, sy, radius, color, rotato) {
+  context.save();
+  context.fillStyle = color;
+  context.translate(sx, sy);
+  context.rotate(Math.PI + rotato);
+  context.beginPath();
+  var x = Math.sin(0);
+  var y = Math.cos(0);
+  const dig = Math.PI / 5 * 4;
+  for (let i = 0; i < 5; i++) {
+    var x = Math.sin(i * dig);
+    var y = Math.cos(i * dig);
+    context.lineTo(x * radius, y * radius);
+  }
+  context.closePath();
+  context.stroke();
+  context.fill();
+  context.restore();
+}
+const __vue2_script = {
+  name: "Sign",
+  props: {
+    width: {
+      type: Number,
+      default: 600
+    },
+    height: {
+      type: Number,
+      default: 400
+    }
+  },
+  data() {
+    return {
+      disabled: false,
+      linex: [],
+      liney: [],
+      linen: [],
+      canvas: {},
+      context: {}
+    };
+  },
+  computed: {
+    styleName() {
+      return {
+        width: setPx(this.width),
+        height: setPx(this.height)
+      };
+    }
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    getStar(text, text1, text2) {
+      const canvas = this.canvas;
+      const context = this.context;
+      const width = canvas.width / 2;
+      const height = canvas.height / 2;
+      context.lineWidth = 7;
+      context.strokeStyle = "#f00";
+      context.beginPath();
+      context.arc(width, height, 110, 0, Math.PI * 2);
+      context.stroke();
+      create5star(context, width, height, 20, "#f00", 0);
+      context.font = "18px 黑体";
+      context.textBaseline = "middle";
+      context.textAlign = "center";
+      context.lineWidth = 1;
+      context.strokeStyle = "#f00";
+      context.strokeText(text, width, height + 50);
+      context.font = "14px 黑体";
+      context.textBaseline = "middle";
+      context.textAlign = "center";
+      context.lineWidth = 1;
+      context.strokeStyle = "#f00";
+      context.strokeText(text2, width, height + 80);
+      context.translate(width, height);
+      context.font = "22px 黑体";
+      const count = text1.length;
+      const angle = 4 * Math.PI / (3 * (count - 1));
+      const chars = text1.split("");
+      let c;
+      for (let i = 0; i < count; i++) {
+        c = chars[i];
+        if (i == 0)
+          context.rotate(5 * Math.PI / 6);
+        else {
+          context.rotate(angle);
+        }
+        context.save();
+        context.translate(90, 0);
+        context.rotate(Math.PI / 2);
+        context.strokeText(c, 0, 0);
+        context.restore();
+        context.save();
+      }
+      this.disabled = true;
+    },
+    submit(width, height) {
+      if (!width)
+        width = this.width;
+      if (!height)
+        height = this.height;
+      return this.canvas.toDataURL("i/png");
+    },
+    clear() {
+      this.linex = [];
+      this.liney = [];
+      this.linen = [];
+      this.disabled = false;
+    },
+    init() {
+      this.canvas = this.$refs.canvas;
+      const canvas = this.canvas;
+      const _safe = this;
+      if (typeof document.ontouchstart !== "undefined") {
+        canvas.addEventListener("touchmove", onMouseMove, false);
+        canvas.addEventListener("touchstart", onMouseDown, false);
+        canvas.addEventListener("touchend", onMouseUp, false);
+      } else {
+        canvas.addEventListener("mousemove", onMouseMove, false);
+        canvas.addEventListener("mousedown", onMouseDown, false);
+        canvas.addEventListener("mouseup", onMouseUp, false);
+        canvas.addEventListener("mouseleave", onMouseUp, false);
+      }
+      this.context = canvas.getContext("2d");
+      const context = this.context;
+      this.linex = [];
+      this.liney = [];
+      this.linen = [];
+      let lastX = 1;
+      let lastY = 30;
+      let flag = 0;
+      function getCanvasPos(canvas2, evt) {
+        const rect = canvas2.getBoundingClientRect();
+        let x, y;
+        if (evt.targetTouches) {
+          x = evt.targetTouches[0].clientX;
+          y = evt.targetTouches[0].clientY;
+        } else {
+          x = evt.clientX;
+          y = evt.clientY;
+        }
+        return {
+          x: (x - rect.left) * (canvas2.width / rect.width),
+          y: (y - rect.top) * (canvas2.height / rect.height)
+        };
+      }
+      function onMouseMove(evt) {
+        if (_safe.disabled)
+          return;
+        const x = getCanvasPos(canvas, evt).x;
+        const y = getCanvasPos(canvas, evt).y;
+        if (flag === 1) {
+          _safe.linex.push(x);
+          _safe.liney.push(y);
+          _safe.linen.push(1);
+          context.save();
+          context.translate(context.canvas.width / 2, context.canvas.height / 2);
+          context.translate(-context.canvas.width / 2, -context.canvas.height / 2);
+          context.beginPath();
+          context.lineWidth = 2;
+          for (let i = 1; i < _safe.linex.length; i++) {
+            lastX = _safe.linex[i];
+            lastY = _safe.liney[i];
+            if (_safe.linen[i] === 0) {
+              context.moveTo(lastX, lastY);
+            } else {
+              context.lineTo(lastX, lastY);
+            }
+          }
+          context.shadowBlur = 10;
+          context.stroke();
+          context.restore();
+        }
+        evt.preventDefault();
+      }
+      function onMouseDown(evt) {
+        if (_safe.disabled)
+          return;
+        const x = getCanvasPos(canvas, evt).x;
+        const y = getCanvasPos(canvas, evt).y;
+        flag = 1;
+        _safe.linex.push(x);
+        _safe.liney.push(y);
+        _safe.linen.push(0);
+      }
+      function onMouseUp() {
+        if (_safe.disabled)
+          return;
+        flag = 0;
+      }
+    }
+  }
+};
+const __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  __vue2_script,
+  render,
+  staticRenderFns,
+  false,
+  __vue2_injectStyles,
+  null,
+  null,
+  null
+);
+function __vue2_injectStyles(context) {
+  for (let o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
+}
+const Sign = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+export {
+  Sign as default
+};

package/dist/components/sign/style.css

@@ -1 +1,12 @@
-.avue-sign{padding:5px}.avue-sign__canvas{border:1px solid #ccc}
+/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
+/* 应用头部高度 */
+/* 页面宽度 */
+/* 侧栏宽度 */
+/* 标签高度 */
+/* 页面头部工具条高度 */
+.avue-sign {
+  padding: 5px;
+}
+.avue-sign__canvas {
+  border: 1px solid #ccc;
+}

package/dist/components/sign-panel/{index.js → index.mjs}

@@ -1,6 +1,8 @@
-import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.77ec6792.js";
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.9c6b8b3d.mjs";
 var render = function() {
-  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
   return _c("div", {
     staticClass: "sign-panel flex-column"
   }, [_c("div", {
@@ -26,24 +28,29 @@ var render = function() {
     ref: "canvas",
     staticClass: "sign-canvas",
     attrs: {
-      width: _vm.width,
-      height: _vm.height
+      "width": _vm.width,
+      "height": _vm.height
     },
     on: {
-      touchstart: function($event) {
-        return $event.stopPropagation(), _vm.touchstart.apply(null, arguments);
+      "touchstart": function($event) {
+        $event.stopPropagation();
+        return _vm.touchstart.apply(null, arguments);
       },
-      touchmove: function($event) {
-        return $event.stopPropagation(), _vm.touchmove.apply(null, arguments);
+      "touchmove": function($event) {
+        $event.stopPropagation();
+        return _vm.touchmove.apply(null, arguments);
       },
-      mousedown: function($event) {
-        return $event.stopPropagation(), _vm.down.apply(null, arguments);
+      "mousedown": function($event) {
+        $event.stopPropagation();
+        return _vm.down.apply(null, arguments);
       },
-      touchend: function($event) {
-        return $event.stopPropagation(), _vm.touchend.apply(null, arguments);
+      "touchend": function($event) {
+        $event.stopPropagation();
+        return _vm.touchend.apply(null, arguments);
       },
-      mouseup: function($event) {
-        return $event.stopPropagation(), _vm.up.apply(null, arguments);
+      "mouseup": function($event) {
+        $event.stopPropagation();
+        return _vm.up.apply(null, arguments);
       }
     }
   }, [_vm._v("当前浏览器不支持手写签名 ")])]), _c("div", {
@@ -51,40 +58,40 @@ var render = function() {
   }, [_c("div", {
     staticClass: "sign-button flex-item",
     staticStyle: {
-      color: "red"
+      "color": "red"
     },
     on: {
-      click: _vm.clear
+      "click": _vm.clear
     }
   }, [_c("i", {
     staticClass: "fa fa-trash"
   }), _vm._v(" 清除 ")]), _c("div", {
     staticClass: "sign-button flex-item",
     staticStyle: {
-      color: "red"
+      "color": "red"
     },
     on: {
-      click: _vm.cancel
+      "click": _vm.cancel
     }
   }, [_c("i", {
     staticClass: "fa fa-close"
   }), _vm._v(" 取消 ")]), _c("div", {
     staticClass: "sign-button flex-item",
     staticStyle: {
-      color: "orange"
+      "color": "orange"
     },
     on: {
-      click: _vm.rollback
+      "click": _vm.rollback
     }
   }, [_c("i", {
     staticClass: "fa fa-repeat"
   }), _vm._v(" 撤销 ")]), _c("div", {
     staticClass: "sign-button flex-item",
     staticStyle: {
-      color: "green"
+      "color": "green"
     },
     on: {
-      click: _vm.save
+      "click": _vm.save
     }
   }, [_c("i", {
     staticClass: "fa fa-check"
@@ -100,23 +107,25 @@ var render = function() {
       cursor: _vm.disabled ? "not-allowed" : "pointer"
     },
     on: {
-      click: _vm.showSign
+      "click": _vm.showSign
     }
   }, [_vm.value ? _c("img", {
     staticClass: "sign-image",
     attrs: {
-      src: _vm.value,
-      alt: "签名"
+      "src": _vm.value,
+      "alt": "签名"
     }
-  }) : _vm._e(), _vm.value ? _vm._e() : _c("p", {
+  }) : _vm._e(), !_vm.value ? _c("p", {
     staticClass: "sign-tips",
     style: {
       color: !_vm.value && _vm.disabled ? "red" : ""
     }
-  }, [_vm._v(" " + _vm._s(_vm.disabled ? "未签名" : "点击进行签名") + " ")]), _vm.disabled ? _vm._e() : _c("i", {
+  }, [_vm._v(" " + _vm._s(_vm.disabled ? "未签名" : "点击进行签名") + " ")]) : _vm._e(), !_vm.disabled ? _c("i", {
     staticClass: "el-icon-edit-outline sign-edit-icon"
-  })])]);
-}, staticRenderFns = [];
+  }) : _vm._e()])]);
+};
+var staticRenderFns = [];
+const SignPanel_vue_vue_type_style_index_0_lang = "";
 const __vue2_script = {
   name: "SignPanel",
   props: {
@@ -147,7 +156,7 @@ const __vue2_script = {
   },
   data() {
     return {
-      edit: !1
+      edit: false
     };
   },
   mounted() {
@@ -156,7 +165,9 @@ const __vue2_script = {
   methods: {
     // 初始化
     init() {
-      if (this.stack = [], this.canvas = this.$refs.canvas, !this.canvas.getContext) {
+      this.stack = [];
+      this.canvas = this.$refs.canvas;
+      if (!this.canvas.getContext) {
         alert("当前浏览器不支持手写签名");
         return;
       }
@@ -165,28 +176,43 @@ const __vue2_script = {
     rollback() {
       if (this.stack.length > 0) {
         const restorePoint = this.stack[this.stack.length - 1];
-        this.ctx.putImageData(restorePoint, 0, 0), this.stack.length = this.stack.length - 1;
+        this.ctx.putImageData(restorePoint, 0, 0);
+        this.stack.length = this.stack.length - 1;
       }
     },
     // 位置初始化
     position() {
       this.restorePoint = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
       const rect = this.canvas.getBoundingClientRect();
-      this.start = rect.left, this.end = rect.top;
+      this.start = rect.left;
+      this.end = rect.top;
     },
     // 画布初始化
     canvasInit() {
-      this.ctx = this.canvas.getContext("2d"), this.ctx.lineCap = "round", this.ctx.lineWidth = this.lineWidth, this.ctx.clearRect(0, 0, this.width, this.height), this.blank = this.canvas.toDataURL("image/png");
+      this.ctx = this.canvas.getContext("2d");
+      this.ctx.lineCap = "round";
+      this.ctx.lineWidth = this.lineWidth;
+      this.ctx.clearRect(0, 0, this.width, this.height);
+      this.blank = this.canvas.toDataURL("image/png");
     },
     /**
      * 绘制水印
      */
     drawWaterMark() {
-      this.ctx.font = `${this.fontSize}px bold 黑体`, this.ctx.fillStyle = "#eee", this.ctx.textAlign = "center", this.ctx.shadowBlur = 1, this.ctx.textBaseline = "middle", this.ctx.fillText(this.text, this.width / 2, this.height / 2);
+      this.ctx.font = `${this.fontSize}px bold 黑体`;
+      this.ctx.fillStyle = "#eee";
+      this.ctx.textAlign = "center";
+      this.ctx.shadowBlur = 1;
+      this.ctx.textBaseline = "middle";
+      this.ctx.fillText(this.text, this.width / 2, this.height / 2);
     },
     // PC 端鼠标按下开始绘画
     down(e) {
-      this.position(), this.startLine(e.clientX, e.clientY, e), this.target = e.target, this.target.addEventListener("mousemove", this.move), window.addEventListener("mouseup", this.up);
+      this.position();
+      this.startLine(e.clientX, e.clientY, e);
+      this.target = e.target;
+      this.target.addEventListener("mousemove", this.move);
+      window.addEventListener("mouseup", this.up);
     },
     // PC 端鼠标按下开始绘画后，跟踪移动轨迹
     move(e) {
@@ -194,11 +220,16 @@ const __vue2_script = {
     },
     // PC 端鼠标松开结束绘画
     up() {
-      this.target && this.target.removeEventListener("mousemove", this.move), window.removeEventListener("mouseup", this.up), this.record();
+      if (this.target) {
+        this.target.removeEventListener("mousemove", this.move);
+      }
+      window.removeEventListener("mouseup", this.up);
+      this.record();
     },
     // 移动端触摸开始绘画
     touchstart(e) {
-      this.position(), this.startLine(e.changedTouches[0].clientX, e.changedTouches[0].clientY, e);
+      this.position();
+      this.startLine(e.changedTouches[0].clientX, e.changedTouches[0].clientY, e);
     },
     // 移动端触摸开始绘画后，跟踪滑动轨迹
     touchmove(e) {
@@ -206,17 +237,25 @@ const __vue2_script = {
     },
     // 开始绘画
     startLine(x, y) {
-      this.ctx.beginPath(), x -= this.start, y -= this.end, this.ctx.moveTo(x, y);
+      this.ctx.beginPath();
+      x -= this.start;
+      y -= this.end;
+      this.ctx.moveTo(x, y);
     },
     // 绘制移动轨迹
     moveLine(x, y, event) {
-      event && event.preventDefault(), x -= this.start, y -= this.end, this.ctx.lineTo(x, y), this.ctx.stroke();
+      event && event.preventDefault();
+      x -= this.start;
+      y -= this.end;
+      this.ctx.lineTo(x, y);
+      this.ctx.stroke();
     },
     clear() {
       this.ctx.clearRect(0, 0, this.width, this.height);
     },
     cancel() {
-      this.clear(), this.edit = !1;
+      this.clear();
+      this.edit = false;
     },
     touchend() {
       this.record();
@@ -226,26 +265,37 @@ const __vue2_script = {
     },
     save() {
       const dataURL = this.canvas.toDataURL("image/png");
-      this.blank === dataURL ? this.$emit("input", "") : this.$emit("input", dataURL), this.edit = !1, this.stack.length = 0, this.ctx.clearRect(0, 0, this.width, this.height);
+      if (this.blank === dataURL) {
+        this.$emit("input", "");
+      } else {
+        this.$emit("input", dataURL);
+      }
+      this.edit = false;
+      this.stack.length = 0;
+      this.ctx.clearRect(0, 0, this.width, this.height);
     },
     showSign() {
-      this.disabled || (this.edit = !0);
+      if (!this.disabled) {
+        this.edit = true;
+      }
     }
   }
-}, __cssModules = {};
+};
+const __cssModules = {};
 var __component__ = /* @__PURE__ */ normalizeComponent(
   __vue2_script,
   render,
   staticRenderFns,
-  !1,
+  false,
   __vue2_injectStyles,
   null,
   null,
   null
 );
 function __vue2_injectStyles(context) {
-  for (let o in __cssModules)
+  for (let o in __cssModules) {
     this[o] = __cssModules[o];
+  }
 }
 const SignPanel = /* @__PURE__ */ function() {
   return __component__.exports;

package/dist/components/sign-panel/style.css

@@ -1 +1,97 @@
-.sign-panel{align-items:flex-start;justify-content:center;width:100%;background:#fff;user-select:none}.sign-panel .sign-canvas{position:absolute;inset:0;width:100%;max-width:100%;height:100%;background:rgba(255,255,155,0);border:1px solid #ccc}.sign-panel .sign-tool-bar{display:flex;width:100%;border:1px solid #ccc;border-top:none}.sign-panel .sign-tips{user-select:none;pointer-events:none}.sign-panel .sign-button{padding:6px;line-height:1.6;text-align:center;background-color:#ebeef5;cursor:pointer;user-select:none}.sign-panel .sign-button:hover{color:#1989fa;background-color:#d0d4de}.sign-panel .sign-button:nth-child(n){border-right:1px solid #ccc}.sign-panel .sign-button:last-child{border:none!important}.sign-panel .sign-watermark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#eee}.sign-panel .sign-view{position:relative;display:flex;align-items:center;justify-content:center;min-width:212px;height:80px;background-color:#fff;border:1px solid #eee}.sign-panel .sign-edit-icon{position:absolute;right:4px;bottom:4px}.sign-panel .sign-image{display:inline-block;min-width:160px;height:80px}.sign-panel .sign-edit{display:flex;flex-direction:column;align-items:center;max-width:100%;background-color:#fff}.sign-panel .sign-draw-area{position:relative;max-width:100%}
+/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
+/* 应用头部高度 */
+/* 页面宽度 */
+/* 侧栏宽度 */
+/* 标签高度 */
+/* 页面头部工具条高度 */
+.sign-panel {
+  align-items: flex-start;
+  justify-content: center;
+  width: 100%;
+  background: #fff;
+  user-select: none;
+}
+.sign-panel .sign-canvas {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 155, 0);
+  border: 1px solid #ccc;
+}
+.sign-panel .sign-tool-bar {
+  display: flex;
+  width: 100%;
+  border: 1px solid #ccc;
+  border-top: none;
+}
+.sign-panel .sign-tips {
+  user-select: none;
+  pointer-events: none;
+}
+.sign-panel .sign-button {
+  padding: 6px;
+  line-height: 1.6;
+  text-align: center;
+  background-color: #ebeef5;
+  cursor: pointer;
+  user-select: none;
+}
+.sign-panel .sign-button:hover {
+  color: #1989fa;
+  background-color: #d0d4de;
+}
+.sign-panel .sign-button:nth-child(n) {
+  border-right: 1px solid #ccc;
+}
+.sign-panel .sign-button:last-child {
+  border: none !important;
+}
+.sign-panel .sign-watermark {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: #eee;
+}
+.sign-panel .sign-view {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 212px;
+  height: 80px;
+  background-color: #fff;
+  border: 1px solid #eee;
+}
+.sign-panel .sign-edit-icon {
+  position: absolute;
+  right: 4px;
+  bottom: 4px;
+}
+.sign-panel .sign-image {
+  display: inline-block;
+  min-width: 160px;
+  height: 80px;
+}
+.sign-panel .sign-edit {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 100%;
+  background-color: #fff;
+}
+.sign-panel .sign-draw-area {
+  position: relative;
+  max-width: 100%;
+}