uv-ui
Version:
基于vue3的移动端组件库
80 lines (79 loc) • 2.43 kB
JavaScript
import { ref as c, computed as y, openBlock as T, createElementBlock as H, normalizeStyle as D, unref as N, createElementVNode as h, renderSlot as Y } from "vue";
import { useTouch as k } from "../../hooks/useTouch.js";
import "../../hooks/useCountDown.js";
import { addUnit as g } from "../../utils/common.js";
import "./floating-panel.vue_vue_type_style_index_0_lang.js";
const B = /* @__PURE__ */ h("div", { class: "uv-floating-panel-header" }, [
/* @__PURE__ */ h("div", { class: "uv-floating-panel-header-bar" })
], -1), P = {
name: "UvFloatingPanel"
}, R = /* @__PURE__ */ Object.assign(P, {
props: {
height: {
type: Number,
default: 100
},
maxHeight: {
type: Number,
default: 384
},
duration: {
type: Number,
default: 0.2
},
contentDraggable: {
type: Boolean,
default: !1
}
},
emits: ["heightChange"],
setup(m, { emit: v }) {
const t = m, r = k(), i = c(!1), n = c(t.height), s = c(null), d = y(() => ({
height: g(t.maxHeight),
transform: `translateY(calc(100% + ${g(-n.value)}))`,
transition: i.value ? "none" : `transform ${t.duration}s`
})), f = 0.2, p = (e) => {
const a = Math.abs(e), { height: l, maxHeight: o } = t;
return a > o ? -(o + (a - o) * f) : a < l ? -(l - (l - a) * f) : e;
};
let u = "";
const b = (e) => {
r.start(e), i.value = !0, u = -n.value;
}, _ = (e) => {
var o;
r.move(e);
const a = e.target;
if (s.value === a || ((o = s.value) == null ? void 0 : o.contains(a))) {
if (!t.contentDraggable)
return;
if (-u < t.maxHeight)
e.cancelable && e.preventDefault(), e.stopPropagation();
else if (!(s.value.scrollTop <= 0 && r.deltaY.value > 0))
return;
}
const l = r.deltaY.value + u;
n.value = -p(l);
}, x = () => {
i.value = !1, n.value = n.value > t.maxHeight / 2 ? t.maxHeight : t.height, n.value !== -u && v("heightChange", { height: n.value });
};
return (e, a) => (T(), H("div", {
class: "uv-floating-panel",
style: D(N(d)),
onTouchstart: b,
onTouchmove: _,
onTouchend: x
}, [
B,
h("div", {
class: "uv-floating-panel-content",
ref_key: "contentRef",
ref: s
}, [
Y(e.$slots, "default")
], 512)
], 36));
}
});
export {
R as default
};