talquei

? 왜?

지루하고 직관적이지 않은 형태는 잊어버리세요. talquei를 사용하면 위 이미지처럼 환상적인 형태를 빠르게 구축할 수 있습니다.

데모

설치하다

패키지 관리자를 사용하여 설치합니다.

$ yarn add talquei

앱에 다음을 추가하세요.

 import Vue from 'vue'
import Talquei from 'talquei'

// import the styles 
import 'talquei/dist/talquei.min.css'

Vue . use ( Talquei )

또는 구성 요소로 가져옵니다.

 import { Talquei , TalqueiMessage } from 'talquei'

export default {
  components : {
    Talquei ,
    TalqueiMessage
  }
} 

용법

Talquei 구성 요소는 모든 TalqueiMessage 래핑해야 합니다.

< template >
  < Talquei >
    < TalqueiMessage text = " Hi! My name is Talquei! " />
    < TalqueiMessage text = " I'm a plugin to help you. " />
  </ Talquei >
</ template >

사용자 입력 요청

소품이나 슬롯별로 사용자 항목을 요청할 수 있습니다. Prop은 기본적으로 태그를 양식에 삽입하고 v-model 의 항목을 채웁니다.

예

< template >
  < Talquei >
    < TalqueiMessage text = " What's your name? " />
    < TalqueiMessage
      v-model = " name "
      : input = " { tag : ' text ' , placeholder : ' Enter your name ' } "
      is-user
    />
  </ Talquei >
</ template >

< script >
export default {
  data : () => ({
    name : ' '
  })
}
</ script >

사용자 입력 형식 지정

사용자가 텍스트를 입력하면 prop template 사용하여 형식을 지정할 수 있습니다.

예

< template >
  < Talquei >
    < TalqueiMessage
      : input = " { tag : ' text ' , placeholder : ' Enter your name ' } "
      template = " My name is {text} "
      is-user
    />
  </ Talquei >
</ template >

사전 정의된 답변

사전 정의된 답변(예: select 또는 radio 태그)이 필요한 경우 input.type = 'select' 설정하고 options 필드에 개체를 전달할 수 있습니다.

예

< template >
  < Talquei >
    < TalqueiMessage text = " Which front-end framework do you prefer? " />
    < TalqueiMessage
      v-model = " name "
      : input = " { tag : ' select ' , options : frameworks } "
      is-user
    />
  </ Talquei >
</ template >

< script >
export default {
  data : () => ({
    frameworks : {
      vue : ' Vue.js ' ,
      angular : ' AngularJS ' ,
      ember : ' Ember.js '
    }
  })
}
</ script >

조건부 메시지

v-if 속성을 사용하여 조건부 메시지를 표시하려는 경우에 사용하세요.

예

< template >
  < Talquei >
    < TalqueiMessage text = " Which front-end framework do you prefer? " />
    < TalqueiMessage
      v-model = " name "
      : input = " { tag : ' select ' , options : frameworks } "
      is-user
    />
    < TalqueiMessage text = " What plugins do you usually use in your projects? " />
    < TalqueiMessage
      v-if = " answer === ' vue ' "
      v-model = " plugin "
      : input = " { tag : ' text ' , placeholder : ' talquei ' } "
      is-user
    />
  </ Talquei >
</ template >
</ script >

슬롯 사용

더 복잡한 입력(예: 검증, 사용자 정의 구성 요소)을 작성해야 하는 경우 슬롯을 사용할 수 있습니다. 완료 후에는 Talquei 구성 요소에서 next() 메서드를 호출하는 것을 기억하세요.

예

< template >
  < Talquei ref = " talquei " >
    < TalqueiMessage text = " Hello " >
      < form @ submit . stop = " onSubmit " >
        < input ref = " input " type = " text " >
        < button >Ok</ button >
      </ form >
    </ TalqueiMessage >
  </ Talquei >
</ template >

< script >
export default {
  methods : {
    onSubmit () {
      this . name = this . $refs . input . value
      this . $refs . talquei . next ()
    }
  }
}
</ script > 

? API

Talquei 성분

소품

이름	설명	유형	기본
autoRun	마운트되면 대화를 시작합니다.	Boolean	true

슬롯

이름	설명
default	여기에 TalqueiMessage 삽입하세요. 루트 요소가 필요하지 않습니다

행동 양식

init(): void

autoRun false 로 설정한 경우 이 메서드를 사용하여 대화를 시작하세요.

next(): void

다음 메시지를 검색하세요. 중첩된 메시지는 입력을 완료할 때 호출하기 위해 이 메서드를 삽입합니다.

TalqueiMessage 구성요소

소품

이름	설명	유형	기본
input	사용자 입력 요청 세부정보 보기	Object	undefined
isUser	사용자가 작성한 메시지로 정의	Boolean	false
text	isUser 입력하지 않을 경우 표시할 텍스트	String	undefined
value	v-model 에서만 사용하면 유용합니다.	String	undefined
template	사용자 입력 형식	String	{text}

input 객체

제공된 tag 에서 기본 양식을 생성합니다. 슬롯을 사용하려는 경우 정의하면 안 됩니다.

• tag : 유효한 태그는 현재 text 또는 select 입니다.
• options ( select ): 이 필드를 사용하여 사용 가능한 옵션으로 object 정의합니다.
• placeholder ( text ): 입력 필드의 자리 표시자를 설정합니다.
• type ( text ): 입력 필드의 유형을 설정합니다. 기본값은 text 입니다.

슬롯

이름	설명
default	보다 복잡하거나 개인화된 사용자 입력이 필요한 경우 이를 사용하십시오.
avatar	아바타로 사용되는 요소를 변경합니다. 기본값은 "?"입니다.

? 기여하다

이 프로젝트에 기여하고 싶다면 기여 가이드를 참조하세요.