swiper-next
Version:
Vue3 的 Swiper 组件
68 lines (67 loc) • 1.72 kB
JavaScript
import { ref, onMounted, inject, onUnmounted, createVNode } from "vue";
import { defineBuiltInComponent } from "../../helpers/component.mjs";
const props = {
itemId: {
type: String,
default: ""
}
};
const _SwiperItem = /* @__PURE__ */ defineBuiltInComponent({
name: "SwiperItem",
props,
// #if _X_ && !_NODE_JS_
// rootElement: {
// name: 'div',
// class: UniSwiperItemElement,
// },
// #endif
setup(props2, {
slots
}) {
const rootRef = ref(null);
const context = {
rootRef,
getItemId() {
return props2.itemId;
},
getBoundingClientRect() {
const el = rootRef.value;
return el.getBoundingClientRect();
},
updatePosition(position, vertical) {
const x = vertical ? "0" : `${100 * position}%`;
const y = vertical ? `${100 * position}%` : "0";
const rootEl = rootRef.value;
const value = `translate(${x},${y}) translateZ(0)`;
if (rootEl) {
rootEl.style.webkitTransform = value;
rootEl.style.transform = value;
}
}
};
onMounted(() => {
const addSwiperContext = inject("addSwiperContext");
if (addSwiperContext) {
addSwiperContext(context);
}
});
onUnmounted(() => {
const removeSwiperContext = inject("removeSwiperContext");
if (removeSwiperContext) {
removeSwiperContext(context);
}
});
return () => createVNode("div", {
"ref": rootRef,
"style": {
position: "absolute",
width: "100%",
height: "100%"
},
"class": "swiper-next-item"
}, [slots.default && slots.default()]);
}
});
export {
_SwiperItem as default
};