@nutui/nutui 3.1.12-beta.0 → 3.1.12-beta.1

package/dist/packages/_es/Signature.js

@@ -1,13 +1,13 @@
 /*!
-* @nutui/nutui v3.1.12-beta.0 Mon Nov 22 2021 20:58:07 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.11 Wed Nov 24 2021 14:54:38 GMT+0800 (中国标准时间)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */
-import { ref, computed, reactive, onMounted, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createVNode, withCtx, createTextVNode } from "vue";
+import Taro from "@tarojs/taro";
+import { computed, reactive, onMounted, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withCtx, createTextVNode } from "vue";
 import { c as createComponent } from "./component.js";
-import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 const { componentName, create } = createComponent("signature");
-const _sfc_main = create({
+var _sfc_main = create({
   props: {
     customClass: {
       type: String,
@@ -33,8 +33,6 @@ const _sfc_main = create({
   components: {},
   emits: ["confirm", "clear"],
   setup(props, { emit }) {
-    const canvas = ref(null);
-    const wrap = ref(null);
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
@@ -43,125 +41,126 @@ const _sfc_main = create({
       };
     });
     const state = reactive({
+      canvas: null,
       canvasHeight: 0,
       canvasWidth: 0,
-      ctx: null,
-      isSupportTouch: "ontouchstart" in window,
-      events: "ontouchstart" in window ? ["touchstart", "touchmove", "touchend", "touchleave"] : ["mousedown", "mousemove", "mouseup", "mouseleave"]
+      ctx: null
     });
-    const isCanvasSupported = () => {
-      let elem = document.createElement("canvas");
-      return !!(elem.getContext && elem.getContext("2d"));
-    };
-    const addEvent = () => {
-      canvas.value.addEventListener(state.events[0], startEventHandler, false);
-    };
     const startEventHandler = (event) => {
       event.preventDefault();
       state.ctx.beginPath();
       state.ctx.lineWidth = props.lineWidth;
       state.ctx.strokeStyle = props.strokeStyle;
-      canvas.value.addEventListener(state.events[1], moveEventHandler, false);
-      canvas.value.addEventListener(state.events[2], endEventHandler, false);
-      canvas.value.addEventListener(state.events[3], leaveEventHandler, false);
     };
     const moveEventHandler = (event) => {
       event.preventDefault();
-      let evt = state.isSupportTouch ? event.touches[0] : event;
-      let coverPos = canvas.value.getBoundingClientRect();
-      let mouseX = evt.clientX - coverPos.left;
-      let mouseY = evt.clientY - coverPos.top;
+      let evt = event.changedTouches[0];
+      let mouseX = evt.x;
+      let mouseY = evt.y;
       state.ctx.lineTo(mouseX, mouseY);
       state.ctx.stroke();
     };
     const endEventHandler = (event) => {
       event.preventDefault();
-      canvas.value.removeEventListener(state.events[1], moveEventHandler, false);
-      canvas.value.removeEventListener(state.events[2], endEventHandler, false);
     };
     const leaveEventHandler = (event) => {
       event.preventDefault();
-      canvas.value.removeEventListener(state.events[1], moveEventHandler, false);
-      canvas.value.removeEventListener(state.events[2], endEventHandler, false);
     };
     const clear = () => {
-      canvas.value.addEventListener(state.events[2], endEventHandler, false);
       state.ctx.clearRect(0, 0, state.canvasWidth, state.canvasHeight);
       state.ctx.closePath();
       emit("clear");
     };
     const confirm = () => {
-      onSave(canvas.value);
+      onSave();
     };
-    const onSave = (canvas2) => {
-      let dataurl;
-      switch (props.type) {
-        case "png":
-          dataurl = canvas2.toDataURL("image/png");
-          break;
-        case "jpg":
-          dataurl = canvas2.toDataURL("image/jpeg", 0.8);
-          break;
+    const onSave = () => {
+      if (!state.canvas) {
+        return;
       }
-      clear();
-      emit("confirm", canvas2, dataurl);
+      Taro.createSelectorQuery().select("#spcanvas").fields({
+        node: true,
+        size: true
+      }).exec(async (res) => {
+        Taro.canvasToTempFilePath({
+          canvas: res[0].node,
+          fileType: props.type
+        }).then((res2) => {
+          emit("confirm", res2.tempFilePath);
+        }).catch((e) => {
+          emit("confirm", e);
+        });
+      });
     };
     onMounted(() => {
-      if (isCanvasSupported()) {
-        state.ctx = canvas.value.getContext("2d");
-        state.canvasWidth = wrap.value.offsetWidth;
-        state.canvasHeight = wrap.value.offsetHeight;
-        addEvent();
-      }
+      setTimeout(() => {
+        Taro.createSelectorQuery().select("#spcanvas").fields({
+          node: true,
+          size: true
+        }, function(res) {
+          const canvas = res.node;
+          const ctx = canvas.getContext("2d");
+          state.canvas = canvas;
+          state.ctx = ctx;
+          state.canvasWidth = res.width;
+          state.canvasHeight = res.height;
+        }).exec();
+      }, 500);
     });
-    return { canvas, wrap, isCanvasSupported, confirm, clear, classes };
+    return {
+      confirm,
+      clear,
+      classes,
+      startEventHandler,
+      moveEventHandler,
+      endEventHandler,
+      leaveEventHandler
+    };
   }
 });
-const _hoisted_1 = {
-  class: "nut-signature-inner",
-  ref: "wrap"
-};
-const _hoisted_2 = ["height", "width"];
-const _hoisted_3 = {
-  key: 1,
-  class: "nut-signature-unsopport"
-};
-const _hoisted_4 = /* @__PURE__ */ createTextVNode("\u91CD\u7B7E");
-const _hoisted_5 = /* @__PURE__ */ createTextVNode("\u786E\u8BA4");
+const _hoisted_1 = { class: "nut-signature-inner" };
+const _hoisted_2 = /* @__PURE__ */ createTextVNode("\u91CD\u7B7E");
+const _hoisted_3 = /* @__PURE__ */ createTextVNode("\u786E\u8BA4");
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_nut_button = resolveComponent("nut-button");
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(_ctx.classes)
   }, [
     createElementVNode("div", _hoisted_1, [
-      _ctx.isCanvasSupported ? (openBlock(), createElementBlock("canvas", {
-        key: 0,
-        ref: "canvas",
-        height: _ctx.canvasHeight,
-        width: _ctx.canvasWidth
-      }, null, 8, _hoisted_2)) : (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString(_ctx.unSupportTpl), 1))
-    ], 512),
+      createElementVNode("canvas", {
+        class: "spcanvas",
+        id: "spcanvas",
+        canvasId: "spcanvas",
+        "canvas-id": "spcanvas",
+        type: "2d",
+        "disable-scroll": "true",
+        onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.startEventHandler && _ctx.startEventHandler(...args)),
+        onTouchmove: _cache[1] || (_cache[1] = (...args) => _ctx.moveEventHandler && _ctx.moveEventHandler(...args)),
+        onTouchend: _cache[2] || (_cache[2] = (...args) => _ctx.endEventHandler && _ctx.endEventHandler(...args)),
+        onTouchleave: _cache[3] || (_cache[3] = (...args) => _ctx.leaveEventHandler && _ctx.leaveEventHandler(...args))
+      }, null, 32)
+    ]),
     createVNode(_component_nut_button, {
       class: "nut-signature-btn",
       type: "default",
-      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.clear())
+      onClick: _cache[4] || (_cache[4] = ($event) => _ctx.clear())
     }, {
       default: withCtx(() => [
-        _hoisted_4
+        _hoisted_2
       ]),
       _: 1
     }),
     createVNode(_component_nut_button, {
       class: "nut-signature-btn",
       type: "primary",
-      onClick: _cache[1] || (_cache[1] = ($event) => _ctx.confirm())
+      onClick: _cache[5] || (_cache[5] = ($event) => _ctx.confirm())
     }, {
       default: withCtx(() => [
-        _hoisted_5
+        _hoisted_3
       ]),
       _: 1
     })
   ], 2);
 }
-var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export { index as default };
+_sfc_main.render = _sfc_render;
+export { _sfc_main as default };

package/dist/packages/_es/Sku.js

@@ -1,13 +1,13 @@
 /*!
-* @nutui/nutui v3.1.12-beta.0 Mon Nov 22 2021 20:58:07 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.11 Wed Nov 24 2021 14:54:38 GMT+0800 (中国标准时间)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */
 import { resolveComponent, openBlock, createElementBlock, createElementVNode, renderSlot, createBlock, createCommentVNode, toDisplayString, ref, watch, onMounted, Fragment, renderList, normalizeClass, createVNode, withCtx, createSlots } from "vue";
 import { c as createComponent } from "./component.js";
-import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import { T as TypeOfFun } from "./util.js";
 const { componentName: componentName$4, create: create$4 } = createComponent("sku-header");
-const _sfc_main$4 = create$4({
+var _sfc_main$4 = create$4({
   props: {
     goods: {
       type: Object,
@@ -47,9 +47,9 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ]);
 }
-var SkuHeader = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
+_sfc_main$4.render = _sfc_render$4;
 const { componentName: componentName$3, create: create$3 } = createComponent("sku-select");
-const _sfc_main$3 = create$3({
+var _sfc_main$3 = create$3({
   props: {
     sku: {
       type: Array,
@@ -67,13 +67,13 @@ const _sfc_main$3 = create$3({
         skuInfo.value = [].slice.call(props.sku);
       }
     });
-    const changeSaleChild = (attrItem, index2, parentItem, parentIndex) => {
+    const changeSaleChild = (attrItem, index, parentItem, parentIndex) => {
       if (attrItem.checkFlag || attrItem.disable) {
         return;
       }
       emit("selectSku", {
         sku: attrItem,
-        skuIndex: index2,
+        skuIndex: index,
         parentSku: parentItem,
         parentIndex
       });
@@ -90,7 +90,7 @@ const _hoisted_3$2 = { class: "nut-sku-select-item-skus" };
 const _hoisted_4$2 = ["onClick"];
 function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("view", _hoisted_1$3, [
-    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.skuInfo, (item, index2) => {
+    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.skuInfo, (item, index) => {
       return openBlock(), createElementBlock("view", {
         class: "nut-sku-select-item",
         key: item.id
@@ -100,7 +100,7 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
           (openBlock(true), createElementBlock(Fragment, null, renderList(item.list, (itemAttr, itemAttrIndex) => {
             return openBlock(), createElementBlock("view", {
               class: normalizeClass(["nut-sku-select-item-skus-sku", [{ active: !itemAttr.disable && itemAttr.active }, { disable: itemAttr.disable }]]),
-              onClick: ($event) => _ctx.changeSaleChild(itemAttr, itemAttrIndex, item, index2),
+              onClick: ($event) => _ctx.changeSaleChild(itemAttr, itemAttrIndex, item, index),
               key: itemAttr.name
             }, toDisplayString(itemAttr.name), 11, _hoisted_4$2);
           }), 128))
@@ -109,45 +109,9 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     }), 128))
   ]);
 }
-var SkuSelect = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
-const TypeOfFun = (value) => {
-  if (value === null) {
-    return "null";
-  }
-  const type = typeof value;
-  if (type === "undefined" || type === "string") {
-    return type;
-  }
-  const typeString = toString.call(value);
-  switch (typeString) {
-    case "[object Array]":
-      return "array";
-    case "[object Date]":
-      return "date";
-    case "[object Boolean]":
-      return "boolean";
-    case "[object Number]":
-      return "number";
-    case "[object Function]":
-      return "function";
-    case "[object RegExp]":
-      return "regexp";
-    case "[object Object]":
-      if (value.nodeType !== void 0) {
-        if (value.nodeType == 3) {
-          return /\S/.test(value.nodeValue) ? "textnode" : "whitespace";
-        } else {
-          return "element";
-        }
-      } else {
-        return "object";
-      }
-    default:
-      return "unknow";
-  }
-};
+_sfc_main$3.render = _sfc_render$3;
 const { componentName: componentName$2, create: create$2 } = createComponent("sku-stepper");
-const _sfc_main$2 = create$2({
+var _sfc_main$2 = create$2({
   props: {
     stepperMax: {
       type: [Number, String],
@@ -232,9 +196,9 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ]);
 }
-var SkuStepper = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+_sfc_main$2.render = _sfc_render$2;
 const { componentName: componentName$1, create: create$1 } = createComponent("sku-operate");
-const _sfc_main$1 = create$1({
+var _sfc_main$1 = create$1({
   props: {
     btnOptions: {
       type: Array,
@@ -310,9 +274,9 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     ])) : createCommentVNode("", true)
   ])) : createCommentVNode("", true);
 }
-var SkuOperate = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+_sfc_main$1.render = _sfc_render$1;
 const { componentName, create } = createComponent("sku");
-const _sfc_main = create({
+var _sfc_main = create({
   props: {
     visible: {
       type: Boolean,
@@ -326,6 +290,10 @@ const _sfc_main = create({
       type: Object,
       default: {}
     },
+    showSaleLimit: {
+      type: Boolean,
+      default: false
+    },
     stepperMax: {
       type: [Number, String],
       default: 99999
@@ -334,6 +302,14 @@ const _sfc_main = create({
       type: [Number, String],
       default: 1
     },
+    purchased: {
+      type: [Number, String],
+      default: 0
+    },
+    showSaleLowest: {
+      type: Boolean,
+      default: false
+    },
     btnOptions: {
       type: Array,
       default: () => ["confirm"]
@@ -342,13 +318,17 @@ const _sfc_main = create({
       type: String,
       default: "\u8D2D\u4E70\u6570\u91CF"
     },
-    stepperExtraText: {
+    saleLowestText: {
       type: [Function, Boolean],
       default: false
     },
-    btnExtraText: {
-      type: String,
-      default: ""
+    saleLimitText: {
+      type: [Function, Boolean],
+      default: false
+    },
+    purchasedText: {
+      type: [Function, Boolean],
+      default: false
     },
     buyText: {
       type: String,
@@ -373,14 +353,13 @@ const _sfc_main = create({
     "close",
     "reduce",
     "add",
-    "overLimit",
-    "clickOverlay"
+    "overLimit"
   ],
   components: {
-    SkuHeader,
-    SkuSelect,
-    SkuStepper,
-    SkuOperate
+    SkuHeader: _sfc_main$4,
+    SkuSelect: _sfc_main$3,
+    SkuStepper: _sfc_main$2,
+    SkuOperate: _sfc_main$1
   },
   setup(props, { emit, slots }) {
     const showPopup = ref(props.visible);
@@ -393,9 +372,6 @@ const _sfc_main = create({
         close();
       }
     });
-    onMounted(() => {
-      console.log("\u66F4\u65B0\u53C2\u6570");
-    });
     const getSlots = (name) => slots[name];
     const selectSku = (skus) => {
       emit("selectSku", skus);
@@ -501,33 +477,32 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             stepperTitle: _ctx.stepperTitle,
             stepperMax: _ctx.stepperMax,
             stepperMin: _ctx.stepperMin,
-            stepperExtraText: _ctx.stepperExtraText,
+            purchased: _ctx.purchased,
+            showSaleLimit: _ctx.showSaleLimit,
+            showSaleLowest: _ctx.showSaleLowest,
+            saleLowestText: _ctx.saleLowestText,
+            saleLimitText: _ctx.saleLimitText,
+            purchasedText: _ctx.purchasedText,
             onAdd: _ctx.add,
             onReduce: _ctx.reduce,
             onChangeStepper: _ctx.changeStepper,
-            onOverLimit: _ctx.stepperOverLimit
-          }, null, 8, ["goods", "stepperTitle", "stepperMax", "stepperMin", "stepperExtraText", "onAdd", "onReduce", "onChangeStepper", "onOverLimit"])) : createCommentVNode("", true),
+            onStepperOverLimit: _ctx.stepperOverLimit
+          }, null, 8, ["goods", "stepperTitle", "stepperMax", "stepperMin", "purchased", "showSaleLimit", "showSaleLowest", "saleLowestText", "saleLimitText", "purchasedText", "onAdd", "onReduce", "onChangeStepper", "onStepperOverLimit"])) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "sku-stepper-bottom")
         ]),
-        createVNode(_component_sku_operate, {
+        renderSlot(_ctx.$slots, "sku-operate"),
+        !_ctx.getSlots("sku-operate") ? (openBlock(), createBlock(_component_sku_operate, {
+          key: 1,
           btnOptions: _ctx.btnOptions,
-          btnExtraText: _ctx.btnExtraText,
           buyText: _ctx.buyText,
           addCartText: _ctx.addCartText,
           confirmText: _ctx.confirmText,
           onClickBtnOperate: _ctx.clickBtnOperate
-        }, createSlots({ _: 2 }, [
-          _ctx.getSlots("sku-operate") ? {
-            name: "operate-btn",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "sku-operate")
-            ])
-          } : void 0
-        ]), 1032, ["btnOptions", "btnExtraText", "buyText", "addCartText", "confirmText", "onClickBtnOperate"])
+        }, null, 8, ["btnOptions", "buyText", "addCartText", "confirmText", "onClickBtnOperate"])) : createCommentVNode("", true)
       ])
     ]),
     _: 3
   }, 8, ["visible"]);
 }
-var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export { index as default };
+_sfc_main.render = _sfc_render;
+export { _sfc_main as default };

package/dist/packages/_es/Step.js

@@ -17,16 +17,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __require = typeof require !== "undefined" ? require : (x) => {
+  throw new Error('Dynamic require of "' + x + '" is not supported');
+};
 /*!
-* @nutui/nutui v3.1.12-beta.0 Mon Nov 22 2021 20:58:07 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.11 Wed Nov 24 2021 14:54:38 GMT+0800 (中国标准时间)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */
 import { getCurrentInstance, inject, reactive, computed, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createBlock, Fragment, toDisplayString, createCommentVNode } from "vue";
 import { c as createComponent } from "./component.js";
-import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 const { create, componentName } = createComponent("step");
-const _sfc_main = create({
+var _sfc_main = create({
   props: {
     title: {
       type: String,
@@ -56,9 +58,9 @@ const _sfc_main = create({
     const state = reactive({
       dot: parent.props.progressDot
     });
-    const index2 = computed(() => parent.state.children.indexOf(proxy) + 1);
+    const index = computed(() => parent.state.children.indexOf(proxy) + 1);
     const getCurrentStatus = () => {
-      const activeIndex = index2.value;
+      const activeIndex = index.value;
       if (activeIndex < +parent.props.current)
         return "finish";
       return activeIndex === +parent.props.current ? "process" : "wait";
@@ -74,7 +76,7 @@ const _sfc_main = create({
       };
     });
     return __spreadProps(__spreadValues({}, toRefs(state)), {
-      index: index2,
+      index,
       classes
     });
   }
@@ -117,5 +119,5 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 2);
 }
-var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export { index as default };
+_sfc_main.render = _sfc_render;
+export { _sfc_main as default };

package/dist/packages/_es/Steps.js

@@ -1,12 +1,12 @@
 /*!
-* @nutui/nutui v3.1.12-beta.0 Mon Nov 22 2021 20:58:07 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.11 Wed Nov 24 2021 14:54:38 GMT+0800 (中国标准时间)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */
 import { reactive, computed, provide, h } from "vue";
 import { c as createComponent } from "./component.js";
 const { create, componentName } = createComponent("steps");
-const _sfc_main = create({
+var _sfc_main = create({
   props: {
     direction: {
       type: String,

package/dist/packages/_es/Swipe.js

@@ -17,17 +17,21 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __require = typeof require !== "undefined" ? require : (x) => {
+  throw new Error('Dynamic require of "' + x + '" is not supported');
+};
 /*!
-* @nutui/nutui v3.1.12-beta.0 Mon Nov 22 2021 20:58:07 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.11 Wed Nov 24 2021 14:54:38 GMT+0800 (中国标准时间)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */
+import Taro from "@tarojs/taro";
 import { u as useTouch } from "./index.js";
-import { computed, ref, reactive, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot } from "vue";
+import { computed, ref, onMounted, reactive, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot } from "vue";
 import { c as createComponent } from "./component.js";
-import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import { u as useTaroRect } from "./index2.js";
 const { componentName, create } = createComponent("swipe");
-const _sfc_main = create({
+var _sfc_main = create({
   props: {
     name: {
       type: String,
@@ -48,21 +52,29 @@ const _sfc_main = create({
   },
   emits: ["open", "close"],
   setup(props, { emit }) {
+    const refRandomId = Math.random().toString(36).slice(-8);
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
         [prefixCls]: true
       };
     });
-    const getRefWidth = (ref2) => {
-      var _a;
-      return ((_a = ref2.value) == null ? void 0 : _a.clientWidth) || 0;
+    const getRefWidth = async (ref2) => {
+      let rect = await useTaroRect(ref2, Taro);
+      return rect.width || 0;
     };
-    const leftRef = ref(), leftRefWidth = computed(() => {
-      return getRefWidth(leftRef);
-    });
-    const rightRef = ref(), rightRefWidth = computed(() => {
-      return getRefWidth(rightRef);
+    const leftRef = ref();
+    const leftRefWidth = ref(0);
+    const rightRef = ref();
+    const rightRefWidth = ref(0);
+    const initWidth = async () => {
+      leftRefWidth.value = await getRefWidth(leftRef);
+      rightRefWidth.value = await getRefWidth(rightRef);
+    };
+    onMounted(() => {
+      setTimeout(() => {
+        initWidth();
+      }, 100);
     });
     let opened = false;
     let position = "";
@@ -122,7 +134,7 @@ const _sfc_main = create({
           return;
         touch.start(event);
       },
-      onTouchMove(event) {
+      async onTouchMove(event) {
         if (props.disabled)
           return;
         touch.move(event);
@@ -168,20 +180,15 @@ const _sfc_main = create({
     }, touchMethods), {
       leftRef,
       rightRef,
+      refRandomId,
       open,
       close
     });
   }
 });
-const _hoisted_1 = {
-  class: "nut-swipe__left",
-  ref: "leftRef"
-};
+const _hoisted_1 = ["id"];
 const _hoisted_2 = { class: "nut-swipe__content" };
-const _hoisted_3 = {
-  class: "nut-swipe__right",
-  ref: "rightRef"
-};
+const _hoisted_3 = ["id"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("view", {
     class: normalizeClass(_ctx.classes),
@@ -191,16 +198,24 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     onTouchend: _cache[2] || (_cache[2] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args)),
     onTouchcancel: _cache[3] || (_cache[3] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args))
   }, [
-    createElementVNode("view", _hoisted_1, [
+    createElementVNode("view", {
+      class: "nut-swipe__left",
+      ref: "leftRef",
+      id: "leftRef-" + _ctx.refRandomId
+    }, [
       renderSlot(_ctx.$slots, "left")
-    ], 512),
+    ], 8, _hoisted_1),
     createElementVNode("view", _hoisted_2, [
       renderSlot(_ctx.$slots, "default")
     ]),
-    createElementVNode("view", _hoisted_3, [
+    createElementVNode("view", {
+      class: "nut-swipe__right",
+      ref: "rightRef",
+      id: "rightRef-" + _ctx.refRandomId
+    }, [
       renderSlot(_ctx.$slots, "right")
-    ], 512)
+    ], 8, _hoisted_3)
   ], 38);
 }
-var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export { index as default };
+_sfc_main.render = _sfc_render;
+export { _sfc_main as default };