vue tournament bracket
Vue 3 migration
Componente Vue para renderizar grupos de torneos de eliminación simple. Compatible con Vue 3. Para compatibilidad con Vue 2, instale la versión 2.* del paquete.
Basado en: https://codepen.io/sdudnyk/pen/bWbqMb.
El renderizado se basa en flex ; consulte la compatibilidad con el navegador.
Un ejemplo de la vida real se puede encontrar aquí: Martialmatch.com.
Instale el componente a través de:
npm install vue-tournament-bracket
Ejemplo:
< 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 es la forma de representar el desempate por el tercer puesto:
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 } ,
}
]
}
] ; 
Hay una ranura con accesorios para todo el partido, úsala de la siguiente manera:
< bracket :rounds =" rounds " >
< template #player =" { player } " >
{{ player.name }}
template >
< template #player-extension-bottom =" { match } " >
Extra info: {{ match.title }}
template >
bracket >Puede resultar útil, por ejemplo, para mostrar información sobre herramientas, etc.
El objeto del juego requiere objetos player1 y player2 . También puedes agregar el tuyo propio y, por ejemplo, reutilizarlo en la ranura players-extension-bottom .
Las siguientes propiedades están prohibidas y serán reemplazadas por undefined :
gameshasParent Consulte matchProperties en GamePlayers para obtener más detalles.
La versión 2.1 introduce la opción para construir un árbol de soporte a partir de una estructura de árbol plana donde el nodo secundario apunta a su nodo principal. La estructura es un poco simple pero requiere dos propiedades adicionales en cada objeto del juego: id , next . Podría resultar útil generar grupos de doble eliminación con repechajes. Ejemplo:
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 },
},
];
Inicialice el soporte con los accesorios flatTree :
< bracket :flat-tree =" rounds " >Genera el siguiente corchete:
El objeto del jugador requiere: propiedad id , winner es opcional, el resto depende de usted; la representación se puede personalizar a través de la ranura con alcance.
id se está utilizando para resaltar.winner aplica el color correspondiente al jugador, también puede ser null : el color del jugador será gris. Aplique su estilo personalizado anulando el CSS del componente Bracket . Consulte BracketNode.vue para conocer todos los estilos que se utilizan.
La versión requerida de Node.js es 14.0.0 (eslint).
Repositorio de pago y:
npm install
npm run serve
Luego abra el navegador y pruebe sus cambios utilizando el componente principal App.vue para fines de desarrollo.
Consulte package.json para descubrir los comandos disponibles.
npm test
npm run eslint
npm run build
git commit
npm version
git push
npm publish --access=public
MIT
