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 >

Запросить ввод пользователя

Вы можете запросить запись пользователя по реквизиту или слоту. По сути, этот реквизит вставит ваш тег в форму и заполнит запись в 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 >

Форматировать ввод пользователя

Когда пользователь вводит текст, вы можете отформатировать его с помощью template prop:

Пример

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

Использование слотов

Если вам нужно создать более сложные входные данные (например, проверки, пользовательские компоненты), вы можете использовать слоты. После завершения не забудьте вызвать метод next() из компонента Talquei .

Пример

< 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	Измените элемент, используемый в качестве аватара. По умолчанию «?»

? Способствовать

Если вы хотите внести свой вклад в этот проект, ознакомьтесь с нашим Руководством для участников.