Efeito de conquista: não sei gravar a tela, então mostro com fotos. A função básica da caixa de bate-papo é realizada e alguns detalhes não são totalmente considerados. Você pode enviar fotos ou vídeos quando nenhuma mensagem for digitada e o botão enviar será exibido após a digitação de uma mensagem, mantendo a barra de rolagem na parte inferior da última mensagem.
Método para realizar:
1. Layout: usando layout elástico, direção flexível: linha reversa; direção flexível: linha;
Para ser compatível com tipos de mensagens mistas, consulte a maioria das caixas de bate-papo, que enviam fotos, vídeos e textos como duas mensagens.
Você também pode usar o Layout Layout da Vant, que será mais simples.
2. A barra de rolagem está na parte inferior, mostrando as últimas notícias:
scrollToBottom() {
var itemBox = this.$refs.itemBox;
itemBox.scrollTop = itemBox.scrollHeight;
},updated() {
this.$nextTick(() => {
this.scrollToBottom();
});
},3. A entrada está cheia de espaços e não pode ser enviada. Geralmente, desde que não sejam todos os espaços, os espaços podem ser reservados. Se você pensar com mais cuidado, também pode lidar com a situação em que os espaços mudam de linha. Aqui é um tratamento simples, considerando apenas o caso de todos os espaços:
valor.trim().comprimento
4: Visualizar vídeos e fotos: Recomenda-se usar vant para visualizações de imagens. Não é recomendado usar várias tags de vídeo na mesma página para visualizações de vídeos. Recomenda-se não exceder 3 vídeos, caso contrário, causará o congelamento da página. Recomenda-se usá-los separadamente no projeto Crie uma página de vídeo de visualização, use apenas uma tag de vídeo e carregue o vídeo de visualização diretamente no link.
5: Processe os links nas informações do chat. O chat fornecido pelo back-end deve ser todo strings. Se o link for exibido diretamente como uma string, o clique não irá pular. Você pode usar expressões regulares para adicionar rich text para substituí-lo.
setLinks(text) {
if (text) {
const Rexp =
/(\b(https?|ftp|file):\/\/([-A-Z0-9+&@#%?=~_|!:,.;]*)([-A-Z0-9+&@#%?\/=~_|!:,.;]*)[-A-Z0-9+&@#\/%=~_|])/gi;
return text.replace(Rexp, "<a href='$1' target='_blank'>$1</a>");
}
},6: Finalmente, observe os detalhes de vários estilos
Palavras longas quebram, e números, inglês, símbolos não quebram, e também há o problema do navegador compactar espaços por padrão
word-break: break-all; //允许在单词内换行
word-wrap: break-word; //在长单词或 URL 地址内部进行换行
white-space: pre-wrap; //解决浏览器空格合并Basta definir alguns estilos, você pode dar uma olhada em outros usos desses atributos
