vue tournament bracket
Vue 3 migration
用于渲染单场淘汰赛括号的 Vue 组件。与 Vue 3 兼容。对于 Vue 2 支持安装 2.* 版本的软件包。
基于：https://codepen.io/sdudnyk/pen/bWbqMb。
渲染基于flex ，请参阅浏览器支持。
现实生活中的例子可以在这里找到：militarymatch.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 > 第三名附加赛的代表方式如下：
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 " >它生成以下括号：
Player 对象需要： 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
git push
npm publish --access=public
麻省理工学院
