mine-h5-ui
Version:
一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍
51 lines (50 loc) • 1.64 kB
JavaScript
import { defineComponent as p, useModel as g, useTemplateRef as v, onMounted as y, openBlock as M, createElementBlock as k, normalizeStyle as c, normalizeClass as x, createElementVNode as b, mergeModels as h } from "vue";
import { pxToPercentage as i, rangeInside as B } from "./utils.js";
import { useMoveHandle as R } from "../MeComposable/useMoveHandle/index.js";
const w = /* @__PURE__ */ p({
__name: "slide",
props: /* @__PURE__ */ h({
opacity: { type: Boolean, default: !1 },
background: { default: "" },
color: { default: "" }
}, {
modelValue: { default: 0 },
modelModifiers: {}
}),
emits: ["update:modelValue"],
setup(l) {
const r = g(l, "modelValue"), u = v("slideNode"), s = ({ sx: e, ex: o, iw: n, width: a }) => {
const f = o - e;
let d = i(n + f, a);
d = Math.round(B(d, 0, 100)), e !== o && (r.value = Math.round(d));
};
let t = null;
const m = {
start: ({ x: e }) => {
const { x: o, width: n } = u.value.getBoundingClientRect(), a = e - o;
t = { sx: e, iw: a, width: n }, r.value = i(a, n);
},
move: ({ x: e }) => {
t && s({ ...t, ex: e });
},
end: ({ x: e }) => {
t && (s({ ...t, ex: e }), t = null);
}
};
return y(() => {
R(u.value, m);
}), (e, o) => (M(), k("div", {
ref: "slideNode",
class: x(["slide", { opacity: l.opacity }]),
style: c({ background: l.background })
}, [
b("div", {
class: "circle-dot",
style: c(`left:${r.value}%;background:${l.color};`)
}, null, 4)
], 6));
}
});
export {
w as default
};