basic vue chat
1.0.0
Implementación del chat basado en Vue.
Puede instalar el componente utilizando los administradores de paquetes, como NPM o hilo o instalar componente desde el repositorio.
npm i basic-vue-chatyarn add basic-vue-chatgit clone https://github.com/jmaczan/basic-vue-chat.git
cd basic-vue-chat
npm i Los componentes usan Vue (paquete vue ), Fontawesome y Moment.js para Vue ( vue-moment ).
El chat es un componente VUE único, que puede encontrar en /src/components/basic-vue-chat/ . Para comenzar, solo importe el componente BasicVuechat y coloque la siguiente línea en su código HTML:
< basic-vue-chat />Para presionar el mensaje para chatear, simplemente pase NewMessage Prop a BasicVuechat . Ejemplo:
< basic-vue-chat :new-message =" message " /> El objeto message anterior puede ser parte de data en su componente VUE en el que usará BasicVuechat.
Ejemplo de estructura correcta de mensajes:
{
id : 0 ,
author : 'Person' ,
imageUrl : 'http://path/to/image' ,
image : '' ,
contents : 'hi there' ,
date : '16:30'
} Puede encontrar un ejemplo de presentación de mensajes en el archivo App.vue .
Cuando el usuario envía un mensaje, el mensaje se propaga al componente BasicVUeChat y se emite el Message de Evento . Para manejar este evento, puede, por ejemplo, hacer esto:
< basic-vue-chat @newOwnMessage =" onNewOwnMessage " /> Donde onNewOwnMessage(message) es un método en su componente VUE en el que usará BasicVuechat.
Ejemplo de estructura de carga útil de eventos correcta:
{
id : 1 ,
imageUrl : 'http://path/to/image' ,
image : File ( ) ,
contents : 'hello' ,
date : '16:31'
} Puede cargar y recibir imágenes. Para adjuntar la imagen, use el botón PaperClip. La imagen se emitirá en el mensaje en las propiedades image (como objeto File ) e imageUrl (stry string ).
Para comenzar el desarrollo, puede usar el modo de recarga caliente:
npm run serve
Para construir la versión de producción:
npm run build
Para ejecutar pruebas:
npm test
Para adjuntar datos simulados, simplemente pase el accesorio lógico attachMock a BasicVuechat.
Los estilos se importan en el componente principal BasicVueChat y las variables tienen valores !default , por lo que significa que puede anular los valores predeterminados definiendo sus propias variables antes de la importación de los estilos.
< style lang="scss">
$primary : red ;
// above the following import you can override default values of variables like $primary
@import " ../../assets/scss/main.scss " ;
</ style > Pase title de apoyo al componente BasicVuechat.
< basic-vue-chat :title =" 'My Best Team' " /> Pase PROP initialFeed al componente BasicVuechat.
< basic-vue-chat :initial-feed =" feed " />Ejemplo de estructura de datos correcta:
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'
}
] Pase PROP initialAuthorId al componente BasicVuechat para definir la ID actual del usuario. El valor predeterminado es 0 .
El chat usa SCSS, por lo que puede anular fácilmente las variables utilizadas en el proyecto. Puede encontrarlos en /src/assets/scss/modules/_variables.scss . Todas las variables tienen valores predeterminados.
| Descripción | Variable | Valor predeterminado |
|---|---|---|
| Color primario | $ primario | $ Slate-Blue (#6B63D8) |
| Color secundario | $ Secundario | $ Lavender (#B284ED) |
| Color de encabezado | $ Color de encabezado | $ Ghost-White (#FAF9FF) |
| Color de fondo de entrada | $ Input-Background-Color | $ Alice-Blue (#f2efff) |
| Familia de fuentes | $ Font-Family | 'Source Sans Pro', Sans-Serif |
| Peso de la fuente | $ Font-Weight | 400 |
| Tamaño de fuente | $ Font-Size | 14px |
| Color de texto oscuro | $ Color de texto oscuro | $ Madison (#2C3E50) |
| Color de texto ligero | $ Color de texto de luz | $ Ghost-White (#FAF9FF) |
| Color de fondo oscuro | $ Dark-bg | $ Madison (#2C3E50) |
| Color de fondo ligero | $ Light-Bg | $ White (#ffffff) |
| Ancho de la ventana de chat | $ Window-Width | 500px |
| Altura de la ventana de chat | $ ventana-altura | 400px |
| Mensaje Max Ancho | $ Message-Max-width | 200px |
partialsmodulesbasic-vue-chatDesarrollado y probado con MacOS High Sierra 10.13 y Google Chrome 69.
