vue tournament bracket
Vue 3 migration
Componente Vue para renderizar chaves de torneio de eliminação única. Compatível com Vue 3. Para suporte ao Vue 2, instale a versão 2.* do pacote.
Baseado em: https://codepen.io/sdudnyk/pen/bWbqMb.
A renderização é baseada em flex , consulte suporte do navegador.
Um exemplo da vida real pode ser encontrado aqui: marcialmatch.com.
Instale o componente via:
npm install vue-tournament-bracket
Exemplo:
< 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 > Esta é a maneira de representar o play-off do terceiro lugar:
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 } ,
}
]
}
] ; 
Há um slot com adereços de partida inteiros, use-o da seguinte maneira:
< bracket :rounds =" rounds " >
< template #player =" { player } " >
{{ player.name }}
</ template >
< template #player-extension-bottom =" { match } " >
Extra info: {{ match.title }}
</ template >
</ bracket >Pode ser útil, por exemplo, para mostrar dicas de ferramentas, etc.
O objeto do jogo requer os objetos player1 e player2 . Você também pode adicionar o seu próprio e, por exemplo, reutilizá-lo no slot players-extension-bottom .
As seguintes propriedades são proibidas e serão substituídas por undefined :
gameshasParent Consulte matchProperties em GamePlayers para obter detalhes.
A versão 2.1 introduz a opção de construir uma árvore de colchetes a partir de uma estrutura de árvore plana, onde o nó filho aponta para seu nó pai. A estrutura é um pouco simples, mas requer duas propriedades adicionais em cada objeto do jogo: id , next . Pode ser útil na geração de colchetes de dupla eliminação com repescagens. Exemplo:
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 },
},
];
Inicialize o suporte com adereços flatTree :
< bracket :flat-tree =" rounds " >Ele gera o seguinte colchete:
O objeto Player requer: propriedade id , winner é opcional, o resto é com você - a renderização é personalizável por meio do slot com escopo definido.
id está sendo usado para destacarwinner aplica a cor ao jogador de acordo, também pode ser null - a cor do jogador será cinza Aplique seu estilo personalizado substituindo CSS do componente Bracket . Consulte BracketNode.vue para todos os estilos usados.
A versão necessária do Node.js é 14.0.0 (eslint).
Repositório de checkout e:
npm install
npm run serve
Em seguida, abra o navegador e teste suas alterações usando o componente principal App.vue para fins de desenvolvimento.
Consulte package.json para descobrir os comandos disponíveis.
npm test
npm run eslint
npm run build
git commit
npm version <version>
git push
npm publish --access=public
MIT
