vue beautiful chat 다운로드 - vue beautiful chat 소스 코드 다운로드

vue-beautiful-chat

vue-beautiful-chat 모든 프로젝트에 무료로 쉽게 포함할 수 있는 인터콤과 같은 채팅 창을 제공합니다. 메시징 기능은 제공하지 않고 보기 구성 요소만 제공합니다.

vue-beautiful-chat (여기에서 찾을 수 있는) react-beautiful-chat 의 vue로 포팅됩니다.

FAQ로 이동

특징

맞춤형
백엔드에 구애받지 않음
무료

데모

설치

 $ yarn add vue-beautiful-chat

예

 import Chat from 'vue-beautiful-chat'
Vue . use ( Chat )

< template >
  < div >
    < beautiful-chat
      :participants = " participants "
      :titleImageUrl = " titleImageUrl "
      :onMessageWasSent = " onMessageWasSent "
      :messageList = " messageList "
      :newMessagesCount = " newMessagesCount "
      :isOpen = " isChatOpen "
      :close = " closeChat "
      :icons = " icons "
      :open = " openChat "
      :showEmoji = " true "
      :showFile = " true "
      :showEdition = " true "
      :showDeletion = " true "
      :showTypingIndicator = " showTypingIndicator "
      :showLauncher = " true "
      :showCloseButton = " true "
      :colors = " colors "
      :alwaysScrollToBottom = " alwaysScrollToBottom "
      :disableUserListToggle = " false "
      :messageStyling = " messageStyling "
      @onType = " handleOnType "
      @edit = " editMessage " />
  </ div >
</ template >

 export default {
  name : 'app' ,
  data ( ) {
    return {
      participants : [
        {
          id : 'user1' ,
          name : 'Matteo' ,
          imageUrl : 'https://avatars3.githubusercontent.com/u/1915989?s=230&v=4'
        } ,
        {
          id : 'user2' ,
          name : 'Support' ,
          imageUrl : 'https://avatars3.githubusercontent.com/u/37018832?s=200&v=4'
        }
      ] , // the list of all the participant of the conversation. `name` is the user name, `id` is used to establish the author of a message, `imageUrl` is supposed to be the user avatar.
      titleImageUrl : 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png' ,
      messageList : [
          { type : 'text' , author : `me` , data : { text : `Say yes!` } } ,
          { type : 'text' , author : `user1` , data : { text : `No.` } }
      ] , // the list of the messages to show, can be paginated and adjusted dynamically
      newMessagesCount : 0 ,
      isChatOpen : false , // to determine whether the chat window should be open or closed
      showTypingIndicator : '' , // when set to a value matching the participant.id it shows the typing indicator for the specific user
      colors : {
        header : {
          bg : '#4e8cff' ,
          text : '#ffffff'
        } ,
        launcher : {
          bg : '#4e8cff'
        } ,
        messageList : {
          bg : '#ffffff'
        } ,
        sentMessage : {
          bg : '#4e8cff' ,
          text : '#ffffff'
        } ,
        receivedMessage : {
          bg : '#eaeaea' ,
          text : '#222222'
        } ,
        userInput : {
          bg : '#f4f7f9' ,
          text : '#565867'
        }
      } , // specifies the color scheme for the component
      alwaysScrollToBottom : false , // when set to true always scrolls the chat to the bottom when new events are in (new message, user starts typing...)
      messageStyling : true // enables *bold* /emph/ _underline_ and such (more info at github.com/mattezza/msgdown)
    }
  } ,
  methods : {
    sendMessage ( text ) {
      if ( text . length > 0 ) {
        this . newMessagesCount = this . isChatOpen ? this . newMessagesCount : this . newMessagesCount + 1
        this . onMessageWasSent ( { author : 'support' , type : 'text' , data : { text } } )
      }
    } ,
    onMessageWasSent ( message ) {
      // called when the user sends a message
      this . messageList = [ ... this . messageList , message ]
    } ,
    openChat ( ) {
      // called when the user clicks on the fab button to open the chat
      this . isChatOpen = true
      this . newMessagesCount = 0
    } ,
    closeChat ( ) {
      // called when the user clicks on the botton to close the chat
      this . isChatOpen = false
    } ,
    handleScrollToTop ( ) {
      // called when the user scrolls message list to top
      // leverage pagination for loading another page of messages
    } ,
    handleOnType ( ) {
      console . log ( 'Emit typing event' )
    } ,
    editMessage ( message ) {
      const m = this . messageList . find ( m => m . id === message . id ) ;
      m . isEdited = true ;
      m . data . text = message . data . text ;
    }
  }
}

더 자세한 예를 보려면 데모 폴더를 참조하세요.

구성요소

발사통

Launcher vue-beautiful-chat을 사용하는 데 필요한 유일한 구성 요소입니다. 메시지의 변경 사항에 동적으로 반응합니다. 모든 새 메시지는 예제에 표시된 대로 소품 변경을 통해 추가되어야 합니다.

소품

소품	유형	설명
*참가자들	[에이전트 프로필]	귀하의 제품이나 서비스의 고객 서비스 담당자를 나타냅니다. 각 에이전트의 필드: id, name, imageUrl
*메시지가 전송되었습니다	기능(메시지)	메시지 개체를 인수로 사용하여 메시지가 전송될 때 호출됩니다.
*isOpen	부울	채팅창을 열어야 하는지 여부를 나타내는 부울입니다.
*열려 있는	기능	채팅을 열기 위해 위에서 언급한 부울 토글을 변경하는 구성요소에 전달된 함수
*닫다	기능	채팅을 닫기 위해 위에서 언급한 부울 토글을 변경하는 구성 요소에 전달된 함수
메시지 목록	[메시지]	대화로 렌더링될 메시지 개체의 배열입니다.
표시이모티콘	부울	이모티콘 버튼 표시 여부를 나타내는 부울
쇼파일	부울	파일 선택 버튼을 표시할지 여부를 나타내는 부울
쇼삭제	부울	메시지에 대한 편집 버튼을 표시할지 여부를 나타내는 부울입니다.
쇼에디션	부울	메시지 삭제 버튼 표시 여부를 나타내는 부울입니다.
showTipingIndicator	끈	`typing` 표시기를 표시하기 위해 사용자의 참가자 ID에 설정할 수 있는 문자열
쇼헤더	부울	채팅창 헤더 표시 여부를 나타내는 bool
비활성화사용자목록토글	부울	사용자가 메시지 목록과 참가자 목록 간을 전환하도록 허용할지 여부를 나타내는 부울입니다.
그림 물감	물체	구성 요소를 칠하는 데 사용되는 색상의 사양이 포함된 개체입니다. 여기를 참조하세요
메시지스타일링	부울	채팅에서 메시지 형식에 대한 `msgdown` 지원을 활성화할지 여부를 나타내는 부울입니다. 여기를 참조하세요

이벤트

이벤트	매개변수	설명
onType	한정되지 않은	사용자가 메시지 입력에 입력할 때 발생합니다.
편집하다	`message`	사용자가 메시지를 편집한 후 실행됩니다.

슬롯

헤더

기본 헤더를 교체합니다.

< template v-slot : header >
  ? Good chat between {{participants.map(m=>m.name).join(' & ')}}
</ template >

사용자 아바타

사용자 아바타를 교체합니다. 매개변수: message , user

< template v-slot : user-avatar = " { message , user } " >
  < div style = " border-radius : 50 % ; color : pink ; font-size : 15 px ; line-height : 25 px ; text-align : center ; background : tomato ; width : 25 px !important ; height : 25 px !important ; min-width : 30 px ; min-height : 30 px ; margin : 5 px ; font-weight : bold " v-if = " message.type === 'text' && user && user.name " >
    {{user.name.toUpperCase()[0]}}
  </ div >
</ template >

문자 메시지 본문

문자 메시지의 마크다운을 변경합니다. 매개변수: message

< template v-slot : text-message-body = " { message } " >
  < small style = " background : red " v-if = " message.meta " >
    {{message.meta}}
  </ small >
  {{message.text}}
</ template >

시스템 메시지 본문

시스템 메시지의 마크다운을 변경합니다. 매개변수: message

< template v-slot : system-message-body = " { message } " >
  [System]: {{message.text}}
</ template >

메시지 객체

메시지 객체는 유형에 따라 다르게 렌더링됩니다. 현재는 텍스트, 이모티콘, 파일 형식만 지원됩니다. 각 메시지 개체에는 'me' 값 또는 해당 에이전트의 ID를 가질 수 있는 author 필드가 있습니다.

 {
  author : 'support' ,
  type : 'text' ,
  id : 1 , // or text '1'
  isEdited : false ,
  data : {
    text : 'some text' ,
    meta : '06-16-2019 12:43'
  }
}

{
  author : 'me' ,
  type : 'emoji' ,
  id : 1 , // or text '1'
  isEdited : false ,
  data : {
    code : 'someCode'
  }
}

{
  author : 'me' ,
  type : 'file' ,
  id : 1 , // or text '1'
  isEdited : false ,
  data : {
    file : {
      name : 'file.mp3' ,
      url : 'https:123.rf/file.mp3'
    }
  }
}

빠른 답장

메시지를 보낼 때 사용자 채팅에 빠른 답변으로 표시될 문장 세트를 제공할 수 있습니다. 메시지 개체에 문자열 배열 값이 포함된 suggestions 필드를 추가하면 이 기능이 트리거됩니다.

 {
  author : 'support' ,
  type : 'text' ,
  id : 1 , // or text '1'
  data : {
    text : 'some text' ,
    meta : '06-16-2019 12:43'
  } ,
  suggestions : [ 'some quick reply' , ... , 'another one' ]
}

FAQ

데모를 작동시키는 방법은 무엇입니까?

 git clone [email protected]:mattmezza/vue-beautiful-chat.git
cd vue-beautiful-chat
yarn install  # this installs the package dependencies
yarn watch  # this watches files to continuously compile them

동일한 폴더에서 새 셸을 엽니다.

 cd demo
yarn install # this installs the demo dependencies
yarn dev # this starts the dev server at http://localhost:8080

기능을 추가하거나 버그를 수정하려면 어떻게 해야 하나요?

저장소 포크
변경 사항 수정/추가
최신 변경 사항으로 라이브러리를 컴파일하려면 루트에 yarn build
당신이 한 일을 설명하는 풀 리퀘스트를 작성하세요
관리자와 변경 사항에 대해 논의
팔! 변경 사항이 기본 저장소에 추가되었습니다.
릴리스는 거의 일주일에 한 번 생성됩니다.

색상을 어떻게 사용자 정의할 수 있나요?

구성요소를 초기화할 때 사용된 색상을 지정하는 객체를 전달합니다.

 let redColors = {
  header : {
    bg : '#D32F2F' ,
    text : '#fff'
  } ,
  launcher : {
    bg : '#D32F2F'
  } ,
  messageList : {
    bg : '#fff'
  } ,
  sentMessage : {
    bg : '#F44336' ,
    text : '#fff'
  } ,
  receivedMessage : {
    bg : '#eaeaea' ,
    text : '#222222'
  } ,
  userInput : {
    bg : '#fff' ,
    text : '#212121'
  }
}

< beautiful-chat
  ...
  : colors = " redColors " />

이것은 빨간색 변형입니다. 온라인 데모 페이지에 표시된 변형 목록을 보려면 이 파일을 확인하십시오.

각 색상 속성을 포함하는 개체를 전달해야 합니다. 그렇지 않으면 유효성 검사가 실패합니다.

메시지 서식을 어떻게 추가할 수 있나요?

좋은 소식입니다. 메시지 형식이 이미 추가되었습니다. messageStyling true 로 설정하여 활성화할 수 있으며 msgdown 라이브러리를 사용하게 됩니다. 언제든지 서식 지원을 활성화/비활성화하거나 사용자가 원할 때마다 수행하도록 허용할 수 있습니다.