oh-my-chat

1.0.10 • Public • Published

oh-my-chat

install

yarn add oh-my-chat
// or
npm i oh-my-chat

usage

import Vue from 'vue'
import ChatRoom from 'oh-my-chat'
import 'oh-my-chat/dist/oh-my-chat.css'
 
Vue.component(ChatRoom.name, ChatRoom)
<template>
  <ChatRoom
    ref="room"
    :avatar-component="avatarComp"
    :message-components="messageComps"
    :header-components="headerComps"
    :footer-components="footerComps"
    :widget-components="widgetComps"
  />
</template>
export default {
  methods: {
      handleAddBubble(type) {
        const images = new Array(Math.floor(Math.random() * 9)).fill('')
        images.forEach((item, index) => {
          images[index] = faker.image.image()
        })
        this.$refs.room.addMessage({
          type,
          float: type === 'text-msg' ? 'left' : 'right',
          id: Math.random().toString(10).substring(3, 6),
          loading: type === 'loading-msg',
          pending: type === 'pending-msg',
          header: 'nickname',
          footer: 'created-at',
          data: {
            content: this.randomContent(),
            src: images,
            created_at: faker.date.recent(),
            user: {
              id: Math.random().toString(10).substring(3, 6),
              avatar: faker.image.avatar(),
              nickname: faker.name.findName()
            }
          }
        })
      }
  }
}

props

name type required meaning
avatarComponent vue-component N 头像组件,如果定义了,并且 data 中有 user,就会给展示头像组件
loadingComponent vue-component N loading 组件,当内容是异步展示的时候,会展示 loading,不填则使用默认的 loading
messageComponents vue-components N 自定义气泡容器,默认仅支持 text 容器,通过 addMessage 中的 type 来调用不同容器
widgetComponents vue-components N 自定义挂件,如分割线等,通过 addWidget 方法调用
headerComponents vue-components N 气泡顶部的组件,如昵称,通过 addMessage 中的 header 来调用
footerComponents vue-components N 气泡底部的组件,如点赞,通过 addMessage 中的 footer 来调用
colors { bg: '#12b7f5', text: '#fff' } N 气泡的颜色,需要定义背景色和文字的颜色,也可以通过 addMessage 中的 color 自定义

tips

  1. 使用自定义组件时,会为每个组件传递一个 item 的 props
  2. 使用异步的气泡时,会先展示 loading 组件,当异步组件加载完毕后,需要在组件内手动调用this.$emit('loaded')就可以消除 loading
  3. 当 addMessage 的 pending 是 true 时,当前气可以通过watch next()来获取到后面的气泡数据,如:
// pending component
export default {
    watch: {
      next() {
        this.next && this.next.then(this.handleNext)
      }
    },
    methods: {
      handleNext(data) {
        this.users.push(data.user.nickname)
      },
      resolve() {
        this.$emit('resolve')
      }
    }
}
  1. 除非手动调动this.$emit('resolve')或出现下一个pending component否则 next 会一直触发
  2. 基本上以上的 feature 就可以覆盖表单验证,异步问答这种复杂场景了

Package Sidebar

Install

npm i oh-my-chat

Weekly Downloads

1

Version

1.0.10

License

MIT

Unpacked Size

92 kB

Total Files

28

Last publish

Collaborators

  • falstack