basic vue chat
1.0.0
Implementierung des VUE-basierten Chats.
Sie können die Komponente über Paketmanager wie NPM oder Garn oder die Komponente aus dem Repository installieren.
npm i basic-vue-chatyarn add basic-vue-chatgit clone https://github.com/jmaczan/basic-vue-chat.git
cd basic-vue-chat
npm i Komponenten verwenden Vue ( vue Paket), FontAwesome und moment.js für VUE ( vue-moment ).
Chat ist eine einzelne Vue-Komponente, die Sie in /src/components/basic-vue-chat/ finden können. Importieren Sie zu Beginn einfach die BasicVuechat -Komponente und geben Sie die folgende Zeile in Ihren HTML -Code ein:
< basic-vue-chat />Um die Nachricht zum Chat zu verschieben, übergeben Sie einfach Newmessage Prop an BasicVuechat . Beispiel:
< basic-vue-chat :new-message =" message " /> Das obige message kann Teil von data in Ihrer VUE -Komponente sein, in der Sie BasicVuechat verwenden.
Beispiel für die korrekte Nachrichtenstruktur:
{
id : 0 ,
author : 'Person' ,
imageUrl : 'http://path/to/image' ,
image : '' ,
contents : 'hi there' ,
date : '16:30'
} Sie finden ein Beispiel für eine Nachricht, die in App.vue -Datei gedrückt wird.
Wenn der Benutzer eine Nachricht sendet, wird die Nachricht an die BasicVuEchat -Komponente und Ereignis NewownMessage ausgegeben . Um dieses Ereignis zu bewältigen, können Sie beispielsweise Folgendes tun:
< basic-vue-chat @newOwnMessage =" onNewOwnMessage " /> Wo onNewOwnMessage(message) eine Methode in Ihrer VUE -Komponente ist, in der Sie BasicVuechat verwenden.
Beispiel für die korrekte Ereignisnutzlaststruktur:
{
id : 1 ,
imageUrl : 'http://path/to/image' ,
image : File ( ) ,
contents : 'hello' ,
date : '16:31'
} Sie können Bilder hochladen und empfangen. Verwenden Sie zum Anbringen von Bild eine Schaltfläche "Paperclip". Das Bild wird in Meldungen auf image (als File ) und imageUrl ( string ) -Heeigenschaften emittiert.
Um die Entwicklung zu beginnen, können Sie den Hot Reload -Modus verwenden:
npm run serve
Produktionsversion erstellen:
npm run build
Tests ausführen:
npm test
Um Scheindaten anzuhängen, übergeben Sie einfach Logic Prop attachMock an BasicVuechat.
Stile werden in den Hauptkomponenten BasicVueChat importiert, und Variablen haben !default Standardwerte. Daher können Sie Standardwerte überschreiben, indem Sie Ihre eigenen Variablen vor dem Import von Stilen definieren.
< style lang="scss">
$primary : red ;
// above the following import you can override default values of variables like $primary
@import " ../../assets/scss/main.scss " ;
</ style > Übergeben Sie den Prop title an BasicVuechat -Komponente.
< basic-vue-chat :title =" 'My Best Team' " /> Übergeben Sie die Propit initialFeed an die BasicVuechat -Komponente.
< basic-vue-chat :initial-feed =" feed " />Beispiel für die korrekte Datenstruktur:
const feed = [
{
id : 1 ,
author : 'Person' ,
imageUrl : 'http://path/to/image' ,
contents : 'hi there' ,
date : '16:30'
} ,
{
id : 0 ,
author : 'Me' ,
contents : 'hello' ,
date : '16:30'
}
] Übergeben Sie die initialAuthorId an die BasicVuechat -Komponente, um die ID des aktuellen Benutzers zu definieren. Standardwert ist 0 .
Chat verwendet SCSS, sodass Sie im Projekt, die im Projekt verwendet werden, leicht überschreiben können. Sie finden sie in /src/assets/scss/modules/_variables.scss . Alle Variablen haben Standardwerte.
| Beschreibung | Variable | Standardwert |
|---|---|---|
| Grundfarbe | $ primär | $ slate-blue (#6b63d8) |
| Sekundäre Farbe | $ sekundär | $ lavendel (#b284ed) |
| Headerfarbe | $ Header-Color | $ Ghost-White (#faf9ff) |
| Hintergrundfarbe Eingabe | $ Input-Background-Color | $ alice-blue (#f2efff) |
| Schriftfamilie | $ font-familie | 'Quelle sans Pro', ohne Serif |
| Schriftgewicht | $ Schriftgewicht | 400 |
| Schriftgröße | $ Schriftgröße | 14px |
| Dunkle Textfarbe | $ dark-textfarben | $ madison (#2c3e50) |
| Leichte Textfarbe | $ light-textfarben | $ Ghost-White (#faf9ff) |
| Dunkle Hintergrundfarbe | $ Dark-Bg | $ madison (#2c3e50) |
| Leichte Hintergrundfarbe | $ hell-bg | $ White (#ffffff) |
| Chat -Fensterbreite | $ fensterbreite | 500px |
| Chat -Fensterhöhe | $ Fensterhöhe | 400px |
| Nachricht maximal Breite | $ message-max-width | 200px |
partials -Verzeichnismodulesbasic-vue-chat VerzeichnissesEntwickelt und getestet unter macOS High Sierra 10.13 und Google Chrome 69.
