Vue: チャットダイアログボックスの実装

成果効果：画面の録画方法が分からないので画像で紹介しますチャットボックスの基本的な機能は実現していますが、細かい部分は考慮されていません。メッセージを入力しない場合でも写真や動画を送信できます。メッセージを入力すると、最新のメッセージの下部にスクロールバーが表示されたまま送信ボタンが表示されます。

実現方法：

1. レイアウト: 伸縮性のあるレイアウトを使用、フレックス方向: 行反転; フレックス方向: 行;

混合メッセージタイプと互換性を持たせるために、写真、ビデオ、テキストを 2 つのメッセージとして送信するほとんどのチャットボックスを参照してください。

よりシンプルな vant の Layout レイアウトを使用することもできます。

2. スクロールバーが下部にあり、最新のニュースが表示されます。

scrollToBottom() {
      var itemBox = this.$refs.itemBox;
      itemBox.scrollTop = itemBox.scrollHeight;
},

updated() {
    this.$nextTick(() => {
      this.scrollToBottom();
    });
},

3. 入力内容がスペースだらけで送信できない通常、すべてスペースでなければスペースは確保できますが、よく考えればスペースが改行する場合にも対応できます。これは単純な処理であり、すべての空間の場合のみを考慮しています。

valuet.trim().length

4: ビデオと写真のプレビュー: 画像のプレビューには vant を使用することをお勧めします。ビデオのプレビューには、同じページで複数のビデオタグを使用することはお勧めできません。ビデオの数は 3 つを超えないようにすることをお勧めします。そうしないと、ページがフリーズします。プロジェクト内でこれらを個別に使用することをお勧めします。プレビュービデオページを作成し、video タグのみを使用し、プレビュービデオをリンクに直接アップロードします。

5: チャット情報内のリンクを処理します。バックエンドによって提供されるチャットはすべて文字列である必要があります。リンクが直接文字列として表示される場合、クリックはジャンプしません。正規表現を使用してリッチテキストを追加して置き換えることができます。

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: 最後に、いくつかのスタイルの詳細を見てみましょう

長い単語は折り返されますが、数字、英語、記号は折り返されません。ブラウザがデフォルトでスペースを圧縮するという問題もあります。

word-break: break-all; //允许在单词内换行
word-wrap: break-word; //在长单词或 URL 地址内部进行换行
white-space: pre-wrap; //解决浏览器空格合并

いくつかのスタイルを設定するだけで、これらの属性の他の使用法を確認できます。

Vue: チャットダイアログボックスの実装

おすすめ