basic vue chat
1.0.0
تنفيذ الدردشة القائمة على VUE.
يمكنك تثبيت المكون باستخدام مديري الحزم ، مثل NPM أو الغزل أو تثبيت مكون من المستودع.
npm i basic-vue-chatyarn add basic-vue-chatgit clone https://github.com/jmaczan/basic-vue-chat.git
cd basic-vue-chat
npm i تستخدم المكونات Vue (حزمة vue ) ، Fontawesome و Moment.js لـ Vue ( vue-moment ).
الدردشة هي مكون VUE واحد ، يمكنك العثور عليه في /src/components/basic-vue-chat/ . للبدء ، ما عليك سوى استيراد مكون BasicVuechat ووضع السطر التالي في رمز HTML الخاص بك:
< basic-vue-chat />لدفع رسالة للدردشة ، ما عليك سوى تمرير NewMessage Prop إلى BasicVuechat . مثال:
< basic-vue-chat :new-message =" message " /> قد يكون كائن message أعلاه جزءًا من data في مكون VUE الخاص بك والذي ستستخدم فيه BasicVueChat.
مثال على بنية الرسالة الصحيحة:
{
id : 0 ,
author : 'Person' ,
imageUrl : 'http://path/to/image' ,
image : '' ,
contents : 'hi there' ,
date : '16:30'
} يمكنك العثور على مثال على دفع الرسائل في ملف App.vue .
عندما يرسل المستخدم رسالة ، يتم نشر الرسالة إلى مكون BasicVueChat وينبعث NewAntmessage حدث . للتعامل مع هذا الحدث ، يمكنك على سبيل المثال القيام بذلك:
< basic-vue-chat @newOwnMessage =" onNewOwnMessage " /> عندما تكون onNewOwnMessage(message) طريقة في مكون VUE الخاص بك والتي ستستخدم فيها BasicVueChat.
مثال على بنية الحمولة الصحيح للحدث:
{
id : 1 ,
imageUrl : 'http://path/to/image' ,
image : File ( ) ,
contents : 'hello' ,
date : '16:31'
} يمكنك تحميل واستلام الصور. لإرفاق الصورة ، استخدم زر paperclip. سيتم انبعاث الصورة في رسالة على image (ككائن File ) وخصائص imageUrl ( string المسار).
لبدء التطوير ، يمكنك استخدام وضع إعادة التحميل الساخن:
npm run serve
لبناء نسخة الإنتاج:
npm run build
لتشغيل الاختبارات:
npm test
لإرفاق بيانات وهمية ، ما عليك سوى تمرير Logic attachMock إلى BasicVueChat.
يتم استيراد الأنماط في مكون BasicVueChat الرئيسي والمتغيرات لديها قيم !default ، لذلك يعني أنه يمكنك تجاوز القيم الافتراضية عن طريق تحديد المتغيرات الخاصة بك قبل استيراد الأنماط.
< style lang="scss">
$primary : red ;
// above the following import you can override default values of variables like $primary
@import " ../../assets/scss/main.scss " ;
</ style > تمرير title الدعامة إلى مكون BasicVuechat.
< basic-vue-chat :title =" 'My Best Team' " /> تمرير propeed initialFeed إلى مكون basicvuechat.
< basic-vue-chat :initial-feed =" feed " />مثال على بنية البيانات الصحيحة:
const feed = [
{
id : 1 ,
author : 'Person' ,
imageUrl : 'http://path/to/image' ,
contents : 'hi there' ,
date : '16:30'
} ,
{
id : 0 ,
author : 'Me' ,
contents : 'hello' ,
date : '16:30'
}
] PASS PROP initialAuthorId إلى مكون BasicVueChat لتحديد معرف المستخدم الحالي. القيمة الافتراضية هي 0 .
يستخدم الدردشة SCSS ، بحيث يمكنك بسهولة تجاوز المتغيرات المستخدمة في المشروع. يمكنك العثور عليها في /src/assets/scss/modules/_variables.scss /modules/_variables.scss. جميع المتغيرات لها قيم افتراضية.
| وصف | عامل | القيمة الافتراضية |
|---|---|---|
| اللون الأساسي | $ الابتدائية | $ slate-blue (#6B63D8) |
| لون ثانوي | دولار ثانوي | $ lavender (#B284ed) |
| لون الرأس | $ header-color | $ ghost-white (#faf9ff) |
| إدخال لون الخلفية | $ المدخلات الظهر اللون | $ alice-blue (#f2efff) |
| عائلة الخط | $ font-family | "المصدر Sans Pro" ، Sans-Serif |
| وزن الخط | $ font-weight | 400 |
| حجم الخط | حجم الخط | 14px |
| لون النص المظلم | $ dark-text-color | $ ماديسون (#2C3E50) |
| لون نص الضوء | $ light-text-color | $ ghost-white (#faf9ff) |
| لون الخلفية المظلمة | $ Dark-BG | $ ماديسون (#2C3E50) |
| لون الخلفية الخفيفة | $ light-bg | $ White (#ffffff) |
| عرض نافذة الدردشة | عرض نافذة $ | 500 بكسل |
| ارتفاع نافذة الدردشة | $ نافذة الارتفاع | 400 بكسل |
| رسالة أقصى عرض | $ message-max-width | 200 بكسل |
partialsmodulesbasic-vue-chatتم تطويره واختباره تحت MacOS High Sierra 10.13 و Google Chrome 69.
