basic vue chat
1.0.0
Implémentation du chat basé sur VUE.
Vous pouvez installer le composant à l'aide de gestionnaires de packages, tels que NPM ou YARN ou installer le composant à partir du référentiel.
npm i basic-vue-chatyarn add basic-vue-chatgit clone https://github.com/jmaczan/basic-vue-chat.git
cd basic-vue-chat
npm i Les composants utilisent Vue (package vue ), Fontawesome et Moment.js pour Vue ( vue-moment ).
Le chat est un seul composant Vue, que vous pouvez trouver dans /src/components/basic-vue-chat/ . Pour commencer, importez simplement le composant BasicVueChat et placez la ligne suivante dans votre code HTML:
< basic-vue-chat />Pour pousser le message pour discuter, passez simplement NewMessage Prop à BasicVueChat . Exemple:
< basic-vue-chat :new-message =" message " /> L'objet message ci-dessus peut faire partie des data de votre composant VUE dans lequel vous utiliserez BasicVueChat.
Exemple de structure de message correcte:
{
id : 0 ,
author : 'Person' ,
imageUrl : 'http://path/to/image' ,
image : '' ,
contents : 'hi there' ,
date : '16:30'
} Vous pouvez trouver un exemple de message qui pousse dans le fichier App.vue .
Lorsque l'utilisateur envoie un message, le message est propagé au composant BasicVueChat et l'événement newownmessage est émis . Pour gérer cet événement, vous pouvez par exemple le faire:
< basic-vue-chat @newOwnMessage =" onNewOwnMessage " /> où onNewOwnMessage(message) est une méthode dans votre composant VUE dans lequel vous utiliserez BasicVueChat.
Exemple de la structure de charge utile des événements corrects:
{
id : 1 ,
imageUrl : 'http://path/to/image' ,
image : File ( ) ,
contents : 'hello' ,
date : '16:31'
} Vous pouvez télécharger et recevoir des images. Pour attacher l'image, utilisez le bouton de trombone. L'image sera émise dans le message sur image (en tant qu'objet File ) et les propriétés imageUrl (Path string ).
Pour démarrer le développement, vous pouvez utiliser le mode de rechargement chaud:
npm run serve
Pour créer une version de production:
npm run build
Pour exécuter des tests:
npm test
Pour attacher des données simulées, passez simplement Logic Prop attachMock à BasicVueChat.
Les styles sont importés dans le composant principal BasicVueChat et les variables ont !default , donc cela signifie que vous pouvez remplacer les valeurs par défaut en définissant vos propres variables avant l'importation des styles.
< style lang="scss">
$primary : red ;
// above the following import you can override default values of variables like $primary
@import " ../../assets/scss/main.scss " ;
</ style > Passer title de prop sur le composant BasicVueChat.
< basic-vue-chat :title =" 'My Best Team' " /> Passer le propage initialFeed au composant BasicVueChat.
< basic-vue-chat :initial-feed =" feed " />Exemple de structure de données correcte:
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'
}
] Passez Prop initialAuthorId au composant BasicVueChat pour définir l'ID de l'utilisateur actuel. La valeur par défaut est 0 .
Chat utilise SCSS, vous pouvez donc facilement remplacer les variables utilisées dans le projet. Vous pouvez les trouver dans /src/assets/scss/modules/_variables.scss . Toutes les variables ont des valeurs par défaut.
| Description | Variable | Valeur par défaut |
|---|---|---|
| Couleur primaire | $ primaire | $ Slate-Blue (# 6B63D8) |
| Couleur secondaire | $ secondaire | $ lavender (# b284ed) |
| Couleur de tête | $ en tête-tête | $ fantôme-blanc (# faf9ff) |
| Couleur d'arrière-plan d'entrée | $ entrée-fond de couleur | $ Alice-Blue (# F2EFFF) |
| Famille de polices | $ Font-Family | 'Source Sans Pro', sans-serif |
| Poids de la police | $ de poids de police | 400 |
| Taille de la police | $ de la taille de police | 14px |
| Couleur de texte foncé | $ dark-text-coulor | $ Madison (# 2C3E50) |
| Couleur de texte clair | $ Light-Text-Color | $ fantôme-blanc (# faf9ff) |
| Couleur de fond foncé | $ sombre-bg | $ Madison (# 2C3E50) |
| Couleur de fond léger | $ léger-bg | $ blanc (#ffffff) |
| Largeur de la fenêtre de chat | $ largeur de fenêtre | 500px |
| Hauteur de fenêtre de chat | $-Window-Height | 400px |
| Message la largeur maximale | $ Message-max-largeur | 200px |
partialsmodulesbasic-vue-chatDéveloppé et testé sous Sierra 10.13 de MacOS High et Google Chrome 69.
