48 lines
1.1 KiB
Vue
48 lines
1.1 KiB
Vue
<template>
|
|
<svg
|
|
id="messenger"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
@click="emittMessage"
|
|
>
|
|
<MessageView />
|
|
<TextAudioInput />
|
|
</svg>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import MessageView from "@/components/messageView/index.vue";
|
|
import TextAudioInput from "@/components/taInput/index.vue";
|
|
import { defineComponent, ref } from "vue";
|
|
import {Messages} from './mockMessages';
|
|
import useMitt from "@/modules/mitt";
|
|
|
|
export default defineComponent({
|
|
name: "Messenger",
|
|
components: { MessageView, TextAudioInput },
|
|
setup() {
|
|
const { emitter } = useMitt();
|
|
const counter = ref(0);
|
|
|
|
const emittMessage = () => {
|
|
console.log('testing')
|
|
emitter.emit('animateSend', Messages[counter.value])
|
|
counter.value++;
|
|
}
|
|
return {
|
|
emittMessage
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#messenger {
|
|
width: 350px;
|
|
height: 500px;
|
|
background-color: #e6e6e6;
|
|
box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.3);
|
|
// border-radius: 20px;
|
|
}
|
|
</style>
|