talquei

? Mengapa?

Lupakan bentuk-bentuk yang membosankan dan tidak intuitif. Dengan talquei Anda dapat dengan cepat membuat bentuk yang fantastis seperti pada gambar di atas.

Demo

Memasang

Instal menggunakan manajer paket Anda:

$ yarn add talquei

Tambahkan ke aplikasi Anda:

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

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

Vue . use ( Talquei )

Atau impor ke komponen Anda:

 import { Talquei , TalqueiMessage } from 'talquei'

export default {
  components : {
    Talquei ,
    TalqueiMessage
  }
} 

Penggunaan

Komponen Talquei harus membungkus TalqueiMessage :

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

Minta masukan pengguna

Anda dapat meminta entri pengguna berdasarkan prop atau slot. Prop pada dasarnya akan memasukkan tag Anda ke dalam formulir dan mengisi entri di v-model .

Contoh

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

Format masukan pengguna

Saat pengguna memasukkan teks, Anda dapat memformatnya menggunakan template prop :

Contoh

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

Jawaban yang telah ditentukan sebelumnya

Jika Anda memerlukan jawaban yang telah ditentukan sebelumnya (seperti tag select atau radio ), Anda dapat mengatur input.type = 'select' dan meneruskan objek Anda di bidang options :

Contoh

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

Pesan bersyarat

Gunakan saat Anda ingin atribut v-if menampilkan pesan bersyarat:

Contoh

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

Menggunakan slot

Jika Anda perlu membuat masukan yang lebih kompleks (seperti validasi, komponen khusus), Anda dapat menggunakan slot. Setelah selesai ingatlah untuk memanggil metode next() dari komponen Talquei .

Contoh

< 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

Komponen Talquei

Alat peraga

Nama	Keterangan	Jenis	Bawaan
autoRun	Memulai percakapan saat dipasang	Boolean	true

slot

Nama	Keterangan
default	Masukkan TalqueiMessage Anda di sini. Tidak memerlukan elemen root

Metode

init(): void

Gunakan metode ini untuk memulai percakapan jika Anda menyetel autoRun ke false .

next(): void

Cari pesan berikutnya. Pesan bertingkat akan memasukkan metode ini untuk dipanggil saat menyelesaikan pengetikan.

Komponen TalqueiMessage

Alat peraga

Nama	Keterangan	Jenis	Bawaan
input	Minta masukan pengguna Lihat detailnya	Object	undefined
isUser	Definisikan sebagai pesan yang ditulis oleh pengguna	Boolean	false
text	Teks yang akan ditampilkan, jika isUser tidak akan diketik	String	undefined
value	Berguna hanya untuk digunakan dalam v-model	String	undefined
template	Memformat masukan pengguna	String	{text}

objek input

Akan membuat formulir dasar dari tag informasi, tidak boleh ditentukan jika Anda lebih suka menggunakan slot.

• tag : Tag yang valid saat ini text atau select .
• options ( select ): Gunakan bidang ini untuk menentukan object dengan pilihan yang tersedia.
• placeholder ( text ): Mengatur placeholder kolom input Anda.
• type ( text ): Mengatur jenis kolom input Anda. Standarnya adalah text .

slot

Nama	Keterangan
default	Gunakan ini jika Anda memerlukan masukan pengguna yang lebih kompleks atau dipersonalisasi
avatar	Ubah elemen yang digunakan sebagai avatar. Standarnya adalah "?"

? Menyumbang

Jika Anda ingin berkontribusi pada proyek ini, silakan lihat Panduan Berkontribusi kami.