vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
72 lines (71 loc) • 2.47 kB
JavaScript
import { defineComponent as C, useTemplateRef as k, createElementBlock as l, openBlock as r, normalizeStyle as n, unref as e, createElementVNode as m, createCommentVNode as g, createVNode as T, toDisplayString as c } from "vue";
import { useImageCompare as v } from "./hook/useImageCompare.mjs";
import { Icon as E } from "@vuux/icons";
const P = { class: "image-compare-data" }, b = ["src"], B = ["src"], L = {
key: 0,
class: "image-compare-labels"
}, N = { class: "is-label" }, V = { class: "is-label" }, z = /* @__PURE__ */ C({
name: "ImageCompare",
__name: "index",
props: {
letfImage: { default: "" },
rightImage: { default: "" },
position: { default: 50 },
text: { type: Boolean, default: !1 },
letfText: { default: "" },
rightText: { default: "" },
height: { default: "auto" }
},
emits: ["drag"],
setup(f, { expose: u, emit: h }) {
const t = f, _ = h, d = k("imageCompareEl"), { position: p, containerHeight: x, onLoad: a, startDrag: i, resetPosition: y, setPosition: I } = v(t, d, _);
return u({
resetPosition: y,
setPosition: I
}), (D, o) => (r(), l("div", {
class: "app-image-compare",
ref_key: "imageCompareEl",
ref: d,
style: n({ height: e(x) })
}, [
m("div", P, [
t.letfImage ? (r(), l("img", {
key: 0,
src: t.letfImage,
class: "is-image",
onLoad: o[0] || (o[0] = //@ts-ignore
(...s) => e(a) && e(a)(...s))
}, null, 40, b)) : g("", !0),
t.rightImage ? (r(), l("img", {
key: 1,
src: t.rightImage,
class: "is-image right-image",
style: n({ clipPath: `inset(0 0 0 ${e(p)}%)` }),
onLoad: o[1] || (o[1] = //@ts-ignore
(...s) => e(a) && e(a)(...s))
}, null, 44, B)) : g("", !0),
m("div", {
class: "image-compare-slider",
style: n({ left: `${e(p)}%` }),
onMousedown: o[2] || (o[2] = //@ts-ignore
(...s) => e(i) && e(i)(...s)),
onTouchstartPassive: o[3] || (o[3] = //@ts-ignore
(...s) => e(i) && e(i)(...s))
}, [
T(e(E), {
name: "Icon7117462",
class: "is-handle",
color: "#fff"
})
], 36)
]),
t.text ? (r(), l("div", L, [
m("span", N, c(t.letfText), 1),
m("span", V, c(t.rightText), 1)
])) : g("", !0)
], 4));
}
});
export {
z as default
};