@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,
108 lines (107 loc) • 3.29 kB
JavaScript
import { defineComponent, ref, watch, computed, onMounted, onUnmounted, createElementBlock, openBlock, createElementVNode, normalizeStyle, normalizeClass } from "vue";
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "Slider",
props: {
modelValue: {
type: Number,
default: 0
},
min: {
type: Number,
default: 0
},
max: {
type: Number,
default: 100
},
step: {
type: Number,
default: 1
},
disabled: {
type: Boolean,
default: false
}
},
emits: ["update:modelValue"],
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const value = ref(props.modelValue);
const thumb = ref(null);
const slider = ref(null);
const track = ref(null);
watch(value, (newValue) => {
emit("update:modelValue", newValue);
});
watch(
() => props.modelValue,
(newValue) => {
value.value = newValue;
}
);
const valuePercentage = computed(() => {
return (value.value - props.min) / (props.max - props.min) * 100;
});
const thumbStyle = computed(() => {
return {
left: `${valuePercentage.value}%`
};
});
function handleMousedown(event) {
var _a;
if (props.disabled) return;
(_a = thumb.value) == null ? void 0 : _a.classList.add("slider-thumb-active");
handleMousemove(event);
}
function handleMousemove(event) {
var _a, _b;
if (props.disabled || !((_a = thumb.value) == null ? void 0 : _a.classList.contains("slider-thumb-active")))
return;
const sliderRect = (_b = slider.value) == null ? void 0 : _b.getBoundingClientRect();
if (sliderRect) {
const newValue = (event.clientX - sliderRect.left) / sliderRect.width * (props.max - props.min) + props.min;
const steppedValue = Math.round(newValue / props.step) * props.step;
const clampedValue = Math.min(Math.max(steppedValue, props.min), props.max);
value.value = clampedValue;
}
}
function handleMouseup() {
var _a;
if (props.disabled) return;
(_a = thumb.value) == null ? void 0 : _a.classList.remove("slider-thumb-active");
}
onMounted(() => {
document.addEventListener("mousemove", handleMousemove);
document.addEventListener("mouseup", handleMouseup);
});
onUnmounted(() => {
document.removeEventListener("mousemove", handleMousemove);
document.removeEventListener("mouseup", handleMouseup);
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: "slider",
ref_key: "slider",
ref: slider,
onMousedown: handleMousedown
}, [
createElementVNode("div", {
class: "slider-track",
ref_key: "track",
ref: track,
style: normalizeStyle({ width: valuePercentage.value + "%" })
}, null, 4),
createElementVNode("div", {
class: normalizeClass(["slider-thumb", { "slider-thumb-disabled": __props.disabled }]),
ref_key: "thumb",
ref: thumb,
style: normalizeStyle(thumbStyle.value)
}, null, 6)
], 544);
};
}
});
export {
_sfc_main as default
};