talquei

? Pourquoi?

Oubliez les formes ennuyeuses et non intuitives. Avec talquei, vous pouvez rapidement créer des formes fantastiques comme dans l'image ci-dessus.

Démo

Installer

Installez à l'aide de votre gestionnaire de packages :

$ yarn add talquei

Ajoutez à votre application :

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

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

Vue . use ( Talquei )

Ou importez dans votre composant :

 import { Talquei , TalqueiMessage } from 'talquei'

export default {
  components : {
    Talquei ,
    TalqueiMessage
  }
} 

Usage

Le composant Talquei doit envelopper tout TalqueiMessage :

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

Demander la contribution de l'utilisateur

Vous pouvez demander une entrée utilisateur par accessoire ou par emplacement. L'accessoire injectera essentiellement votre balise dans un formulaire et remplira l'entrée dans le v-model .

Exemple

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

Formater la saisie de l'utilisateur

Lorsque l'utilisateur saisit le texte, vous pouvez le formater à l'aide du template prop :

Exemple

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

Réponses prédéfinies

Si vous avez besoin de réponses prédéfinies (telles que la balise select ou radio ), vous pouvez définir input.type = 'select' et transmettre votre objet dans le champ options :

Exemple

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

Messages conditionnels

À utiliser lorsque vous souhaitez que l'attribut v-if affiche des messages conditionnels :

Exemple

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

Utiliser les machines à sous

Si vous avez besoin de créer des entrées plus complexes (comme des validations, des composants personnalisés), vous pouvez utiliser des emplacements. Une fois terminé, n'oubliez pas d'appeler la méthode next() depuis le composant Talquei .

Exemple

< 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

Composant Talquei

Accessoires

Nom	Description	Taper	Défaut
autoRun	Démarre la conversation une fois monté	Boolean	true

Machines à sous

Nom	Description
default	Insérez votre TalqueiMessage ici. Pas besoin d'élément racine

Méthodes

init(): void

Utilisez cette méthode pour démarrer la conversation si vous définissez autoRun sur false .

next(): void

Recherchez le message suivant. Les messages imbriqués injecteront cette méthode à appeler lors de la finalisation de la saisie.

Composant TalqueiMessage

Accessoires

Nom	Description	Taper	Défaut
input	Demander une contribution utilisateur Voir les détails	Object	undefined
isUser	Définir comme un message écrit par l'utilisateur	Boolean	false
text	Texte à afficher, si isUser ne sera pas saisi	String	undefined
value	Utile uniquement pour une utilisation dans v-model	String	undefined
template	Formate la saisie de l'utilisateur	String	{text}

objet input

Créera un formulaire de base à partir de la tag renseignée, ne doit pas être défini si vous préférez utiliser le slot.

• tag : les balises valides sont actuellement text ou select .
• options ( select ) : utilisez ce champ pour définir un object avec les options disponibles.
• placeholder ( text ) : définissez l'espace réservé de votre champ de saisie.
• type ( text ) : définissez le type de votre champ de saisie. La valeur par défaut est text .

Machines à sous

Nom	Description
default	Utilisez-le si vous avez besoin d'une saisie utilisateur plus complexe ou personnalisée
avatar	Changez l'élément utilisé comme avatar. La valeur par défaut est "?"

? Contribuer

Si vous souhaitez contribuer à ce projet, veuillez consulter notre Guide de contribution.