moking55/vue3-avatars

สร้างไว้ตอนเรียน CS 313

Avatar Album Examples

หลักการทำงาน

เมื่อคลิ๊ก เพิ่ม Avatar จะทำการเพิ่มในส่วนของ Array เข้าไปยังตัวแปร data แล้วทำการ v-for ออกมา โดยแต่ละ props จะมีการทำงานดังนี้

image: จะเป็นการดึงรูป Avatar จาก api.dicebear.com และทำการสุ่ม Seed เพื่อ
description: เป็นการสุ่มชื่อไทยโดยใช้ Module @opecgame/randomname-thai
background: เป็นการสุ่มสีพื้นหลังโดยการใช้ seed ที่สุ่มมาอีกที

และเมื่อคลิ๊ก ลบ Avatar จะเป็นการลบรูปภาพจาก Array ที่อยู่ด้านหลังสุด แต่ที่เห็นข้อมูลโดนลบด้านหน้าเพราะใช้ .reverse()

Lib ที่ใช้ลงเพิ่มเติม

• @opecgame/randomname-thai

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Lint with ESLint

npm run lint