vue强制渲染单个组件
VUE锦标赛支架 (vue-tournament-bracket)
Vue component for rendering single elemination tournament brackets.
Vue组件，用于渲染单个淘汰赛括号。
View Demo 查看演示 Download Source 下载源
安装和组件使用 (Installation and component usage)
Install component via:
通过以下方式安装组件：
npm install vue-tournament-bracket
Example:
例：
<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>
季后赛第三名 (Third place play-off)
Here is the way to represent third place play-off:
这是代表季后赛附加赛的方式：
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 },}]}];
底部插槽 (Bottom slot)
There is slot with whole match props, use it in following way:
有带有整体比赛道具的插槽，请按以下方式使用它：
<bracket :rounds="rounds"><template #player="{ player }">{{ player.name }}</template><template #player-extension-bottom="{ match }">Extra info: {{ match.title }}</template></bracket>
May be useful for example for showing tooltips etc.
例如对于显示工具提示等可能有用。
游戏对象 (Game object)
Game object requiresplayer1andplayer2objects. You can also add your own and e.g. reuse it inplayers-extension-bottomslot.
游戏对象需要player1和player2对象。 您也可以添加自己的名称，例如在players-extension-bottom插槽中重复使用。
Following properties are forbidden and are going to be replaced withundefined:
以下属性是禁止的，并将被undefined代替：
games
games
hasParent
hasParent
SeematchPropertiesinGamePlayersfor details.
有关详细信息，请参见matchProperties中的GamePlayers。
玩家对象 (Player object)
Player object requires:idproperty,winneris optional, rest is up to you - rendering is customizable via scoped slot.
播放器对象需要：id属性，winner是可选的，其余取决于您-渲染可通过作用域插槽自定义。
idis being used for highlighting
id用于突出显示
winnerproperty applies color for player accordingly, can be alsonull- player's color will be gray
winner属性会相应地为玩家应用颜色，也可以为null玩家的颜色将为灰色
造型 (Styling)
Apply your custom style by overridingBracketcomponent CSS. See BracketNode.vue for all styles being used.
通过覆盖Bracket组件CSS来应用自定义样式。 有关正在使用的所有样式，请参见BracketNode.vue 。
发展历程 (Development)
Checkout repository and:
检出存储库和：
npm installnpm run serve
Then open browser and test your changes usingApp.vuemain component for development purposes.
然后打开浏览器，并使用App.vue主要组件测试更改以进行开发。
Seepackage.jsonto discover available commands.
请参阅package.json以发现可用命令。
发行 (Releasing)
npm testnpm run eslintnpm run buildgit commitnpm version <version>git pushnpm publish --access=public
翻译自: /vue-component-for-rendering-single-elemination-tournament-brackets/
vue强制渲染单个组件
