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