mine-h5-ui/es/MeColorPicker/slide.vue.js

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

import { defineComponent as p, mergeModels as g, useModel as v, useTemplateRef as y, onMounted as k, createElementBlock as M, openBlock as R, normalizeStyle as u, normalizeClass as b, createElementVNode as h } from "vue";
import { pxToPercentage as i, rangeInside as B } from "./utils.js";
import { useMoveHandle as V } from "../MeComposable/useMoveHandle/index.js";
/*!
          * mine-h5-ui v2.15.0
          * Copyright (c) 2025 biaov
          * @license MIT
          */
const w = /* @__PURE__ */ p({
  __name: "slide",
  props: /* @__PURE__ */ g({
    opacity: { type: Boolean, default: !1 },
    background: { default: "" },
    color: { default: "" }
  }, {
    modelValue: { default: 0 },
    modelModifiers: {}
  }),
  emits: ["update:modelValue"],
  setup(c) {
    const a = v(c, "modelValue"), r = y("slideRef"), d = ({ sx: e, ex: t, iw: l, width: n }) => {
      const m = t - e;
      let s = i(l + m, n);
      s = Math.round(B(s, 0, 100)), e !== t && (a.value = Math.round(s));
    };
    let o = null;
    const f = {
      start: ({ x: e }) => {
        const { x: t, width: l } = r.value.getBoundingClientRect(), n = e - t;
        o = { sx: e, iw: n, width: l }, a.value = i(n, l);
      },
      move: ({ x: e }) => {
        o && d({ ...o, ex: e });
      },
      end: ({ x: e }) => {
        o && (d({ ...o, ex: e }), o = null);
      }
    };
    return k(() => {
      V(r.value, f);
    }), (e, t) => (R(), M("div", {
      class: b(["slide", { opacity: e.opacity }]),
      style: u({ background: e.background }),
      ref_key: "slideRef",
      ref: r
    }, [
      h("div", {
        class: "circle-dot",
        style: u(`left:${a.value}%;background:${e.color};`)
      }, null, 4)
    ], 6));
  }
});
export {
  w as default
};