vue tournament bracket
Vue 3 migration
Composant Vue pour le rendu des tranches de tournoi à élimination simple. Compatible avec Vue 3. Pour la prise en charge de Vue 2, installez la version 2.* du package.
Basé sur : https://codepen.io/sdudnyk/pen/bWbqMb.
Le rendu est basé sur flex , voir prise en charge du navigateur.
Un exemple réel peut être trouvé ici : martialmatch.com.
Installez le composant via :
npm install vue-tournament-bracket
Exemple:
< 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 > Voici la manière de représenter les barrages pour la troisième place :
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 } ,
}
]
}
] ; 
Il y a une fente avec des accessoires de match entiers, utilisez-la de la manière suivante :
< bracket :rounds =" rounds " >
< template #player =" { player } " >
{{ player.name }}
</ template >
< template #player-extension-bottom =" { match } " >
Extra info: {{ match.title }}
</ template >
</ bracket >Peut être utile par exemple pour afficher des info-bulles, etc.
L'objet de jeu nécessite les objets player1 et player2 . Vous pouvez également ajouter le vôtre et, par exemple, le réutiliser dans l'emplacement players-extension-bottom .
Les propriétés suivantes sont interdites et vont être remplacées par undefined :
gameshasParent Voir matchProperties dans GamePlayers pour plus de détails.
La version 2.1 introduit l'option permettant de créer une arborescence de supports à partir d'une structure arborescente plate où le nœud enfant pointe vers son nœud parent. La structure est un peu simple mais nécessite deux propriétés supplémentaires sur chaque objet du jeu : id , next . Cela pourrait être utile pour générer des tranches de double élimination avec repêchages. Exemple:
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 },
},
];
Initialisez le support avec les accessoires flatTree :
< bracket :flat-tree =" rounds " >Il génère la parenthèse suivante :
L'objet Player nécessite : la propriété id , winner est facultatif, le reste dépend de vous - le rendu est personnalisable via l'emplacement de portée.
id est utilisé pour la mise en évidencewinner applique la couleur au joueur en conséquence, peut également être null - la couleur du joueur sera grise Appliquez votre style personnalisé en remplaçant le CSS du composant Bracket . Voir BracketNode.vue pour tous les styles utilisés.
La version requise de Node.js est 14.0.0 (eslint).
Référentiel de paiement et :
npm install
npm run serve
Ensuite, ouvrez le navigateur et testez vos modifications à l'aide du composant principal App.vue à des fins de développement.
Voir package.json pour découvrir les commandes disponibles.
npm test
npm run eslint
npm run build
git commit
npm version <version>
git push
npm publish --access=public
MIT
