swiper-next
Version:
Vue3 的 Swiper 组件
67 lines (66 loc) • 1.71 kB
JavaScript
;
const vue = require("vue");
const component = require("../../helpers/component.js");
const props = {
itemId: {
type: String,
default: ""
}
};
const _SwiperItem = /* @__PURE__ */ component.defineBuiltInComponent({
name: "SwiperItem",
props,
// #if _X_ && !_NODE_JS_
// rootElement: {
// name: 'div',
// class: UniSwiperItemElement,
// },
// #endif
setup(props2, {
slots
}) {
const rootRef = vue.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;
}
}
};
vue.onMounted(() => {
const addSwiperContext = vue.inject("addSwiperContext");
if (addSwiperContext) {
addSwiperContext(context);
}
});
vue.onUnmounted(() => {
const removeSwiperContext = vue.inject("removeSwiperContext");
if (removeSwiperContext) {
removeSwiperContext(context);
}
});
return () => vue.createVNode("div", {
"ref": rootRef,
"style": {
position: "absolute",
width: "100%",
height: "100%"
},
"class": "swiper-next-item"
}, [slots.default && slots.default()]);
}
});
module.exports = _SwiperItem;