TxChat · Vue · tecexpress

Lokaler Nachrichtenverlauf mit Autoren, Schreibanzeige und Sendeereignissen. sent bestätigt die lokale Aufnahme, keine Serverzustellung.

Prop	Typ	Standard	Bedeutung
`dataSource`	`TxSource<ChatMessage> \| undefined`	`undefined`	Liste, Konfiguration oder DataSource-Instanz; hat Vorrang vor items.
`user`	`ChatUser`	`erforderlich`	Aktueller Chatautor.
`items`	`ChatMessage[] \| undefined`	`undefined`	Einträge; bei Datenbindung durch dataSource ersetzt.
`inputFieldText`	`string \| undefined`	`undefined`	Kontrollierter Nachrichtenentwurf.
`title`	`string \| undefined`	`Chat`	Titel der Ansicht.
`subtitle`	`string \| undefined`	``	Zusätzlicher Untertitel.
`label`	`string \| undefined`	`Chat`	Beschriftung beziehungsweise zugänglicher Name.
`placeholder`	`string \| undefined`	`Nachricht schreiben …`	Hinweis bei leerer Eingabe.
`emptyText`	`string \| undefined`	`Noch keine Nachrichten. Starte die Unterhaltung.`	Text des Leerzustands.
`disabled`	`boolean \| undefined`	`false`	Sperrt die Interaktion.
`readOnly`	`boolean \| undefined`	`false`	Verhindert Änderungen des Werts.
`loading`	`boolean \| undefined`	`false`	Zeigt den Ladezustand.
`sending`	`boolean \| undefined`	`false`	Sperrt Senden während einer eigenen laufenden Anfrage.
`maxLength`	`number \| undefined`	`4000`	Maximale Textlänge.
`typingUsers`	`ChatUser[] \| undefined`	`[]`	Aktuell schreibende Autoren.
`showAvatar`	`boolean \| undefined`	`true`	Zeigt Autorenbilder.
`showUserName`	`boolean \| undefined`	`true`	Zeigt Autorennamen.
`showDayHeaders`	`boolean \| undefined`	`true`	Gruppiert Nachrichten mit Tagesüberschriften.
`showMessageTimestamp`	`boolean \| undefined`	`true`	Zeigt Nachrichtenzeiten.
`locale`	`string \| undefined`	`de-DE`	Locale für Datums-/Zeitformatierung.

Ereignisse

Event	Payload / Verhalten
update:items	Neuer Wert von items; über v-model:items übernehmen (modelValue: v-model).
update:inputFieldText	Neuer Wert von inputFieldText; über v-model:inputFieldText übernehmen (modelValue: v-model).
messageEntered	ChatMessageEnteredEvent; cancel synchron setzen, um eigene Serververarbeitung zu starten.
messageSent	ChatMessageEvent nach lokaler Aufnahme.
typingStart	ChatTypingEvent beim Beginn des Schreibens.
typingEnd	ChatTypingEvent beim Ende des Schreibens.

Slots

Slot	Argumente
header	{ user }
empty	()
message	{ message, isOwn }

vue

<script setup lang="ts">
import { ref } from 'vue'
import { TxChat, type ChatMessage } from '@tekocloud.de/tecexpress'
import '@tekocloud.de/tecexpress/themes/index.css'
const messages = ref<ChatMessage[]>([])
</script>

<template>
  <TxChat v-model:items="messages" :user="{ id: 'me', name: 'Alex' }" />
</template>

TxChat.