basic vue chat下載 - basic vue chat源代碼下載

basic vue chat

Ai源碼

1.0.0

下載

Basic-vue-chat徽標

基本價值

實施基於VUE的聊天。

基本價值
- 安裝
  - NPM
  - 紗
  - 使用存儲庫
- 依賴性
- 用法
  - 推動消息
  - 處理用戶的消息
  - 圖像
  - 命令
  - 模擬數據
- 定制
  - 樣式
  - 標題
  - 初始數據
  - 造型
- 代碼結構
- 使用的技術

安裝

您可以使用軟件包管理器（例如NPM或YARN）安裝組件，也可以從存儲庫中安裝組件。

NPM

npm i basic-vue-chat

紗

yarn add basic-vue-chat

使用存儲庫

git clone https://github.com/jmaczan/basic-vue-chat.git
cd basic-vue-chat
npm i

依賴性

組件使用VUE（ vue軟件包），fontawesome和Monment.js用於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)是您的VUE組件中的一種方法，您將在其中使用basicVuechat。

正確的事件有效負載結構的示例：

 {
  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

模擬數據

要附加模擬數據，只需將邏輯Prop attachMock給BasicVuechat即可。

定制

樣式

樣式是在Main 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傳遞給基本Vuechat組件。

 < basic-vue-chat :title =" 'My Best Team' " />

初始數據

將Prop initialFeed傳遞給基本Vuechat組件。

 < 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傳遞到基本Vuechat組件，以定義當前用戶的ID。默認值為0 。

造型

聊天使用SCSS，因此您可以輕鬆地覆蓋項目中使用的變量。您可以在/src/assets/scss/modules/_variables.scss中找到它們。所有變量都有默認值。

描述	多變的	預設值
原色	$主	$ Slate-Blue（＃6B63D8）
次要顏色	$中學	$薰衣草（＃B284ED）
標題顏色	$標題彩色	$ ghost-white（＃faf9ff）
輸入背景顏色	$輸入背景色	$ Alice-Blue（＃f2efff）
字體家庭	$字體家庭	sans sans pro'，sans-serif
字體重量	$字體重量	400
字體大小	$字體大小	14px
深文顏色	$ Dark-Text-Color	$ MADISON（＃2C3E50）
輕型文字顏色	$淺色文本色	$ ghost-white（＃faf9ff）
深色背景顏色	$ dark-bg	$ MADISON（＃2C3E50）
輕型背景顏色	$ light-bg	$白色（#ffffff）
聊天窗口寬度	$窗口	500px
聊天窗口高度	$窗戶高	400px
消息最大寬度	$ Message-Max寬度	200px