talquei

? Warum?

Vergessen Sie die langweiligen und nicht intuitiven Formen. Mit talquei können Sie schnell fantastische Formen wie im Bild oben erstellen.

Demo

Installieren

Installieren Sie mit Ihrem Paketmanager:

$ yarn add talquei

Fügen Sie Ihrer App Folgendes hinzu:

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

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

Vue . use ( Talquei )

Oder importieren Sie in Ihre Komponente:

 import { Talquei , TalqueiMessage } from 'talquei'

export default {
  components : {
    Talquei ,
    TalqueiMessage
  }
} 

Verwendung

Die Talquei Komponente sollte jede TalqueiMessage umschließen:

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

Fordern Sie Benutzereingaben an

Sie können einen Benutzereintrag per Prop oder Slot anfordern. Die Requisite fügt im Grunde Ihren Tag in ein Formular ein und füllt den Eintrag im v-model aus.

Beispiel

< 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 >

Benutzereingaben formatieren

Wenn der Benutzer den Text eingibt, können Sie ihn mithilfe der template formatieren:

Beispiel

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

Vordefinierte Antworten

Wenn Sie vordefinierte Antworten benötigen (z. B. das select oder radio Tag), können Sie input.type = 'select' festlegen und Ihr Objekt im options übergeben:

Beispiel

< 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 >

Bedingte Nachrichten

Verwenden Sie diese Option, wenn Sie möchten, dass das v-if -Attribut bedingte Nachrichten anzeigt:

Beispiel

< 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 >

Verwendung von Slots

Wenn Sie komplexere Eingaben erstellen müssen (wie Validierungen, benutzerdefinierte Komponenten), können Sie Slots verwenden. Denken Sie nach der Fertigstellung daran, die Methode next() aus der Talquei Komponente aufzurufen.

Beispiel

< 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 -Komponente

Requisiten

Name	Beschreibung	Typ	Standard
autoRun	Startet das Gespräch, wenn es gemountet ist	Boolean	true

Spielautomaten

Name	Beschreibung
default	Fügen Sie hier Ihre TalqueiMessage ein. Benötige kein Root-Element

Methoden

init(): void

Verwenden Sie diese Methode, um die Konversation zu starten, wenn Sie autoRun auf false setzen.

next(): void

Suchen Sie die nächste Nachricht. Bei verschachtelten Nachrichten wird diese Methode zum Aufrufen eingefügt, wenn die Eingabe abgeschlossen ist.

TalqueiMessage Komponente

Requisiten

Name	Beschreibung	Typ	Standard
input	Fordern Sie eine Benutzereingabe an. Siehe Details	Object	undefined
isUser	Als vom Benutzer verfasste Nachricht definieren	Boolean	false
text	Text, der angezeigt werden soll, wenn isUser nicht eingegeben wird	String	undefined
value	Nur für die Verwendung im v-model nützlich	String	undefined
template	Formatiert Benutzereingaben	String	{text}

input

Wird aus dem tag informiert ein Basisformular erstellen, sollte nicht definiert werden, wenn Sie den Slot lieber verwenden möchten.

• tag : Gültige Tags sind derzeit text oder select .
• options ( select ): Verwenden Sie dieses Feld, um ein object mit den verfügbaren Optionen zu definieren.
• placeholder ( text ): Legen Sie den Platzhalter Ihres Eingabefelds fest.
• type ( text ): Legen Sie den Typ Ihres Eingabefelds fest. Der Standardwert ist text .

Spielautomaten

Name	Beschreibung
default	Verwenden Sie diese Option, wenn Sie komplexere oder personalisierte Benutzereingaben benötigen
avatar	Ändern Sie das als Avatar verwendete Element. Der Standardwert ist „?“

? Beitragen

Wenn Sie zu diesem Projekt beitragen möchten, lesen Sie bitte unseren Beitragsleitfaden.