lc-vue-size-scale/dist/index.js

尺寸刻度尺

(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");a.appendChild(document.createTextNode(".px-scale[data-v-38c0985f]{position:absolute;--scale-border-color: #333;--scale-border: 1px solid var(--scale-border-color);--small-scale-size: 4px;--normal-scale-size: calc(2 * var(--small-scale-size));--large-scale-size: calc(4 * var(--small-scale-size));--scale-size: calc(5 * var(--small-scale-size))}.px-scale.top-scale[data-v-38c0985f]{top:0}.px-scale.top-scale .scale-item[data-v-38c0985f]{bottom:0}.px-scale.top-scale .scale-text[data-v-38c0985f]{top:var(--small-scale-size)}.px-scale.bottom-scale[data-v-38c0985f]{bottom:0}.px-scale.bottom-scale .scale-item[data-v-38c0985f]{top:0}.px-scale.bottom-scale .scale-text[data-v-38c0985f]{bottom:var(--small-scale-size)}.px-scale.left-scale[data-v-38c0985f]{left:0;height:100%}.px-scale.left-scale .scale-item[data-v-38c0985f]{right:0}.px-scale.left-scale .scale-text[data-v-38c0985f]{left:var(--small-scale-size)}.px-scale.right-scale[data-v-38c0985f]{right:0}.px-scale.right-scale .scale-item[data-v-38c0985f]{left:0}.px-scale.right-scale .scale-text[data-v-38c0985f]{right:var(--small-scale-size)}.px-scale.top-scale[data-v-38c0985f],.px-scale.bottom-scale[data-v-38c0985f]{width:100%;height:var(--scale-size)}.px-scale.top-scale .scale-item[data-v-38c0985f],.px-scale.bottom-scale .scale-item[data-v-38c0985f]{border-left:var(--scale-border)}.px-scale.top-scale .scale-item.small-scale-item[data-v-38c0985f],.px-scale.bottom-scale .scale-item.small-scale-item[data-v-38c0985f]{height:var(--small-scale-size)}.px-scale.top-scale .scale-item.normal-scale-item[data-v-38c0985f],.px-scale.bottom-scale .scale-item.normal-scale-item[data-v-38c0985f]{height:var(--normal-scale-size)}.px-scale.top-scale .scale-item.large-scale-item[data-v-38c0985f],.px-scale.bottom-scale .scale-item.large-scale-item[data-v-38c0985f]{height:var(--large-scale-size)}.px-scale.left-scale[data-v-38c0985f],.px-scale.right-scale[data-v-38c0985f]{height:100%;width:var(--scale-size)}.px-scale.left-scale .scale-item[data-v-38c0985f],.px-scale.right-scale .scale-item[data-v-38c0985f]{border-top:var(--scale-border)}.px-scale.left-scale .scale-item.small-scale-item[data-v-38c0985f],.px-scale.right-scale .scale-item.small-scale-item[data-v-38c0985f]{width:var(--small-scale-size)}.px-scale.left-scale .scale-item.normal-scale-item[data-v-38c0985f],.px-scale.right-scale .scale-item.normal-scale-item[data-v-38c0985f]{width:var(--normal-scale-size)}.px-scale.left-scale .scale-item.large-scale-item[data-v-38c0985f],.px-scale.right-scale .scale-item.large-scale-item[data-v-38c0985f]{width:var(--large-scale-size)}.px-scale.left-scale .scale-text[data-v-38c0985f],.px-scale.right-scale .scale-text[data-v-38c0985f]{writing-mode:vertical-rl}.px-scale .scale-item[data-v-38c0985f]{position:absolute}.px-scale .scale-text[data-v-38c0985f]{position:absolute;font-size:12px;line-height:1}")),document.head.appendChild(a)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
import { defineComponent as g, ref as v, computed as u, openBlock as s, createElementBlock as r, normalizeClass as x, normalizeStyle as f, Fragment as d, renderList as y, toDisplayString as k } from "vue";
import { useElementSize as $ } from "@vueuse/core";
const b = /* @__PURE__ */ g({
  __name: "px-scale",
  props: {
    placement: {
      type: String,
      default: "top"
    },
    particleSize: {
      type: Number,
      default: 5
    }
  },
  setup(t) {
    const l = t, n = v(), { width: p, height: i } = $(n), z = v({}), m = u(() => {
      const o = l.placement === "top" || l.placement === "bottom" ? p.value : i.value;
      return Math.floor(o / l.particleSize) + 1;
    }), S = u(() => {
      const o = m.value, a = [];
      for (let e = 0; e < o; e++)
        a.push({
          size: e * l.particleSize,
          type: e % 10 === 0 ? "large" : e % 5 === 0 ? "normal" : "small"
        });
      return a;
    }), h = u(() => {
      const a = Math.floor(m.value / 20) + 1, e = [];
      for (let c = 1; c < a; c++)
        e.push({ offset: c * 20 * l.particleSize });
      return e;
    });
    return (o, a) => (s(), r("div", {
      ref_key: "pxScaleRef",
      ref: n,
      class: x(["size-scale px-scale", `${t.placement}-scale`]),
      style: f(z.value)
    }, [
      (s(!0), r(d, null, y(S.value, (e, c) => (s(), r("div", {
        key: c,
        class: x(["scale-item", `${e.type}-scale-item`]),
        style: f({
          top: t.placement === "left" || t.placement === "right" ? `${e.size}px` : void 0,
          left: t.placement === "top" || t.placement === "bottom" ? `${e.size}px` : void 0
        })
      }, null, 6))), 128)),
      (s(!0), r(d, null, y(h.value, (e, c) => (s(), r("div", {
        key: c,
        class: "scale-text",
        style: f({
          top: t.placement === "left" || t.placement === "right" ? `${e.offset + 2}px` : void 0,
          left: t.placement === "top" || t.placement === "bottom" ? `${e.offset + 2}px` : void 0
        })
      }, k(e.offset), 5))), 128))
    ], 6));
  }
}), C = (t, l) => {
  const n = t.__vccOpts || t;
  for (const [p, i] of l)
    n[p] = i;
  return n;
}, M = /* @__PURE__ */ C(b, [["__scopeId", "data-v-38c0985f"]]);
export {
  M as PxScale
};