@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,
90 lines (89 loc) • 2.43 kB
JavaScript
import { defineComponent, computed, ref, onMounted, createBlock, openBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeStyle, normalizeClass, createVNode, toDisplayString, vShow } from "vue";
import SvgIcon from "../SvgIcon.vue.mjs";
import success from "./images/success.vue.mjs";
import error from "./images/error.vue.mjs";
import warning from "./images/warning.vue.mjs";
import info from "./images/info.vue.mjs";
const _hoisted_1 = { class: "t-message-text" };
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "Message",
props: {
type: {
type: String,
default: "success"
},
message: {
type: [String, Number],
default: ""
},
duration: {
type: Number,
default: 3e3
},
remove: {
type: Function,
default: () => {
}
},
top: {
type: Object,
default: () => {
}
},
zIndex: {
type: Number,
default: 1e3
}
},
setup(__props) {
const props = __props;
const svgName = computed(() => {
const svgMap = { success, error, warning, info };
return svgMap[props.type] || info;
});
const messageRef = ref();
const isShow = ref(false);
onMounted(async () => {
onOpen();
});
const timer = ref();
const onOpen = () => {
isShow.value = true;
timer.value && clearTimeout(timer.value);
timer.value = setTimeout(() => {
onClose();
}, props.duration);
};
const onClose = () => {
isShow.value = false;
props.remove();
};
return (_ctx, _cache) => {
return openBlock(), createBlock(Transition, { name: "message" }, {
default: withCtx(() => [
withDirectives(createElementVNode("div", {
ref_key: "messageRef",
ref: messageRef,
class: normalizeClass(["t-message", `t-message-${props.type}`]),
style: normalizeStyle({
top: props.top.value,
zIndex: props.zIndex
})
}, [
createVNode(SvgIcon, {
icon: svgName.value,
class: "t-message-icon"
}, null, 8, ["icon"]),
createElementVNode("span", _hoisted_1, toDisplayString(props.message), 1)
], 6), [
[vShow, isShow.value]
])
]),
_: 1
});
};
}
});
export {
_sfc_main as default
};