mine-h5-ui
Version:
一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍
56 lines (55 loc) • 1.92 kB
JavaScript
import { defineComponent as M, mergeModels as k, useModel as R, useTemplateRef as P, onMounted as b, createElementBlock as V, openBlock as B, normalizeStyle as y, createElementVNode as $ } from "vue";
import { pxToPercentage as i, rangeInside as g } from "./utils.js";
import { useMoveHandle as w } from "../MeComposable/useMoveHandle/index.js";
/*!
* mine-h5-ui v2.15.0
* Copyright (c) 2025 biaov
* @license MIT
*/
const z = /* @__PURE__ */ M({
__name: "color-panel",
props: /* @__PURE__ */ k({
background: {}
}, {
modelValue: { default: { x: 0, y: 0 } },
modelModifiers: {}
}),
emits: ["update:modelValue"],
setup(x) {
const l = R(x, "modelValue");
let t = null;
const m = P("colorPanelRef"), v = ({ sx: e, sy: o, ex: n, ey: r, iw: a, ih: c, width: u, height: s }) => {
const d = n - e, h = r - o;
let f = i(a + d, u), p = i(c + h, s);
f = Math.round(g(f, 0, 100)), p = Math.round(g(p, 0, 100)), !(e === n && o === r) && (l.value = { x: f, y: p });
}, _ = {
start: ({ x: e, y: o }) => {
var d;
const { x: n, y: r, width: a, height: c } = (d = m.value) == null ? void 0 : d.getBoundingClientRect(), u = e - n, s = o - r;
t = { sx: e, sy: o, iw: u, ih: s, width: a, height: c }, l.value = { x: i(u, a), y: i(s, c) };
},
move: ({ x: e, y: o }) => {
t && v({ ...t, ex: e, ey: o });
},
end: ({ x: e, y: o }) => {
t && (v({ ...t, ex: e, ey: o }), t = null);
}
};
return b(() => {
w(m.value, _);
}), (e, o) => (B(), V("div", {
class: "color-panel",
style: y(`background-color:${e.background};`),
ref_key: "colorPanelRef",
ref: m
}, [
$("div", {
class: "color-panel__btn",
style: y(`left:${l.value.x}%;top:${l.value.y}%;`)
}, null, 4)
], 4));
}
});
export {
z as default
};