@nutui/nutui 4.3.15-beta.1 → 4.3.15-beta.2

package/dist/packages/avatarcropper/AvatarCropper.js

@@ -38,20 +38,63 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { reactive, ref, computed, watch, toRefs, resolveComponent, openBlock, createElementBlock, Fragment, createElementVNode, normalizeClass, renderSlot, withDirectives, normalizeStyle, createVNode, withCtx, createTextVNode, toDisplayString, vShow } from "vue";
+import { reactive, ref, computed, onMounted, watch, toRefs, resolveComponent, openBlock, createElementBlock, Fragment, createElementVNode, normalizeClass, renderSlot, createTextVNode, withModifiers, toDisplayString, withDirectives, normalizeStyle, createVNode, withCtx, vShow } from "vue";
 import { Button as _sfc_main$1 } from "../button/Button.js";
 import { c as createComponent } from "../component-DQf3CENX.js";
-import { d as preventDefault, e as clamp } from "../util-D1pvnUYu.js";
-import { Refresh2, Retweet } from "@nutui/icons-vue";
+import { a as preventDefault, c as clamp } from "../util-2G3mRQeF.js";
+import { IconFont } from "@nutui/icons-vue-taro";
 import { u as useTouch } from "../index-I8tfW3Kf.js";
-import { u as useRect } from "../index-B1qsj2XR.js";
+import Taro, { useReady } from "@tarojs/taro";
 import { _ as _export_sfc } from "../_plugin-vue_export-helper-1tPrXgE0.js";
+const compareVersion = (v1Old, v2Old) => {
+  const v1 = v1Old.split(".");
+  const v2 = v2Old.split(".");
+  const len = Math.max(v1.length, v2.length);
+  while (v1.length < len) {
+    v1.push("0");
+  }
+  while (v2.length < len) {
+    v2.push("0");
+  }
+  for (let i = 0; i < len; i++) {
+    const num1 = parseInt(v1[i]);
+    const num2 = parseInt(v2[i]);
+    if (num1 > num2) {
+      return 1;
+    } else if (num1 < num2) {
+      return -1;
+    }
+  }
+  return 0;
+};
+const isWeapp = () => {
+  return process.env.TARO_ENV === "weapp";
+};
+function _easyCanvasContextBase(systemInfo, lowCallback, highCallback, targetVersion = "1.9.90") {
+  if (isWeapp() && compareVersion(systemInfo.SDKVersion, targetVersion) >= 0) {
+    highCallback();
+  } else {
+    lowCallback();
+  }
+}
+function easySetFillStyle(systemInfo, canvasContext, color) {
+  _easyCanvasContextBase(
+    systemInfo,
+    () => {
+      canvasContext.setFillStyle(color);
+    },
+    () => {
+      if (typeof color === "string") {
+        canvasContext.fillStyle = color;
+      }
+    }
+  );
+}
 const { create } = createComponent("avatar-cropper");
 const _sfc_main = create({
   components: {
     NutButton: _sfc_main$1,
-    Refresh2,
-    Retweet
+    IconFont
   },
   props: {
     maxZoom: {
@@ -81,6 +124,14 @@ const _sfc_main = create({
     shape: {
       type: String,
       default: "square"
+    },
+    sizeType: {
+      type: Array,
+      default: () => ["original", "compressed"]
+    },
+    sourceType: {
+      type: Array,
+      default: () => ["album", "camera"]
     }
   },
   emits: ["confirm", "cancel"],
@@ -95,19 +146,16 @@ const _sfc_main = create({
       moving: false,
       zooming: false,
       displayWidth: 0,
-      displayHeight: 0
+      displayHeight: 0,
+      cropperWidth: 0,
+      cropperHeight: 0
     });
-    const defDrawImage = {
-      img: new Image(),
-      // 规定要使用的图像
-      sx: 0,
-      // 开始剪切的 x 坐标位置
-      sy: 0,
-      // 开始剪切的 y 坐标位置
-      swidth: 0,
-      // 被剪切区域的宽度
-      sheight: 0,
-      // 被剪切区域的高度
+    const canvasAll = {
+      canvasId: `canvas-${Date.now()}`,
+      cropperCanvas: null,
+      cropperCanvasContext: null
+    };
+    const drawImage = ref({
       x: 0,
       // 在画布上x的坐标位置
       y: 0,
@@ -116,105 +164,193 @@ const _sfc_main = create({
       // 要使用的图像的宽度
       height: 0
       // 要使用的图像的高度
-    };
-    const drawImage = ref(__spreadValues({}, defDrawImage));
-    const cropperPopupRef = ref();
-    const canvasRef = ref();
-    const inputImageRef = ref();
-    const devicePixelRatio = window.devicePixelRatio || 1;
+    });
+    let canvasImage = null;
     const touch = useTouch();
+    const systemInfo = Taro.getSystemInfoSync();
+    const showCanvas2D = computed(() => {
+      return Taro.getEnv() === "ALIPAY" && parseInt(Taro.SDKVersion.replace(/\./g, "")) >= 270 || systemInfo.SDKVersion && parseInt(systemInfo.SDKVersion.replace(/\./g, "")) >= 290 && Taro.getEnv() === "WEAPP";
+    });
+    const showPixelRatio = Taro.getEnv() === "WEB" || showCanvas2D.value;
+    const pixelRatio = showPixelRatio ? systemInfo.pixelRatio : 1;
+    state.displayWidth = systemInfo.windowWidth * pixelRatio;
+    state.displayHeight = systemInfo.windowHeight * pixelRatio;
+    state.cropperWidth = state.cropperHeight = state.displayWidth - props.space * pixelRatio * 2;
+    useReady(() => {
+      if (showCanvas2D.value) {
+        const { canvasId } = canvasAll;
+        Taro.createSelectorQuery().select(`#${canvasId}`).node(({ node: canvas }) => {
+          canvas.width = state.displayWidth;
+          canvas.height = state.displayHeight;
+          canvasAll.cropperCanvas = canvas;
+        }).exec();
+      }
+    });
+    onMounted(() => {
+      const { canvasId } = canvasAll;
+      canvasAll.cropperCanvasContext = Taro.createCanvasContext(canvasId);
+    });
     const isAngle = computed(() => {
       return state.angle === 90 || state.angle === 270;
     });
     const highlightStyle = computed(() => {
-      const { swidth } = drawImage.value;
-      const width = swidth / devicePixelRatio + "px";
+      const { cropperWidth } = state;
+      const width = cropperWidth / pixelRatio + "px";
       const height = width;
       return {
         width,
         height
       };
     });
+    const canvasStyle = computed(() => {
+      const { displayWidth, displayHeight } = state;
+      return {
+        width: `${displayWidth / pixelRatio}px`,
+        height: `${displayHeight / pixelRatio}px`
+      };
+    });
+    const cutCanvasStyle = computed(() => {
+      const { displayWidth, displayHeight, cropperWidth } = state;
+      return {
+        top: `${(displayHeight / pixelRatio - cropperWidth / pixelRatio) / 2}px`,
+        left: `${(displayWidth / pixelRatio - cropperWidth / pixelRatio) / 2}px`,
+        width: `${cropperWidth / pixelRatio}px`,
+        height: `${cropperWidth / pixelRatio}px`
+      };
+    });
     const maxMoveX = computed(() => {
-      const { displayWidth, scale } = state;
-      const { swidth, height } = drawImage.value;
+      const { displayWidth, scale, cropperWidth } = state;
+      const { height } = drawImage.value;
       if (isAngle.value) {
-        return Math.max(0, (height * scale - swidth) / 2);
+        return Math.max(0, (height * scale - cropperWidth) / 2);
       }
-      return Math.max(0, (displayWidth * scale - swidth) / 2);
+      return Math.max(0, (displayWidth * scale - cropperWidth) / 2);
     });
     const maxMoveY = computed(() => {
-      const { displayWidth, scale } = state;
-      const { swidth, height } = drawImage.value;
+      const { displayWidth, scale, cropperWidth } = state;
+      const { height } = drawImage.value;
       if (isAngle.value) {
-        return Math.max(0, (displayWidth * scale - swidth) / 2);
+        return Math.max(0, (displayWidth * scale - cropperWidth) / 2);
       }
-      return Math.max(0, (height * scale - swidth) / 2);
+      return Math.max(0, (height * scale - cropperWidth) / 2);
     });
-    const fileToDataURL = (file) => {
+    const dataURLToImage = (dataURL) => {
       return new Promise((resolve) => {
-        const reader = new FileReader();
-        reader.onloadend = (e) => resolve(e.target.result);
-        reader.readAsDataURL(file);
+        const img = new Image();
+        img.onload = () => resolve(img);
+        img.src = dataURL;
       });
     };
-    const dataURLToImage = (dataURL) => {
+    const dataURLToCanvasImage = (canvas, dataURL) => {
+      if (!canvas) {
+        return Promise.reject(new Error("Invalid canvas element"));
+      }
       return new Promise((resolve) => {
-        const img = new Image();
+        const img = canvas.createImage();
         img.onload = () => resolve(img);
         img.src = dataURL;
       });
     };
-    const draw = () => {
-      const { img, width, height, x, y, swidth } = drawImage.value;
-      const { moveX, moveY, scale } = state;
-      const canvas = canvasRef.value;
-      if (!canvas) return;
+    const canvas2dDraw = (ctx) => {
+      if (!ctx) return;
+      const { width, height, x, y } = drawImage.value;
+      const { moveX, moveY, scale, angle, displayWidth, displayHeight } = state;
+      ctx.clearRect(0, 0, displayWidth, displayHeight);
+      ctx.translate(displayWidth / 2 + moveX, displayHeight / 2 + moveY);
+      ctx.rotate(Math.PI / 180 * angle);
+      ctx.scale(scale, scale);
+      ctx.drawImage(canvasImage, x, y, width, height);
+    };
+    const webDraw = () => {
+      const { displayWidth, displayHeight } = state;
+      const canvasDom = document.getElementById(canvasAll.canvasId);
+      let canvas = canvasDom;
+      if ((canvasDom == null ? void 0 : canvasDom.tagName) !== "CANVAS") {
+        canvas = canvasDom == null ? void 0 : canvasDom.getElementsByTagName("canvas")[0];
+        canvas.width = displayWidth;
+        canvas.height = displayHeight;
+      }
       const ctx = canvas.getContext("2d");
-      canvas.width = state.displayWidth;
-      canvas.height = state.displayHeight;
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      ctx.fillStyle = "#666";
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
-      ctx.fillStyle = "#000";
-      ctx.fillRect(props.space * devicePixelRatio, (canvas.height - swidth) / 2, swidth, swidth);
-      ctx.translate(canvas.width / 2 + moveX, canvas.height / 2 + moveY);
-      ctx.rotate(Math.PI / 180 * state.angle);
+      canvas2dDraw(ctx);
+    };
+    const canvas2dContextDraw = () => {
+      const { cropperCanvas } = canvasAll;
+      let ctx = cropperCanvas.getContext("2d");
+      ctx && ctx.resetTransform();
+      canvas2dDraw(ctx);
+    };
+    const draw = () => {
+      if (Taro.getEnv() === "WEB") {
+        webDraw();
+        return;
+      }
+      if (showCanvas2D.value) {
+        canvas2dContextDraw();
+        return;
+      }
+      const { width, height, x, y } = drawImage.value;
+      const { moveX, moveY, scale, angle, displayWidth, displayHeight, cropperWidth } = state;
+      const { cropperCanvasContext } = canvasAll;
+      let ctx = cropperCanvasContext;
+      if (!ctx) return;
+      ctx.clearRect(0, 0, displayWidth, displayHeight);
+      easySetFillStyle(systemInfo, ctx, "#666");
+      ctx.fillRect(0, 0, displayWidth, displayHeight);
+      ctx.stroke();
+      ctx.fill();
+      easySetFillStyle(systemInfo, ctx, "#000");
+      ctx.fillRect(props.space, (displayHeight - cropperWidth) / 2, cropperWidth, cropperWidth);
+      ctx.stroke();
+      ctx.fill();
+      ctx.translate(displayWidth / 2 + moveX, displayHeight / 2 + moveY);
+      ctx.rotate(Math.PI / 180 * angle);
       ctx.scale(scale, scale);
-      ctx.drawImage(img, x, y, width, height);
+      ctx.drawImage(canvasImage, x, y, width, height);
+      ctx.draw();
     };
-    const setDrawImg = (image) => {
-      const rect = useRect(cropperPopupRef.value);
-      const { width: clientWidth, height: clientHeight } = rect;
-      const canvasWidth = state.displayWidth = clientWidth * devicePixelRatio;
-      const canvasHeight = state.displayHeight = clientHeight * devicePixelRatio;
-      let drawImg = __spreadValues({}, defDrawImage);
+    const setDrawImg = (image) => __async(this, null, function* () {
+      const { displayWidth, cropperWidth } = state;
+      let drawImg = __spreadValues({}, drawImage.value);
       const { width: imgWidth, height: imgHeight } = image;
-      drawImg.img = image;
+      canvasImage = image.path;
+      if (Taro.getEnv() === "WEB") {
+        canvasImage = yield dataURLToImage(image.path);
+      }
+      if (showCanvas2D.value) {
+        canvasImage = yield dataURLToCanvasImage(canvasAll.cropperCanvas, image.path);
+      }
       const isPortrait = imgHeight > imgWidth;
       const rate = isPortrait ? imgWidth / imgHeight : imgHeight / imgWidth;
-      drawImg.width = canvasWidth;
-      drawImg.height = isPortrait ? canvasWidth / rate : canvasWidth * rate;
+      drawImg.width = displayWidth;
+      drawImg.height = isPortrait ? displayWidth / rate : displayWidth * rate;
       drawImg.x = -drawImg.width / 2;
       drawImg.y = -drawImg.height / 2;
-      drawImg.swidth = canvasWidth - props.space * 2 * devicePixelRatio;
-      drawImg.sheight = isPortrait ? drawImg.swidth / rate : drawImg.swidth * rate;
-      drawImg.sx = props.space * devicePixelRatio;
-      drawImg.sy = (canvasHeight - drawImg.swidth) / 2;
       drawImage.value = drawImg;
-      state.defScale = drawImg.swidth / (isPortrait ? drawImg.width : drawImg.height);
+      state.defScale = cropperWidth / (isPortrait ? drawImg.width : drawImg.height);
       resetScale();
-    };
-    const inputImageChange = (event) => __async(this, null, function* () {
-      state.visible = true;
-      const $el = event.target;
-      let { files } = $el;
-      if (!(files == null ? void 0 : files.length)) return;
-      const base64 = yield fileToDataURL(files[0]);
-      const image = yield dataURLToImage(base64);
-      setDrawImg(image);
+      yield Promise.resolve();
       draw();
     });
+    const chooseImage = () => {
+      Taro.chooseImage({
+        count: 1,
+        // 可以指定是原图还是压缩图，默认二者都有
+        sizeType: props.sizeType,
+        sourceType: props.sourceType,
+        success: (res) => {
+          const { tempFiles } = res;
+          !!tempFiles.length && imageChange(tempFiles[0]);
+        }
+      });
+    };
+    const imageChange = (file) => __async(this, null, function* () {
+      Taro.getImageInfo({
+        src: file.path
+      }).then((res) => {
+        state.visible = true;
+        setDrawImg(res);
+      });
+    });
     const resetScale = () => {
       setScale(state.defScale);
       state.moveX = 0;
@@ -304,23 +440,83 @@ const _sfc_main = create({
     const cancel = (isEmit = true) => {
       state.visible = false;
       resetScale();
-      inputImageRef.value.value = "";
       isEmit && emit("cancel");
     };
-    const confirm = () => {
-      const canvas = canvasRef.value;
-      const { sx, sy, swidth } = drawImage.value;
-      const width = swidth;
-      const height = swidth;
+    const confirmWEB = () => {
+      const { cropperWidth, displayHeight } = state;
+      const canvasDom = document.getElementById(canvasAll.canvasId);
+      let canvas = canvasDom;
+      if ((canvasDom == null ? void 0 : canvasDom.tagName) !== "CANVAS") {
+        canvas = canvasDom == null ? void 0 : canvasDom.getElementsByTagName("canvas")[0];
+      }
+      const width = cropperWidth;
+      const height = cropperWidth;
       const croppedCanvas = document.createElement("canvas");
       const croppedCtx = croppedCanvas.getContext("2d");
       croppedCanvas.width = width;
       croppedCanvas.height = height;
-      canvas && croppedCtx.drawImage(canvas, sx, sy, width, height, 0, 0, width, height);
+      canvas && croppedCtx.drawImage(
+        canvas,
+        props.space * pixelRatio,
+        (displayHeight - cropperWidth) / 2,
+        width,
+        height,
+        0,
+        0,
+        width,
+        height
+      );
       const imageDataURL = croppedCanvas.toDataURL("image/png");
       emit("confirm", imageDataURL);
       cancel(false);
     };
+    const confirmCanvas2D = () => {
+      const { cropperWidth, displayHeight } = state;
+      const { cropperCanvas } = canvasAll;
+      const pixelRatio2 = Taro.getEnv() === "ALIPAY" ? 1 : systemInfo.pixelRatio;
+      Taro.canvasToTempFilePath({
+        canvas: cropperCanvas,
+        x: props.space,
+        y: (displayHeight - cropperWidth) / pixelRatio2 / 2,
+        width: cropperWidth / pixelRatio2,
+        height: cropperWidth / pixelRatio2,
+        destWidth: cropperWidth,
+        destHeight: cropperWidth,
+        success: (res) => __async(this, null, function* () {
+          let filePath = res.tempFilePath;
+          emit("confirm", filePath);
+          cancel(false);
+          return;
+        })
+      });
+    };
+    const confirm = () => {
+      if (Taro.getEnv() === "WEB") {
+        confirmWEB();
+        return;
+      }
+      if (showCanvas2D.value) {
+        confirmCanvas2D();
+        return;
+      }
+      const { cropperWidth, displayHeight } = state;
+      const { canvasId } = canvasAll;
+      Taro.canvasToTempFilePath({
+        canvasId,
+        x: props.space,
+        y: (displayHeight - cropperWidth) / 2,
+        width: cropperWidth,
+        height: cropperWidth,
+        destWidth: cropperWidth * systemInfo.pixelRatio,
+        destHeight: cropperWidth * systemInfo.pixelRatio,
+        success: (res) => __async(this, null, function* () {
+          let filePath = res.tempFilePath;
+          emit("confirm", filePath);
+          cancel(false);
+          return;
+        })
+      });
+    };
     watch(
       () => state.scale,
       () => {
@@ -357,12 +553,12 @@ const _sfc_main = create({
       rotate,
       confirm
     });
-    return __spreadProps(__spreadValues({}, toRefs(state)), {
-      cropperPopupRef,
-      canvasRef,
-      inputImageRef,
+    return __spreadProps(__spreadValues(__spreadValues({}, toRefs(state)), toRefs(canvasAll)), {
+      showCanvas2D,
       highlightStyle,
-      inputImageChange,
+      canvasStyle,
+      cutCanvasStyle,
+      chooseImage,
       reset,
       rotate,
       cancel,
@@ -373,56 +569,54 @@ const _sfc_main = create({
     });
   }
 });
-const _hoisted_1 = ["data-edit-text"];
-const _hoisted_2 = {
-  ref: "cropperPopupRef",
-  class: "nut-cropper-popup"
-};
+const _hoisted_1 = { class: "nut-cropper-popup" };
+const _hoisted_2 = ["id", "canvas-id", "type"];
 const _hoisted_3 = {
-  ref: "canvasRef",
-  class: "nut-cropper-popup__canvas"
-};
-const _hoisted_4 = {
   key: 1,
   class: "flex-sb"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_nut_button = resolveComponent("nut-button");
-  const _component_Refresh2 = resolveComponent("Refresh2");
-  const _component_Retweet = resolveComponent("Retweet");
+  const _component_IconFont = resolveComponent("IconFont");
   return openBlock(), createElementBlock(Fragment, null, [
-    createElementVNode("div", {
-      class: normalizeClass(["nut-avatar-cropper", { round: _ctx.shape === "round" }]),
-      "data-edit-text": _ctx.editText
+    createElementVNode("view", {
+      class: normalizeClass(["nut-avatar-cropper taro", { round: _ctx.shape === "round" }])
     }, [
       renderSlot(_ctx.$slots, "default"),
-      createElementVNode("input", {
-        ref: "inputImageRef",
-        type: "file",
-        accept: "image/*",
-        class: "nut-avatar-cropper__input",
-        onChange: _cache[0] || (_cache[0] = (...args) => _ctx.inputImageChange && _ctx.inputImageChange(...args))
-      }, null, 544)
-    ], 10, _hoisted_1),
-    withDirectives(createElementVNode("div", _hoisted_2, [
-      createElementVNode("canvas", _hoisted_3, null, 512),
-      createElementVNode("div", {
+      _cache[9] || (_cache[9] = createTextVNode()),
+      createElementVNode("view", {
+        class: "nut-avatar-cropper__edit-text",
+        onClick: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.chooseImage && _ctx.chooseImage(...args), ["stop"]))
+      }, toDisplayString(_ctx.editText), 1)
+    ], 2),
+    _cache[15] || (_cache[15] = createTextVNode()),
+    withDirectives(createElementVNode("view", _hoisted_1, [
+      createElementVNode("canvas", {
+        id: _ctx.canvasId,
+        "canvas-id": _ctx.canvasId,
+        type: _ctx.showCanvas2D ? "2d" : void 0,
+        style: normalizeStyle(_ctx.canvasStyle),
+        class: "nut-cropper-popup__canvas"
+      }, null, 12, _hoisted_2),
+      _cache[13] || (_cache[13] = createTextVNode()),
+      createElementVNode("view", {
         class: "nut-cropper-popup__highlight",
         onTouchstart: _cache[1] || (_cache[1] = (...args) => _ctx.onTouchStart && _ctx.onTouchStart(...args)),
         onTouchmove: _cache[2] || (_cache[2] = (...args) => _ctx.onTouchMove && _ctx.onTouchMove(...args)),
         onTouchend: _cache[3] || (_cache[3] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args)),
         onTouchcancel: _cache[4] || (_cache[4] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args))
       }, [
-        createElementVNode("div", {
+        createElementVNode("view", {
           class: normalizeClass(["highlight", { highlight__round: _ctx.shape === "round" }]),
           style: normalizeStyle(_ctx.highlightStyle)
         }, null, 6)
       ], 32),
-      createElementVNode("div", {
+      _cache[14] || (_cache[14] = createTextVNode()),
+      createElementVNode("view", {
         class: normalizeClass(["nut-cropper-popup__toolbar", [_ctx.toolbarPosition]])
       }, [
-        _ctx.$slots.toolbar ? renderSlot(_ctx.$slots, "toolbar", { key: 0 }) : (openBlock(), createElementBlock("div", _hoisted_4, [
-          createElementVNode("div", {
+        _ctx.$slots.toolbar ? renderSlot(_ctx.$slots, "toolbar", { key: 0 }) : (openBlock(), createElementBlock("view", _hoisted_3, [
+          createElementVNode("view", {
             class: "nut-cropper-popup__toolbar-item",
             onClick: _cache[5] || (_cache[5] = ($event) => _ctx.cancel())
           }, [
@@ -433,19 +627,28 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               _: 1
             })
           ]),
-          createElementVNode("div", {
+          _cache[10] || (_cache[10] = createTextVNode()),
+          createElementVNode("view", {
             class: "nut-cropper-popup__toolbar-item",
             onClick: _cache[6] || (_cache[6] = (...args) => _ctx.reset && _ctx.reset(...args))
           }, [
-            createVNode(_component_Refresh2, { color: "#fff" })
+            createVNode(_component_IconFont, {
+              name: "refresh2",
+              color: "#fff"
+            })
           ]),
-          createElementVNode("div", {
+          _cache[11] || (_cache[11] = createTextVNode()),
+          createElementVNode("view", {
             class: "nut-cropper-popup__toolbar-item",
             onClick: _cache[7] || (_cache[7] = (...args) => _ctx.rotate && _ctx.rotate(...args))
           }, [
-            createVNode(_component_Retweet, { color: "#fff" })
+            createVNode(_component_IconFont, {
+              name: "retweet",
+              color: "#fff"
+            })
           ]),
-          createElementVNode("div", {
+          _cache[12] || (_cache[12] = createTextVNode()),
+          createElementVNode("view", {
             class: "nut-cropper-popup__toolbar-item",
             onClick: _cache[8] || (_cache[8] = (...args) => _ctx.confirm && _ctx.confirm(...args))
           }, [
@@ -463,7 +666,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 64);
 }
-const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const index_taro = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  index as default
+  index_taro as default
 };

package/dist/packages/avatargroup/AvatarGroup.js

@@ -1,6 +1,7 @@
-import { ref, computed, onMounted, nextTick, unref, onUnmounted, provide, resolveComponent, openBlock, createElementBlock, normalizeStyle, renderSlot, createBlock, withCtx, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import { ref, computed, onMounted, nextTick, unref, onUnmounted, provide, resolveComponent, openBlock, createElementBlock, normalizeStyle, renderSlot, createTextVNode, createBlock, withCtx, toDisplayString, createCommentVNode } from "vue";
+import Taro from "@tarojs/taro";
 import { c as createComponent } from "../component-DQf3CENX.js";
-import { N as NutAvatar, A as AVATAR_KEY } from "../index-Do4_KY74.js";
+import { N as NutAvatar, A as AVATAR_KEY } from "../index.taro-Do4_KY74.js";
 import { _ as _export_sfc } from "../_plugin-vue_export-helper-1tPrXgE0.js";
 const { create } = createComponent("avatar-group");
 const _sfc_main = create({
@@ -52,9 +53,6 @@ const _sfc_main = create({
     });
     const foldAvatar = (element) => {
       let count = 0;
-      if (element && element.$el) {
-        element = element.$el;
-      }
       const children = element.children;
       if (props.zIndex === "right") {
         for (let i = 0; i < Number(props.maxCount); i++) {
@@ -64,7 +62,13 @@ const _sfc_main = create({
       }
       for (let i = Number(props.maxCount); i < children.length; i++) {
         const child = children[i];
-        if (child.className.includes("avater-fold")) {
+        let className;
+        if (Taro.getEnv() === "WEB") {
+          className = child.className;
+        } else {
+          className = child.props.class;
+        }
+        if (className.includes("avater-fold")) {
           continue;
         }
         child.style.display = "none";
@@ -92,8 +96,10 @@ const _sfc_main = create({
       if (props.maxCount) {
         nextTick(() => {
           let element = unref(avatarGroupRef);
-          if (element && element.$el) {
-            element = element.$el;
+          if (Taro.getEnv() === "WEB") {
+            if (element && element.$el) {
+              element = element.$el;
+            }
           }
           foldAvatar(element);
           observer.value = watchDefaultSlot(element);
@@ -123,6 +129,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     style: normalizeStyle(_ctx.styles)
   }, [
     renderSlot(_ctx.$slots, "default"),
+    _cache[0] || (_cache[0] = createTextVNode()),
     _ctx.foldCount > 0 ? (openBlock(), createBlock(_component_nut_avatar, {
       key: 0,
       class: "avater-fold",
@@ -139,7 +146,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     }, 8, ["color", "bg-color", "size", "shape", "style"])) : createCommentVNode("", true)
   ], 4);
 }
-const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const index_taro = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  index as default
+  index_taro as default
 };