talquei

? ¿Por qué?

Olvídate de las formas aburridas y poco intuitivas. Con talquei puedes crear rápidamente formas fantásticas como en la imagen de arriba.

Manifestación

Instalar

Instale usando su administrador de paquetes:

$ yarn add talquei

Agregue a su aplicación:

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

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

Vue . use ( Talquei )

O importe a su componente:

 import { Talquei , TalqueiMessage } from 'talquei'

export default {
  components : {
    Talquei ,
    TalqueiMessage
  }
} 

Uso

El componente Talquei debe envolver cualquier TalqueiMessage :

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

Solicitar entrada del usuario

Puede solicitar una entrada de usuario por accesorio o espacio. Básicamente, el accesorio inyectará su etiqueta en un formulario y completará la entrada en el v-model .

Ejemplo

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

Formatear la entrada del usuario

Cuando el usuario ingresa el texto, puede formatearlo usando la template de accesorios:

Ejemplo

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

Respuestas predefinidas

Si necesita respuestas predefinidas (como la etiqueta select o radio ), puede configurar input.type = 'select' y pasar su objeto en el campo options :

Ejemplo

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

Mensajes condicionales

Úselo cuando desee que el atributo v-if muestre mensajes condicionales:

Ejemplo

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

Usando ranuras

Si necesita crear entradas más complejas (como validaciones, componentes personalizados), puede utilizar ranuras. Después de completar, recuerde llamar al método next() desde el componente Talquei .

Ejemplo

< 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

Componente Talquei

Accesorios

Nombre	Descripción	Tipo	Por defecto
autoRun	Inicia la conversación cuando está montado.	Boolean	true

Tragamonedas

Nombre	Descripción
default	Inserta aquí tu TalqueiMessage . No necesito un elemento raíz

Métodos

init(): void

Utilice este método para iniciar la conversación si configura autoRun en false .

next(): void

Busca el siguiente mensaje. Los mensajes anidados inyectarán este método para llamar al finalizar la escritura.

Componente TalqueiMessage

Accesorios

Nombre	Descripción	Tipo	Por defecto
input	Solicitar una entrada de usuario Ver detalles	Object	undefined
isUser	Definir como un mensaje escrito por el usuario.	Boolean	false
text	Texto que se mostrará, si isUser no se escribirá	String	undefined
value	Útil sólo para uso en v-model	String	undefined
template	Formatea la entrada del usuario	String	{text}

objeto input

Se creará un formulario básico a partir de la tag informada, no debe definirse si prefiere utilizar la ranura.

• tag : Las etiquetas válidas actualmente son text o select .
• options ( select ): Utilice este campo para definir un object con las opciones disponibles.
• placeholder ( text ): establezca el marcador de posición de su campo de entrada.
• type ( text ): establezca el tipo de su campo de entrada. El valor predeterminado es text .

Tragamonedas

Nombre	Descripción
default	Utilice esto si necesita entradas de usuario más complejas o personalizadas.
avatar	Cambia el elemento utilizado como avatar. El valor predeterminado es "?"

? Contribuir

Si desea contribuir a este proyecto, consulte nuestra Guía de contribución.