dk-plus/es/dkcodedisplay/src/index2.js

DK-PLUS

import { defineComponent as m, reactive as w, ref as p, computed as u, nextTick as s, onMounted as y, watch as S, onBeforeUnmount as x, toRefs as v } from "vue";
import { CodeDisplay as k } from "./index3.js";
import { SetPosition as g } from "./index4.js";
const E = m({
  name: "Dkcodedisplay",
  props: k,
  setup() {
    const e = w({
      open: !1,
      width: 0,
      height: 0,
      isShow: !1,
      dkCodeDisplayStyleList: {}
    }), o = p(), d = p(), c = new g(o), l = () => {
      s(() => {
        const n = d.value;
        e.height = n.children[0].clientHeight, e.width = n.children[0].clientWidth;
      });
    }, a = () => {
      s(() => {
        l(), e.open = !e.open, t(), setTimeout(() => {
          c.init(o, e.open);
        }, 1e3 * 0.21);
      });
    }, r = u(() => e.open ? e.height + 20 + "px" : "0px"), h = () => {
      e.isShow = !0, t();
    }, f = () => {
      e.isShow = !1, t();
    }, t = () => {
      e.dkCodeDisplayStyleList = {
        "--dkcodedisplay-text-left": e.isShow ? "50%" : "52%",
        "--dkcodedisplay-text-opacity": e.isShow ? ".5" : "0.0",
        "--dkcodedisplay-margin-top": e.open ? "0" : "10px"
      };
    };
    s(() => {
      t();
    }), y(() => {
      l();
    });
    const i = () => {
      c.init(o, e.open);
    };
    return S(
      () => e.open,
      (n) => {
        n ? window.addEventListener("scroll", i) : window.removeEventListener("scroll", i);
      }
    ), x(() => {
      window.removeEventListener("scroll", i);
    }), {
      ...v(e),
      codeHeight: r,
      handleOpenCode: a,
      handleMouseEnter: h,
      handleMouseLeave: f,
      codeBoxRef: d,
      codeParentRef: o
    };
  }
});
export {
  E as default
};