68 lines
1.7 KiB
Vue
68 lines
1.7 KiB
Vue
<template>
|
|
<svg
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
:viewBox="scrollView"
|
|
>
|
|
<g id="messageRenderer">
|
|
<g
|
|
v-for="(item, index) in renderArr"
|
|
:key="index"
|
|
:id="index"
|
|
class="messageList"
|
|
transform="translate(0, 0)"
|
|
>
|
|
<transition
|
|
appear
|
|
v-on:before-appear="beforeEnter"
|
|
v-on:appear="enter"
|
|
v-on:after-enter="afterEnter"
|
|
>
|
|
<MessageItem :item="item" :key="index" />
|
|
</transition>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import useMessageRenderer from "@/composables/messageRenderer/useMessageRenderer";
|
|
import useScroller from "@/composables/scroller/useScroller";
|
|
import {
|
|
defineComponent,
|
|
reactive,
|
|
inject,
|
|
} from "vue";
|
|
import MessageItem from "./messageItem.vue";
|
|
import { Message } from "@/types/message/index";
|
|
import { Mitt } from "@/types/mitt/index";
|
|
export default defineComponent({
|
|
name: "MessageRenderer",
|
|
components: { MessageItem },
|
|
setup() {
|
|
const renderArr: Message[] = reactive([]);
|
|
|
|
// imports mitt Emitter safely
|
|
let emitter: Mitt;
|
|
const emitterInject: Mitt | undefined = inject("mitt");
|
|
if (emitterInject) {
|
|
emitter = emitterInject;
|
|
emitter.on("renderMessage", (payload: Message | undefined) => {
|
|
if (payload) renderArr.push(payload);
|
|
});
|
|
}
|
|
|
|
const { beforeEnter, enter, afterEnter } = useMessageRenderer();
|
|
const {scrollView} = useScroller({ targetId: "messageRenderer"});
|
|
|
|
return {
|
|
renderArr,
|
|
beforeEnter,
|
|
enter,
|
|
afterEnter,
|
|
scrollView,
|
|
};
|
|
},
|
|
});
|
|
</script>
|