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 では、子ノードが親ノードを指すフラット ツリー構造からブラケット ツリーを構築するオプションが導入されています。構造は少し単純ですが、各ゲーム オブジェクトに 2 つの追加プロパティ ( 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 props を使用してブラケットを初期化します。
< 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
マサチューセッツ工科大学
