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 は基本的にタグをフォームに挿入し、 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 > 

? 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	アバターとして使用する要素を変更します。デフォルトは「?」です。

?貢献する

このプロジェクトに貢献したい場合は、貢献ガイドをご覧ください。