@vuux/video/dist/es/src/component/context-menu.vue.mjs

Vue Nuxt 视频播放器

import { defineComponent as f, reactive as M, onMounted as k, onUnmounted as _, createBlock as g, openBlock as o, Transition as C, withCtx as h, createElementBlock as i, createCommentVNode as P, normalizeStyle as y, Fragment as O, renderList as v, toDisplayString as B } from "vue";
import { Utils as $ } from "@vuux/utils";
const D = ["onClick"], z = /* @__PURE__ */ f({
  __name: "context-menu",
  props: {
    el: {},
    contextMenu: {}
  },
  emits: ["contextMenu"],
  setup(u, { emit: m }) {
    const n = u, e = M({
      //点击元素
      element: n.el,
      //窗口开关
      isOpen: !1,
      //顶部位置
      topPosition: 0,
      //左部位置
      leftPosition: 0
    }), p = m, { addManaged: c, removeManaged: s } = $.useManagedEvents(), l = (t) => {
      n.contextMenu && n.contextMenu.length > 0 && n.el && (t.target === n.el || n.el.contains(t.target)) && (t.preventDefault(), e.isOpen = !0, e.topPosition = t.clientY, e.leftPosition = t.clientX);
    }, d = (t) => {
      p("contextMenu", t), e.isOpen = !1;
    }, a = () => {
      e.isOpen = !1;
    };
    return k(() => {
      c(document, "contextmenu", l), c(document, "click", a);
    }), _(() => {
      s(document, "contextmenu", l), s(document, "click", a);
    }), (t, E) => (o(), g(C, { name: "tooltip" }, {
      default: h(() => [
        e.isOpen ? (o(), i("div", {
          key: 0,
          class: "video-context-menus",
          style: y({ top: `${e.topPosition}px`, left: `${e.leftPosition}px` })
        }, [
          (o(!0), i(O, null, v(n.contextMenu, (x, r) => (o(), i("div", {
            key: r,
            class: "context-menus-item",
            onClick: (S) => d(r + 1)
          }, B(x), 9, D))), 128))
        ], 4)) : P("", !0)
      ]),
      _: 1
    }));
  }
});
export {
  z as default
};