talquei下載 - talquei原始碼下載

talquei

Ai源碼

1.0.0

下載

？為什麼？

忘記那些無聊和不直覺的形式。使用 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}`