Vue中的单淘汰赛支架简单的Vue.js库 - vue-tournament-bracket

Vue中的单淘汰赛支架简单的Vue.js库 - vue-tournament-bracket
插件名称 vue-tournament-bracket
版本号 v2.1.3
发布时间 2020年4月8日
插件作者 kamilwylegala

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

  •  

安装和下载:

# 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
    }
  }
}

变更日志:

v2.1.3(05/09/2021)

  • 更新了依赖关系。

v2.1.2(09/13/2020)

  • 依赖关系更新。

v2.1.1(07/20/2020)

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

v2.1.0(06/30/2020)

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