@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,
101 lines (100 loc) • 3.43 kB
JavaScript
import { ref, provide, watch, createElementBlock, openBlock, createElementVNode, createVNode, mergeProps, toDisplayString, unref, withCtx, renderSlot, nextTick } from "vue";
import { IconArrowStrokeSelectDown } from "@tencentcloud/uikit-base-component-vue3";
import ActionSheep from "../ActionSheep.vue2.mjs";
/* empty css */
import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.mjs";
const _hoisted_1 = { class: "label" };
const _hoisted_2 = { class: "custom-option-container" };
const _sfc_main = {
__name: "SelectH5",
props: {
value: {
type: [String, Number, Date]
}
},
emits: ["change", "input"],
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const selectedLabel = ref("");
const selectedRef = ref();
const options = ref([]);
const drawerShow = ref(false);
const toggleDrawer = async () => {
drawerShow.value = !drawerShow.value;
await nextTick();
if (drawerShow.value) {
await nextTick();
await selectedRef.value.scrollIntoView({ block: "center" });
}
};
const onChange = (value) => {
emit("change", value);
emit("input", value);
};
const updateSelectedLabel = (newValue) => {
const index = options.value.findIndex((option) => option.value === newValue);
const matchedOption = options.value[index];
if (matchedOption && matchedOption.label !== selectedLabel.value) {
selectedLabel.value = matchedOption.label;
selectedRef.value = matchedOption.ref;
}
};
const addOption = (option) => {
const index = options.value.findIndex((item) => item.value === option.value);
if (index >= 0) {
options.value[index] = option;
updateSelectedLabel(props.value);
return;
}
options.value.push(option);
updateSelectedLabel(props.value);
};
const handleOptionClick = (value) => {
updateSelectedLabel(value);
onChange(value);
toggleDrawer();
};
provide("TSelect", {
value: props.value,
label: selectedLabel,
addOption,
handleOptionClick
});
watch(
() => props.value,
(newValue, oldValue) => {
if (newValue === oldValue) return;
updateSelectedLabel(newValue);
},
{ immediate: true }
);
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", null, [
createElementVNode("div", mergeProps({
class: "custom-select",
onChange: _cache[0] || (_cache[0] = ($event) => onChange($event.target.value)),
onClick: toggleDrawer
}, _ctx.$attrs), [
createElementVNode("span", _hoisted_1, toDisplayString(selectedLabel.value || props.value), 1),
createVNode(unref(IconArrowStrokeSelectDown), { size: "12" })
], 16),
createVNode(ActionSheep, {
visible: drawerShow.value,
onInput: _cache[1] || (_cache[1] = ($event) => drawerShow.value = $event)
}, {
default: withCtx(() => [
createElementVNode("div", _hoisted_2, [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
])
]),
_: 3
}, 8, ["visible"])
]);
};
}
};
const SelectH5 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-dd236b6e"]]);
export {
SelectH5 as default
};