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 >

จัดรูปแบบอินพุตของผู้ใช้

เมื่อผู้ใช้ป้อนข้อความ คุณสามารถจัดรูปแบบโดยใช้ 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 > 

- เอพีไอ

ส่วนประกอบ 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	เปลี่ยนองค์ประกอบที่ใช้เป็นรูปประจำตัว ค่าเริ่มต้นคือ "?"

- มีส่วนช่วย

หากคุณต้องการมีส่วนร่วมในโครงการนี้ โปรดดูคู่มือการสนับสนุนของเรา