basic vue chat
1.0.0
Vueベースのチャットの実装。
NPMやYARNなどのパッケージマネージャーを使用してコンポーネントをインストールしたり、リポジトリからコンポーネントをインストールしたりできます。
npm i basic-vue-chatyarn add basic-vue-chatgit clone https://github.com/jmaczan/basic-vue-chat.git
cd basic-vue-chat
npm iコンポーネントは、VUE（ vueパッケージ）、Fonteusome、およびMoment.js for Vue（ vue-moment ）を使用します。
チャットは単一のVueコンポーネントで、 /src/components/basic-vue-chat/で見つけることができます。開始するには、BasicVueChatコンポーネントをインポートして、次の行をHTMLコードに入れます。
< basic-vue-chat />メッセージをプッシュするには、 NewMessage PropをBasicVueChatに渡すだけです。例：
< basic-vue-chat :new-message =" message " />上記のmessageオブジェクトは、BasicVueChatを使用するVUEコンポーネントのdataの一部である場合があります。
正しいメッセージ構造の例：
{
id : 0 ,
author : 'Person' ,
imageUrl : 'http://path/to/image' ,
image : '' ,
contents : 'hi there' ,
date : '16:30'
} App.vueファイルでメッセージを押しているメッセージの例を見つけることができます。
ユーザーがメッセージを送信すると、メッセージはBasicVueChatコンポーネントに伝播され、イベントNewOwnMessageが放出されます。このイベントを処理するには、たとえばこれを行うことができます。
< basic-vue-chat @newOwnMessage =" onNewOwnMessage " /> onNewOwnMessage(message)は、bucevuechatを使用するVueコンポーネントのメソッドです。
正しいイベントペイロード構造の例：
{
id : 1 ,
imageUrl : 'http://path/to/image' ,
image : File ( ) ,
contents : 'hello' ,
date : '16:31'
}画像をアップロードして受信できます。画像を添付するには、[クリップ]ボタンを使用します。画像は、 image （ Fileオブジェクトとして）およびimageUrl （パスstring ）プロパティのメッセージで放出されます。
開発を開始するには、ホットリロードモードを使用できます。
npm run serve
生産バージョンを構築するには：
npm run build
テストを実行するには：
npm test
モックデータを添付するには、basicvueChatにロジックプロップattachMockを渡すだけです。
スタイルはメインのBasicVueChatコンポーネントにインポートされ、変数には!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 >プロップtitleをBasicVueChatコンポーネントにパスします。
< basic-vue-chat :title =" 'My Best Team' " />PROP initialFeed BasicVueChatコンポーネントに渡します。
< basic-vue-chat :initial-feed =" feed " />正しいデータ構造の例：
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'
}
] PROP initialAuthorId BasicVueChatコンポーネントに渡して、現在のユーザーのIDを定義します。デフォルト値は0です。
チャットはSCSSを使用するため、プロジェクトで使用される変数を簡単にオーバーライドできます。 /src/assets/scss/modules/_variables.scssで見つけることができます。すべての変数にはデフォルト値があります。
| 説明 | 変数 | デフォルト値 |
|---|---|---|
| 原色 | $プライマリ | $ slate-blue（＃6b63d8） |
| 二次色 | $セカンダリー | $ラベンダー（＃b284ed） |
| ヘッダーカラー | $ header-color | $ ghost-white（＃faf9ff） |
| 入力背景色 | $ input-background-color | $ alice-blue（＃f2efff） |
| フォントファミリー | $ font-family | 「Source Sans Pro」、Sans-Serif |
| フォント重量 | $ font-weight | 400 |
| フォントサイズ | $ font-size | 14px |
| 暗いテキストカラー | $ダークテキストカラー | $マディソン（＃2C3E50） |
| 軽いテキストの色 | $ light-text-color | $ ghost-white（＃faf9ff） |
| 暗い背景色 | $ dark-bg | $マディソン（＃2C3E50） |
| 軽い背景色 | $ light-bg | $ white（#ffffff） |
| チャットウィンドウの幅 | $ window-width | 500px |
| チャットウィンドウの高さ | $ window-height | 400px |
| メッセージ最大幅 | $ message-max-width | 200px |
partials Directoryのコンポーネントスタイルmodulesディレクトリの変数と設定basic-vue-chatディレクトリのサブディレクトリにありますMacOS High Sierra 10.13およびGoogle Chrome 69の下で開発およびテストされました。
