basic vue chat
1.0.0
Implementação do bate-papo baseado em Vue.
Você pode instalar o componente usando gerentes de pacotes, como npm ou fios ou instalar componente no repositório.
npm i basic-vue-chatyarn add basic-vue-chatgit clone https://github.com/jmaczan/basic-vue-chat.git
cd basic-vue-chat
npm i Os componentes usam Vue (pacote vue ), Fontawesome e Moment.js para Vue ( vue-moment ).
O bate-papo é um componente VUE único, que você pode encontrar em /src/components/basic-vue-chat/ . Para começar, basta importar o componente BasicVuechat e colocar a seguinte linha no seu código HTML:
< basic-vue-chat />Para empurrar a mensagem para conversar, basta passar no NewMessage Prop para o BasicVuechat . Exemplo:
< basic-vue-chat :new-message =" message " /> O objeto message acima pode fazer parte dos data no seu componente VUE, no qual você usará o BasicVuechat.
Exemplo de estrutura de mensagem correta:
{
id : 0 ,
author : 'Person' ,
imageUrl : 'http://path/to/image' ,
image : '' ,
contents : 'hi there' ,
date : '16:30'
} Você pode encontrar um exemplo de mensagem de mensagem no arquivo App.vue .
Quando o usuário envia mensagem, a mensagem é propagada ao componente BasicVuechat e o NewownMessage do BasicVuechat é emitido . Para lidar com este evento, você pode, por exemplo, fazer isso:
< basic-vue-chat @newOwnMessage =" onNewOwnMessage " /> Onde onNewOwnMessage(message) é um método no seu componente Vue, no qual você usará o BasicVuechat.
Exemplo de estrutura de carga útil correta do evento:
{
id : 1 ,
imageUrl : 'http://path/to/image' ,
image : File ( ) ,
contents : 'hello' ,
date : '16:31'
} Você pode fazer upload e receber imagens. Para anexar a imagem, use o botão PaperClip. A imagem será emitida na mensagem na image (como objeto File ) e nas propriedades imageUrl ( string de caminho).
Para iniciar o desenvolvimento, você pode usar o modo de recarga a quente:
npm run serve
Para construir a versão de produção:
npm run build
Para executar testes:
npm test
Para anexar dados simulados, basta passar o attachMock lógico para o BasicVuechat.
Os estilos são importados no componente principal BasicVueChat e as variáveis têm !default
< style lang="scss">
$primary : red ;
// above the following import you can override default values of variables like $primary
@import " ../../assets/scss/main.scss " ;
</ style > Passe title do suporte para o componente BasicVuechat.
< basic-vue-chat :title =" 'My Best Team' " /> Passe Prop initialFeed para o componente BasicVuechat.
< basic-vue-chat :initial-feed =" feed " />Exemplo de estrutura de dados correta:
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'
}
] Passe o componente inicial do initialAuthorId para o BasicVuechat para definir o ID do usuário atual. O valor padrão é 0 .
O chat usa o SCSS, para que você possa substituir facilmente as variáveis usadas no projeto. Você pode encontrá -los em /src/assets/scss/modules/_variables.scss . Todas as variáveis têm valores padrão.
| Descrição | Variável | Valor padrão |
|---|---|---|
| Cor primária | $ primário | $ slate-blue (#6b63d8) |
| Cor secundária | $ secundário | $ lavander (#B284ED) |
| Cor do cabeçalho | $ header-cor | $ Ghost-White (#FAF9FF) |
| Entrada cor de fundo | $ input-background-cor | $ Alice-Blue (#f2efff) |
| Família de fontes | $ font-família | 'Source Sans Pro', Sans-Serif |
| Peso da fonte | $ fontes-peso | 400 |
| Tamanho da fonte | $ font-tamanho | 14px |
| Cor do texto escuro | $ Dark-Text-Color | $ madison (#2C3E50) |
| Cor de texto leve | $ Light-Text-Color | $ Ghost-White (#FAF9FF) |
| Cor de fundo escuro | $ Dark-BG | $ madison (#2C3E50) |
| Cor de fundo leve | $ Light-BG | $ white (#ffffff) |
| Largura da janela de bate -papo | $ largura de janela | 500px |
| Altura da janela de bate -papo | $ altura da janela | 400px |
| Mensagem máxima de largura | $ Message-Max-Width | 200px |
partialsmodulesbasic-vue-chatDesenvolvido e testado no MacOS High Sierra 10.13 e no Google Chrome 69.
