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 ที่ใช้ลงเพิ่มเติม
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
ESLint
Lint withnpm run lint