@tencentcloud/roomkit-web-vue3
Version:
<h1 align="center"> TUIRoomKit</h1> Conference (TUIRoomKit) is a product suitable for multi-person audio and video conversation scenarios such as business meetings, webinars, and online education. By integrating this product, you can add room management,
125 lines (124 loc) • 4.33 kB
JavaScript
import { defineComponent, ref, watch, onMounted, onUnmounted, provide, computed, createElementBlock, openBlock, createElementVNode, createCommentVNode, unref, normalizeStyle, renderSlot, Fragment, renderList, normalizeClass } from "vue";
import { throttle } from "../../../utils/utils.mjs";
const _hoisted_1 = {
key: 0,
class: "swiper-dot-container"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "Swiper",
props: {
activeIndex: {}
},
emits: ["change"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const activeSwiperIndex = ref(0);
const swiperItemNumber = ref(0);
const swiperRef = ref();
const translateX = ref(0);
watch(
() => props.activeIndex,
(val) => {
activeSwiperIndex.value = val;
translateX.value = 0 - swiperRef.value.offsetWidth * activeSwiperIndex.value;
}
);
watch(activeSwiperIndex, () => {
emits("change", activeSwiperIndex.value);
});
const swiperMounted = ref(false);
onMounted(() => {
swiperMounted.value = true;
});
onUnmounted(() => {
swiperMounted.value = false;
});
provide("swiper", {
activeSwiperIndex,
swiperRef,
addSwiperItem,
removeSwiperItem
});
const touchData = {
x: 0,
y: 0
};
function isActiveDot(index) {
return index === activeSwiperIndex.value;
}
function addSwiperItem() {
swiperItemNumber.value += 1;
}
function removeSwiperItem() {
swiperItemNumber.value -= 1;
}
const swiperStyle = computed(() => {
return { transform: `translateX(${translateX.value}px)` };
});
let isInOnceTouch = false;
function handleTouchStart(event) {
if (event.touches.length > 1 || isInOnceTouch) {
return;
}
isInOnceTouch = true;
touchData.x = event.changedTouches[0].pageX;
touchData.y = event.changedTouches[0].pageY;
}
const handleTouchMoveThrottle = throttle(handleTouchMove, 200);
function handleTouchMove(event) {
if (event.touches.length > 1 || !isInOnceTouch) {
isInOnceTouch = false;
translateX.value = 0 - swiperRef.value.offsetWidth * activeSwiperIndex.value;
return;
}
const offsetX = event.changedTouches[0].pageX - touchData.x;
translateX.value = 0 - swiperRef.value.offsetWidth * activeSwiperIndex.value + offsetX;
}
function handleTouchEnd(event) {
if (!isInOnceTouch) {
return;
}
isInOnceTouch = false;
const offsetX = event.changedTouches[0].pageX - touchData.x;
if (Math.abs(offsetX) > swiperRef.value.offsetWidth / 5) {
if (offsetX < 0 && activeSwiperIndex.value < swiperItemNumber.value - 1) {
activeSwiperIndex.value = activeSwiperIndex.value + 1;
}
if (offsetX > 0 && activeSwiperIndex.value >= 1) {
activeSwiperIndex.value = activeSwiperIndex.value - 1;
}
}
translateX.value = 0 - swiperRef.value.offsetWidth * activeSwiperIndex.value;
}
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: "swiper",
ref_key: "swiperRef",
ref: swiperRef
}, [
createElementVNode("div", {
class: "swiper-item-container",
style: normalizeStyle(swiperStyle.value),
onTouchstart: handleTouchStart,
onTouchmove: _cache[0] || (_cache[0] = //@ts-ignore
(...args) => unref(handleTouchMoveThrottle) && unref(handleTouchMoveThrottle)(...args)),
onTouchend: handleTouchEnd
}, [
swiperMounted.value ? renderSlot(_ctx.$slots, "default", { key: 0 }, void 0, true) : createCommentVNode("", true)
], 36),
swiperItemNumber.value > 1 ? (openBlock(), createElementBlock("div", _hoisted_1, [
(openBlock(true), createElementBlock(Fragment, null, renderList(swiperItemNumber.value, (item, index) => {
return openBlock(), createElementBlock("div", {
key: item,
class: normalizeClass(["swiper-dots", [isActiveDot(index) ? "swiper-current-dots" : ""]])
}, null, 2);
}), 128))
])) : createCommentVNode("", true)
], 512);
};
}
});
export {
_sfc_main as default
};