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 >

طلب إدخال المستخدم

يمكنك طلب إدخال مستخدم عن طريق الدعامة أو الفتحة. ستقوم الدعامة بشكل أساسي بإدخال علامتك في نموذج وملء الإدخال في 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 الدعامة:

مثال

< 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	تغيير العنصر المستخدم كصورة رمزية. الافتراضي هو "؟"

؟ يساهم

إذا كنت ترغب في المساهمة في هذا المشروع، يرجى الاطلاع على دليل المساهمة الخاص بنا.