@tencentcloud/roomkit-electron-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.34 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const _sfc_main = /* @__PURE__ */ Vue.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 = Vue.ref(props.modelValue);
const thumb = Vue.ref(null);
const slider = Vue.ref(null);
const track = Vue.ref(null);
Vue.watch(value, (newValue) => {
emit("update:modelValue", newValue);
});
Vue.watch(
() => props.modelValue,
(newValue) => {
value.value = newValue;
}
);
const valuePercentage = Vue.computed(() => {
return (value.value - props.min) / (props.max - props.min) * 100;
});
const thumbStyle = Vue.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");
}
Vue.onMounted(() => {
document.addEventListener("mousemove", handleMousemove);
document.addEventListener("mouseup", handleMouseup);
});
Vue.onUnmounted(() => {
document.removeEventListener("mousemove", handleMousemove);
document.removeEventListener("mouseup", handleMouseup);
});
return (_ctx, _cache) => {
return Vue.openBlock(), Vue.createElementBlock("div", {
class: "slider",
ref_key: "slider",
ref: slider,
onMousedown: handleMousedown
}, [
Vue.createElementVNode("div", {
class: "slider-track",
ref_key: "track",
ref: track,
style: Vue.normalizeStyle({ width: valuePercentage.value + "%" })
}, null, 4),
Vue.createElementVNode("div", {
class: Vue.normalizeClass(["slider-thumb", { "slider-thumb-disabled": __props.disabled }]),
ref_key: "thumb",
ref: thumb,
style: Vue.normalizeStyle(thumbStyle.value)
}, null, 6)
], 544);
};
}
});
exports.default = _sfc_main;