vue tournament bracket
Vue 3 migration
Komponen Vue untuk merender tanda kurung turnamen eliminasi tunggal. Kompatibel dengan Vue 3. Untuk Vue 2 mendukung instalasi paket versi 2.*.
Berdasarkan: https://codepen.io/sdudnyk/pen/bWbqMb.
Rendering didasarkan pada flex , lihat dukungan browser.
Contoh kehidupan nyata dapat ditemukan di sini: bela dirimatch.com.
Instal komponen melalui:
npm install vue-tournament-bracket
Contoh:
< 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 > Berikut cara perebutan perebutan tempat ketiga:
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 } ,
}
]
}
] ; 
Ada slot dengan alat peraga seluruh pertandingan, gunakan dengan cara berikut:
< bracket :rounds =" rounds " >
< template #player =" { player } " >
{{ player.name }}
template >
< template #player-extension-bottom =" { match } " >
Extra info: {{ match.title }}
template >
bracket >Mungkin berguna misalnya untuk menampilkan tooltips dll.
Objek permainan memerlukan objek player1 dan player2 . Anda juga dapat menambahkan milik Anda sendiri dan misalnya menggunakannya kembali di slot players-extension-bottom .
Properti berikut ini dilarang dan akan diganti dengan undefined :
gameshasParent Lihat matchProperties di GamePlayers untuk detailnya.
Versi 2.1 memperkenalkan opsi untuk membangun pohon braket dari struktur pohon datar di mana simpul anak menunjuk ke simpul induknya. Strukturnya agak sederhana tetapi memerlukan dua properti tambahan pada setiap objek permainan: id , next . Mungkin berguna dalam membuat tanda kurung eliminasi ganda dengan repechages. Contoh:
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 },
},
];
Inisialisasi braket dengan props flatTree :
< bracket :flat-tree =" rounds " >Ini menghasilkan braket berikut:
Objek pemain memerlukan: properti id , winner bersifat opsional, sisanya terserah Anda - rendering dapat disesuaikan melalui slot cakupan.
id digunakan untuk menyorotwinner menerapkan warna untuk pemain yang sesuai, bisa juga null - warna pemain akan menjadi abu-abu Terapkan gaya khusus Anda dengan mengganti CSS komponen Bracket . Lihat BracketNode.vue untuk semua gaya yang digunakan.
Versi Node.js yang diperlukan adalah 14.0.0 (eslint).
Repositori checkout dan:
npm install
npm run serve
Kemudian buka browser dan uji perubahan Anda menggunakan komponen utama App.vue untuk tujuan pengembangan.
Lihat package.json untuk menemukan perintah yang tersedia.
npm test
npm run eslint
npm run build
git commit
npm version
git push
npm publish --access=public
MIT
