mine-h5-ui
Version:
一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍
100 lines (99 loc) • 4.32 kB
JavaScript
import { defineComponent as G, mergeModels as y, useModel as z, createElementBlock as i, openBlock as d, unref as o, normalizeStyle as D, Fragment as E, renderList as S, withModifiers as s, normalizeClass as B, createElementVNode as p, renderSlot as J } from "vue";
import { useHandler as K, useResize as O, useScale as Q, useMove as X, useRotate as Y } from "./hooks.js";
/*!
* mine-h5-ui v2.15.0
* Copyright (c) 2025 biaov
* @license MIT
*/
const Z = ["onClick"], _ = ["onTouchmove", "onMousedown"], te = /* @__PURE__ */ G({
name: "MeDrag",
__name: "index",
props: /* @__PURE__ */ y({
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__ */ y(["change"], ["update:list", "update:current"]),
setup(T, { emit: W }) {
const b = W, g = T, F = z(T, "list"), r = z(T, "current"), { listData: a, angleToCursor: H, getCursor: I, onDelete: v, onClick: M, getCurItem: L, onEmitChange: N, onUpdate: P } = K({ emit: b, listModel: F, currentModel: r }), f = { getCurItem: L, onEmitChange: N, onUpdate: P }, { onTouchstart: h, onTouchmove: w, onMousedown: C } = X({ ...f, listData: a, currentModel: r }), { dragRef: U, onResizeTouchstart: $, onResizeTouchmove: V, onResizeMousedown: j, getCenterPoint: q } = O({ ...f, listData: a, currentModel: r }), { onRotateTouchmove: c, onRotateMousedown: k } = Y(g, { ...f, getCenterPoint: q }), { onTouchstartWrap: R, onTouchmoveWrap: x } = Q({ props: g, ...f, listData: a, currentModel: r });
return (l, e) => (d(), i("div", {
class: "me-drag",
ref_key: "dragRef",
ref: U,
style: D(`width:${l.width};height:${l.height};`),
onClick: e[10] || (e[10] = (n) => o(M)(-1)),
onTouchstart: e[11] || (e[11] = //@ts-ignore
(...n) => o(R) && o(R)(...n)),
onTouchmove: e[12] || (e[12] = //@ts-ignore
(...n) => o(x) && o(x)(...n))
}, [
(d(!0), i(E, null, S(o(a), (n, m) => (d(), i("div", {
key: m,
class: B(["item", { active: m === r.value }]),
style: D(`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:${l.theme};--themeText:${l.themeText};`),
onTouchstart: e[7] || (e[7] = //@ts-ignore
(...t) => o(h) && o(h)(...t)),
onTouchmove: e[8] || (e[8] = //@ts-ignore
(...t) => o(w) && o(w)(...t)),
onMousedown: e[9] || (e[9] = //@ts-ignore
(...t) => o(C) && o(C)(...t)),
onClick: s((t) => o(M)(m), ["stop"])
}, [
(d(!0), i(E, null, S(o(H), (t, A) => (d(), i("div", {
class: B(["resize", [t.cursor, o(I)(A)]]),
key: t.cursor,
onTouchstart: e[0] || (e[0] = s(
//@ts-ignore
(...u) => o($) && o($)(...u),
["stop"]
)),
onTouchmove: s((u) => o(V)(u, t), ["stop"]),
onTouchend: e[1] || (e[1] = s(() => {
}, ["stop"])),
onMousedown: s((u) => o(j)(u, t), ["stop"])
}, null, 42, _))), 128)),
p("div", {
class: "delete flex-center",
onClick: e[2] || (e[2] = //@ts-ignore
(...t) => o(v) && o(v)(...t))
}, e[13] || (e[13] = [
p("i", { class: "iconfont icon-baseline-close-px" }, null, -1)
])),
p("div", {
class: "rotate flex-center",
onTouchstart: e[3] || (e[3] = s(() => {
}, ["stop"])),
onTouchmove: e[4] || (e[4] = s(
//@ts-ignore
(...t) => o(c) && o(c)(...t),
["stop"]
)),
onTouchend: e[5] || (e[5] = s(() => {
}, ["stop"])),
onMousedown: e[6] || (e[6] = s(
//@ts-ignore
(...t) => o(k) && o(k)(...t),
["stop"]
))
}, e[14] || (e[14] = [
p("i", { class: "iconfont icon-loading_flat" }, null, -1)
]), 32),
J(l.$slots, "default", {
item: n,
index: m
})
], 46, Z))), 128))
], 36));
}
});
export {
te as default
};