vue tournament bracket
Vue 3 migration
คอมโพเนนต์ Vue สำหรับการเรนเดอร์วงเล็บเหลี่ยมทัวร์นาเมนต์แบบคัดออกเดี่ยว เข้ากันได้กับ Vue 3 สำหรับ Vue 2 รองรับการติดตั้งเวอร์ชัน 2.* ของแพ็คเกจ
อ้างอิงจาก: https://codepen.io/sdudnyk/pen/bWbqMb
การแสดงผลจะขึ้นอยู่กับ flex โปรดดูการสนับสนุนเบราว์เซอร์
ตัวอย่างชีวิตจริงสามารถพบได้ที่นี่: Martialmatch.com
ติดตั้งส่วนประกอบผ่าน:
npm install vue-tournament-bracket
ตัวอย่าง:
< template >
< bracket :rounds =" rounds " >
< template slot =" player " slot-scope =" {{ player }} " >
{{ player.name }}
template >
bracket >
< template >
< script >
import Bracket from "vue-tournament-bracket" ;
const rounds = [
//Semi finals
{
games : [
{
player1 : { id : "1" , name : "Competitor 1" , winner : false } ,
player2 : { id : "4" , name : "Competitor 4" , winner : true } ,
} ,
{
player1 : { id : "5" , name : "Competitor 5" , winner : false } ,
player2 : { id : "8" , name : "Competitor 8" , winner : true } ,
}
]
} ,
//Final
{
games : [
{
player1 : { id : "4" , name : "Competitor 4" , winner : false } ,
player2 : { id : "8" , name : "Competitor 8" , winner : true } ,
}
]
}
] ;
export default {
components : {
Bracket
} ,
data ( ) {
return {
rounds : rounds
}
}
}
script > นี่คือวิธีการเป็นตัวแทนรอบเพลย์ออฟอันดับสาม:
const rounds = [
//Semi finals
{
games : [
{
player1 : { id : "1" , name : "Competitor 1" , winner : false } ,
player2 : { id : "4" , name : "Competitor 4" , winner : true } ,
} ,
{
player1 : { id : "5" , name : "Competitor 5" , winner : false } ,
player2 : { id : "8" , name : "Competitor 8" , winner : true } ,
}
]
} ,
//Third place play off
{
games : [
{
player1 : { id : "1" , name : "Competitor 1" , winner : false } ,
player2 : { id : "5" , name : "Competitor 5" , winner : true } ,
}
]
} ,
//Final
{
games : [
{
player1 : { id : "4" , name : "Competitor 4" , winner : false } ,
player2 : { id : "8" , name : "Competitor 8" , winner : true } ,
}
]
}
] ; 
มีช่องพร้อมอุปกรณ์ประกอบฉากการแข่งขันทั้งหมด ใช้งานในลักษณะต่อไปนี้:
< bracket :rounds =" rounds " >
< template #player =" { player } " >
{{ player.name }}
template >
< template #player-extension-bottom =" { match } " >
Extra info: {{ match.title }}
template >
bracket >อาจมีประโยชน์ เช่น การแสดงคำแนะนำเครื่องมือ เป็นต้น
วัตถุของเกมต้องใช้วัตถุ player1 และ player2 คุณยังสามารถเพิ่มของคุณเองและนำกลับมาใช้ใหม่ในช่องของ players-extension-bottom
คุณสมบัติต่อไปนี้เป็นสิ่งต้องห้ามและจะถูกแทนที่ด้วย undefined :
gameshasParent ดู matchProperties ใน GamePlayers สำหรับรายละเอียด
เวอร์ชัน 2.1 แนะนำตัวเลือกในการสร้างแผนผังวงเล็บจากโครงสร้างแผนผังแบบเรียบโดยที่โหนดลูกชี้ไปที่โหนดหลัก โครงสร้างค่อนข้างเรียบง่าย แต่ต้องมีคุณสมบัติเพิ่มเติมสองประการในแต่ละวัตถุของเกม: id , next อาจเป็นประโยชน์ในการสร้างวงเล็บเหลี่ยมแบบตกรอบที่มีการแข่งรอบซ้ำ ตัวอย่าง:
const rounds = [
//Repechage 1 of 3
{
id: 1,
next: 5, //Will be connected to game with id 5
player1: { id: "4", name: "Competitor 4", winner: true },
player2: { id: "5", name: "Competitor 5", winner: false },
},
{
id: 2,
next: 6,
player1: { id: "7", name: "Competitor 7", winner: false },
player2: { id: "8", name: "Competitor 8", winner: true },
},
//Repechage 2 of 3
{
id: 5,
next: 7,
player1: { id: "1", name: "Competitor 1", winner: false },
player2: { id: "4", name: "Competitor 4", winner: true },
},
{
id: 6,
next: 7,
player1: { id: "3", name: "Competitor 3", winner: false },
player2: { id: "8", name: "Competitor 8", winner: true },
},
//Repechage 3 of 3 - 3rd place match
{
id: 7,
player1: { id: "4", name: "Competitor 4", winner: false },
player2: { id: "8", name: "Competitor 8", winner: true },
},
];
เริ่มต้นวงเล็บด้วยอุปกรณ์ประกอบฉาก flatTree :
< bracket :flat-tree =" rounds " >มันสร้างวงเล็บดังต่อไปนี้:
ออบเจ็กต์ของผู้เล่นต้องการ: คุณสมบัติ id , winner เป็นทางเลือก, ส่วนที่เหลือขึ้นอยู่กับคุณ - สามารถปรับแต่งการเรนเดอร์ได้ผ่านช่องที่กำหนดขอบเขต
id เพื่อไฮไลต์winner ใช้สีสำหรับผู้เล่นตามลำดับ อาจเป็น null ก็ได้ - สีของผู้เล่นจะเป็นสีเทา ใช้สไตล์ที่คุณกำหนดเองโดยแทนที่ CSS คอมโพเนนต์ Bracket โปรดดูที่ BracketNode.vue สำหรับสไตล์ทั้งหมดที่ใช้งาน
เวอร์ชัน Node.js ที่ต้องการคือ 14.0.0 (eslint)
พื้นที่เก็บข้อมูลการชำระเงินและ:
npm install
npm run serve
จากนั้นเปิดเบราว์เซอร์และทดสอบการเปลี่ยนแปลงของคุณโดยใช้ส่วนประกอบหลัก App.vue เพื่อวัตถุประสงค์ในการพัฒนา
ดู package.json เพื่อค้นหาคำสั่งที่ใช้ได้
npm test
npm run eslint
npm run build
git commit
npm version
git push
npm publish --access=public
เอ็มไอที
