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 Package), fontawesome และ moment.js สำหรับ vue ( vue-moment )
แชทเป็นองค์ประกอบ Vue เดียวซึ่งคุณสามารถค้นหาใน /src/components/basic-vue-chat/ ในการเริ่มต้นเพียงแค่นำเข้าส่วนประกอบ BasicVuechat และใส่บรรทัดต่อไปนี้ลงในรหัส HTML ของคุณ:
< basic-vue-chat />หากต้องการผลักดันข้อความเพื่อแชทเพียงแค่ ส่ง Prop Newmessage ไปยัง 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 และ Event NewownMessage ถูกปล่อยออกมา ในการจัดการกับเหตุการณ์นี้คุณสามารถทำได้เช่น:
< basic-vue-chat @newOwnMessage =" onNewOwnMessage " /> โดยที่ onNewOwnMessage(message) เป็นวิธีการในส่วนประกอบ Vue ของคุณซึ่งคุณจะใช้ BasicVuechat
ตัวอย่างของโครงสร้างเพย์โหลดเหตุการณ์ที่ถูกต้อง:
{
id : 1 ,
imageUrl : 'http://path/to/image' ,
image : File ( ) ,
contents : 'hello' ,
date : '16:31'
} คุณสามารถอัปโหลดและรับรูปภาพ หากต้องการแนบรูปภาพให้ใช้ปุ่มคลิปหนีบกระดาษ รูปภาพจะถูกปล่อยออกมาในข้อความบน image (เป็นวัตถุ File ) และคุณสมบัติ imageUrl (Path string )
ในการเริ่มการพัฒนาคุณสามารถใช้โหมดโหลดร้อน:
npm run serve
เพื่อสร้างเวอร์ชันการผลิต:
npm run build
เพื่อเรียกใช้การทดสอบ:
npm test
ในการแนบข้อมูลจำลองเพียงแค่ผ่านลอจิก Prop 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 > Pass Prop title ไปยังส่วนประกอบ BasicVuechat
< basic-vue-chat :title =" 'My Best Team' " /> Pass Prop 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'
}
] ผ่าน prop initialAuthorId ไปยังส่วนประกอบ BasicVuechat เพื่อกำหนด ID ของผู้ใช้ปัจจุบัน ค่าเริ่มต้นคือ 0
แชทใช้ SCSS ดังนั้นคุณสามารถแทนที่ตัวแปรที่ใช้ในโครงการได้อย่างง่ายดาย คุณสามารถค้นหาได้ใน /src/assets/scss/modules/_variables.scss ตัวแปรทั้งหมดมีค่าเริ่มต้น
| คำอธิบาย | ตัวแปร | ค่าเริ่มต้น |
|---|---|---|
| สีหลัก | $ หลัก | $ Slate-Blue (#6B63D8) |
| สีรอง | $ รอง | $ Lavender (#B284ED) |
| สีส่วนหัว | $ header-color | $ Ghost-White (#faf9ff) |
| สีพื้นหลังอินพุต | $ input-background-color | $ alice-blue (#f2efff) |
| ครอบครัวแบบอักษร | $ font-family | 'Source Sans Pro', sans-serif |
| น้ำหนักตัวอักษร | $ font-weight | 400 |
| ขนาดตัวอักษร | $ font-size | 14px |
| สีข้อความมืด | $ Dark-text-color | $ Madison (#2C3E50) |
| สีข้อความแสง | $ ข้อความสีอ่อน | $ Ghost-White (#faf9ff) |
| สีพื้นหลังสีเข้ม | $ DARK-BG | $ Madison (#2C3E50) |
| สีพื้นหลังไฟ | $ light-bg | $ White (#FFFFFF) |
| ความกว้างของหน้าต่างแชท | $ Window-Width | 500px |
| ความสูงของหน้าต่างแชท | $ window-height | 400px |
| ข้อความความกว้างสูงสุด | $ Message-Max-Width | 200px |
partialsmodulesbasic-vue-chatพัฒนาและทดสอบภายใต้ MacOS High Sierra 10.13 และ Google Chrome 69
