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