@vuux/video
Version:
Vue Nuxt 视频播放器
68 lines (67 loc) • 2.32 kB
JavaScript
import { defineComponent as C, useTemplateRef as u, createElementBlock as v, openBlock as f, withModifiers as y, unref as s, createElementVNode as o, normalizeClass as T, createCommentVNode as b, normalizeStyle as l, withDirectives as h, toDisplayString as D, vShow as V } from "vue";
import { useProgressDrag as B } from "../hook/useProgress.mjs";
import { Utils as H } from "@vuux/utils";
const U = /* @__PURE__ */ C({
__name: "progress",
props: {
modelValue: { default: 0 },
loaded: { default: 0 },
hoverText: { default: "" }
},
emits: ["update:modelValue", "change", "onMousemove"],
setup(g, { emit: E }) {
const r = g, S = E, i = !H.isMobile(), n = u("progressEl"), p = u("tipsEl"), { state: k, progressBarStyle: x, hoverStyle: M, loadStyle: c, tipStyle: w, mousemoveHandle: a, mouseleaveHandle: d, startDragHandler: m } = B(n, p, r, S);
return (z, e) => (f(), v("div", {
ref_key: "progressEl",
ref: n,
class: "controller-progress",
onMousedown: e[2] || (e[2] = y(
//@ts-ignore
(...t) => s(m) && s(m)(...t),
["stop"]
)),
onContextmenu: e[3] || (e[3] = y(() => {
}, ["prevent"]))
}, [
o("div", {
class: T(["progress-track", { "is-hover": i }]),
onMousemove: e[0] || (e[0] = //@ts-ignore
(...t) => s(a) && s(a)(...t)),
onMouseleave: e[1] || (e[1] = //@ts-ignore
(...t) => s(d) && s(d)(...t))
}, [
i ? (f(), v("div", {
key: 0,
class: "hover-tip",
style: l(s(w))
}, [
e[4] || (e[4] = o("div", { class: "is-up" }, null, -1)),
h(o("div", {
ref_key: "tipsEl",
ref: p,
class: "is-tip",
style: l({ left: s(k).hoverTipsPosition })
}, D(r.hoverText), 5), [
[V, r.hoverText]
]),
e[5] || (e[5] = o("div", { class: "is-down" }, null, -1))
], 4)) : b("", !0),
o("div", {
class: "hover-thumb",
style: l(s(M))
}, null, 4),
o("div", {
class: "progress-thumb",
style: l(s(x))
}, null, 4),
o("div", {
class: "loaded-thumb",
style: l(s(c))
}, null, 4)
], 34)
], 544));
}
});
export {
U as default
};