mine-h5-ui/es/MeDrag/index.vue.js

一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍

import { defineComponent as G, useModel as R, openBlock as i, createElementBlock as d, unref as o, normalizeStyle as y, Fragment as z, renderList as D, withModifiers as s, normalizeClass as E, createElementVNode as T, renderSlot as J, mergeModels as S } from "vue";
import { useHandler as K, useResize as O, useMove as Q, useRotate as X, useScale as Y } from "./hooks.js";
const Z = ["onClick"], _ = ["onTouchmove", "onMousedown"], te = /* @__PURE__ */ G({
  name: "MeDrag",
  __name: "index",
  props: /* @__PURE__ */ S({
    width: { default: "300px" },
    height: { default: "300px" },
    theme: { default: "#f56c6c" },
    themeText: { default: "#fff" },
    angleRange: { default: 5 },
    scale: { default: 100 }
  }, {
    list: { default: () => [] },
    listModifiers: {},
    current: { default: -1 },
    currentModifiers: {}
  }),
  emits: /* @__PURE__ */ S(["change"], ["update:list", "update:current"]),
  setup(r, { emit: B }) {
    const W = B, g = r, b = R(r, "list"), l = R(r, "current"), { listData: a, angleToCursor: F, getCursor: H, onDelete: p, onClick: v, getCurItem: I, onEmitChange: L, onUpdate: N } = K({ emit: W, listModel: b, currentModel: l }), f = { getCurItem: I, onEmitChange: L, onUpdate: N }, { onTouchstart: M, onTouchmove: c, onMousedown: h } = Q({ ...f, listData: a, currentModel: l }), { dragRef: P, onResizeTouchstart: w, onResizeTouchmove: U, onResizeMousedown: V, getCenterPoint: j } = O({ ...f, listData: a, currentModel: l }), { onRotateTouchmove: x, onRotateMousedown: C } = X(g, { ...f, getCenterPoint: j }), { onTouchstartWrap: $, onTouchmoveWrap: k } = Y({ props: g, ...f, listData: a, currentModel: l });
    return (q, e) => (i(), d("div", {
      ref_key: "dragRef",
      ref: P,
      class: "me-drag",
      style: y(`width:${r.width};height:${r.height};`),
      onClick: e[10] || (e[10] = (n) => o(v)(-1)),
      onTouchstart: e[11] || (e[11] = //@ts-ignore
      (...n) => o($) && o($)(...n)),
      onTouchmove: e[12] || (e[12] = //@ts-ignore
      (...n) => o(k) && o(k)(...n))
    }, [
      (i(!0), d(z, null, D(o(a), (n, m) => (i(), d("div", {
        key: m,
        class: E(["item", { active: m === l.value }]),
        style: y(`top:${n.rect.y}px;left:${n.rect.x}px;width:${n.rect.w}px;height:${n.rect.h}px;transform:rotate(${n.rect.r}deg);--theme:${r.theme};--themeText:${r.themeText};`),
        onTouchstart: e[7] || (e[7] = //@ts-ignore
        (...t) => o(M) && o(M)(...t)),
        onTouchmove: e[8] || (e[8] = //@ts-ignore
        (...t) => o(c) && o(c)(...t)),
        onMousedown: e[9] || (e[9] = //@ts-ignore
        (...t) => o(h) && o(h)(...t)),
        onClick: s((t) => o(v)(m), ["stop"])
      }, [
        (i(!0), d(z, null, D(o(F), (t, A) => (i(), d("div", {
          key: t.cursor,
          class: E(["resize", [t.cursor, o(H)(A)]]),
          onTouchstart: e[0] || (e[0] = s(
            //@ts-ignore
            (...u) => o(w) && o(w)(...u),
            ["stop"]
          )),
          onTouchmove: s((u) => o(U)(u, t), ["stop"]),
          onTouchend: e[1] || (e[1] = s(() => {
          }, ["stop"])),
          onMousedown: s((u) => o(V)(u, t), ["stop"])
        }, null, 42, _))), 128)),
        T("div", {
          class: "delete flex-center",
          onClick: e[2] || (e[2] = //@ts-ignore
          (...t) => o(p) && o(p)(...t))
        }, [...e[13] || (e[13] = [
          T("i", { class: "iconfont icon-baseline-close-px" }, null, -1)
        ])]),
        T("div", {
          class: "rotate flex-center",
          onTouchstart: e[3] || (e[3] = s(() => {
          }, ["stop"])),
          onTouchmove: e[4] || (e[4] = s(
            //@ts-ignore
            (...t) => o(x) && o(x)(...t),
            ["stop"]
          )),
          onTouchend: e[5] || (e[5] = s(() => {
          }, ["stop"])),
          onMousedown: e[6] || (e[6] = s(
            //@ts-ignore
            (...t) => o(C) && o(C)(...t),
            ["stop"]
          ))
        }, [...e[14] || (e[14] = [
          T("i", { class: "iconfont icon-loading_flat" }, null, -1)
        ])], 32),
        J(q.$slots, "default", {
          item: n,
          index: m
        })
      ], 46, Z))), 128))
    ], 36));
  }
});
export {
  te as default
};