一个简单的Vue.js库，可在应用程序上呈现单淘汰赛的括号。

变更日志：

v2.1.2（09/13/2020）

• 依赖关系更新。

v2.1.1（07/20/2020）

• 如果尚未完全构建模型，请防止出现“未定义”警告
• 依赖关系更新

v2.1.0（06/30/2020）

• 添加flatTree了允许以不同方式渲染方括号的道具，这有助于生成双重淘汰输家方括号。

安装和下载：

# NPM
$ npm install vue-tournament-bracket --save

基本用法：

1.安装并导入比赛支架组件。

import Bracket from "vue-tournament-bracket";

2.将比赛支架组件插入模板。

<template>
  <bracket :rounds="rounds">
    <template slot="player" slot-scope="{{ player }}">
      {{ player.name }}
    </template>
  </bracket>
<template>

3.如下创建您自己的回合：

const rounds = [
      //半决赛
      {
          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 },
              }
          ]
      },
      //决赛
      {
          games: [
              {
                  player1: { id: "4", name: "Competitor 4", winner: false },
                  player2: { id: "8", name: "Competitor 8", winner: true },
              }
          ]
      }
];

4.注册并启用比赛括号。

export default {
  components: {
    Bracket
  },
  data() {
    return {
      rounds: rounds
    }
  }
}