ChatGPT vue2聊天框实现

vue.js创建引入组件

(vue-quick-chat)

This vue component is a simple chat that can be easily imported and used in your project.

该vue组件是一个简单的聊天程序，可以轻松导入并在项目中使用。

(Features)

• Custom style
  定制风格
• Handle on type event and on message submit
  处理类型事件和消息提交
• Chat with multiple participants
  与多位参与者聊天

(Instalation)

yarn add vue-quick-chat

or with npm

或使用npm

npm install vue-quick-chat --save

(Usage)

import { Chat } from 'vue-quick-chat'
export default {
  components: {
    Chat
  },
}

<template>
  <div>
      <Chat 
       :participants="participants"
       :myself="myself"
       :messages="messages"
       :onType="onType"
       :onMessageSubmit="onMessageSubmit"
       :chatTitle="chatTitle"
       :placeholder="placeholder"
       :colors="colors"
       :borderStyle="borderStyle"
       :hideCloseButton="hideCloseButton"
       :closeButtonIconSize="closeButtonIconSize"
       :submitIconSize="submitIconSize"/>
   </div>
</template>

import { Chat } from 'vue-quick-chat'
export default {
  components: {
    Chat
  },
  data(){
    return {
      participants: [
        {
          name: 'Arnaldo',
          id: 1
        },
        {
          name: 'José',
          id: 2
        }
      ],
      myself: {
        name: 'Matheus S.',
        id: 3
      },
      messages: [
        {
          content: 'received messages', 
          myself: false,
          participantId: 1,
          timestamp: { year: 2019, month: 3, day: 5, hour: 20, minute: 10, second: 3, millisecond: 123 }
        },
        {
          content: 'sent messages', 
          myself: true,
          participantId: 3,
          timestamp: { year: 2019, month: 4, day: 5, hour: 19, minute: 10, second: 3, millisecond:123 }
        },
        {
          content: 'other received messages', 
          myself: false,
          participantId: 2,
          timestamp: { year: 2019, month: 5, day: 5, hour: 10, minute: 10, second: 3, millisecond: 123 }
        }
      ],
      chatTitle: 'My chat title',
      placeholder: 'send your message',
      colors:{
        header:{
          bg: '#d30303',
          text: '#fff'
        },
        message:{
          myself: {
            bg: '#fff',
            text: '#bdb8b8'
          },
          others: {
            bg: '#fb4141',
            text: '#fff'
          }
        },
        submitIcon: '#b91010'
      },
      borderStyle: {
        topLeft: "10px",
        topRight: "10px",
        bottomLeft: "10px",
        bottomRight: "10px",
      },
      hideCloseButton: false,
      submitIconSize: "20px",
      closeButtonIconSize: "20px"
    }
  },
  methods: {
    onType: function (event){
      //here you can set any behavior
    },
    onMessageSubmit: function(message){
      //here you can set any behavior
    }
  }

(Component Props)

name	type	required	default	description
participants	Array	true		An array of participants. Each participant should be an Object with name and id
myself	Object	true		Object of my participant. "myself" should be an Object with name and id
messages	Array	true		An array of messages. Each message should be an Object with content, myself, participantId and timestamp
onType	Function	false	() => false	Event called when the user is typing
onMessageSubmit	Function	false	() => false	Event called when the user sends a new message
chatTitle	String	false	Empty String	The title on chat header
placeholder	String	false	'type your message here'	The placeholder of message text input
colors	Object	true		Object with the color's description of style properties
borderStyle	Object	false	{ topLeft: "10px", topRight: "10px", bottomLeft: "10px", bottomRight: "10px"}	Object with the description of border style properties
hideCloseButton	Boolean	false	false	If true, the Close button will be hidden
submitIconSize	String	false	"15px"	The submit icon size in pixels.
closeButtonIconSize	String	false	"15px"	The close button icon size in pixels.

名称	类型	需要	默认	描述
参加者	数组	真正		一系列参与者。 每个参与者都应该是一个具有名称和ID的对象
我	目的	真正		我的参与者的对象。 “我自己”应该是具有名称和ID的对象
讯息	数组	真正		消息数组。 每条消息都应该是一个包含内容，本人，参与者ID和时间戳的对象
onType	功能	假	()=>错误	用户键入时调用的事件
onMessageSubmit	功能	假	()=>错误	用户发送新消息时调用的事件
chatTitle	串	假	空字符串	聊天标题上的标题
占位符	串	假	'在这里输入你的消息'	消息文本输入的占位符
颜色	目的	真正		具有颜色的样式属性描述的对象
borderStyle	目的	假	{topLeft：“ 10px”，topRight：“ 10px”，bottomLeft：“ 10px”，bottomRight：“ 10px”}	具有边框样式属性描述的对象
hideCloseButton	布尔型	假	假	如果为true，则“关闭”按钮将被隐藏
SubmitIconSize	串	假	“ 15px”	提交图标大小(以像素为单位)。
closeButtonIconSize	串	假	“ 15px”	关闭按钮图标大小(以像素为单位)。

(participant)

name	type	description
id	int	The user id should be an unique value
name	String	The user name that will be displayed

名称	类型	描述
ID	整型	用户标识应为唯一值
名称	串	将显示的用户名

Example

例

{
  name:  'Username',
  id: 1
},

(message)

name	type	description
content	String	The message text content
myself	boolean	Wether the message was sent by myself participant or by other participant
participantId	int	The participant's id who sent the message
timestamp	Object	Object describing the year, month, day, hour, minute, second and millisecond that the message was sent

名称	类型	描述
内容	串	消息文字内容
我	布尔值	消息是由我自己的参与者还是其他参与者发送的
参与者编号	整型	发送消息的参与者的ID
时间戳记	目的	描述消息发送的年，月，日，时，分，秒和毫秒的对象

Example

例

{
  content: 'received messages', 
  myself: false,
  participantId: 1,
  timestamp: { year: 2019, month: 3, day: 5, hour: 20, minute: 10, second: 3, millisecond: 123 }
}

(color)

name	type	description
header	Object	Object containing the header background and text color
message	Object	Object containing the message background and text color. The Object should contains the style for 'myself' and 'others'
submitIcon	String	The color applied to the send message button icon

名称	类型	描述
标头	目的	包含标题背景和文本颜色的对象
信息	目的	包含消息背景和文本颜色的对象。 对象应包含“我自己”和“其他”的样式
SubmitIcon	串	应用于发送消息按钮图标的颜色

Example

例

{
  header:{
    bg: '#d30303',
    text: '#fff'
  },
  message:{
    myself: {
      bg: '#fff',
      text: '#bdb8b8'
    },
    others: {
      bg: '#fb4141',
      text: '#fff'
    }
  },
  submitIcon: '#b91010'
}

(Project setup)

npm install

(Compiles and hot-reloads for development)

npm run serve

(Compiles and minifies for production)

npm run build

(Run your tests)

npm run test

(Lints and fixes files)

npm run lint

翻译自: https://vuejsexamples.com/a-simple-chat-component-created-with-vue-js/

vue.js创建引入组件