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 或 slot 请求用户输入。该道具基本上会将您的标签注入表单中并填充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 > 

？应用程序编程接口

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	更改用作头像的元素。默认为“？”

？贡献

如果您想为此项目做出贡献，请参阅我们的贡献指南。