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 > 3위 플레이오프를 나타내는 방법은 다음과 같습니다.
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 자세한 내용은 GamePlayers 의 matchProperties 참조하세요.
버전 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 일 수도 있습니다. 플레이어의 색상은 회색이 됩니다. Bracket 구성 요소 CSS를 재정의하여 사용자 정의 스타일을 적용합니다. 사용되는 모든 스타일은 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 <version>
git push
npm publish --access=public
MIT
