vue强制渲染单个组件_Vue组件，用于渲染单个淘汰赛括号

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 requires player1 and player2 objects. You can also add your own and e.g. reuse it in players-extension-bottom slot.

游戏对象需要player1和player2对象。 您也可以添加自己的名称，例如在players-extension-bottom插槽中重复使用。

Following properties are forbidden and are going to be replaced with undefined:

以下属性是禁止的，并将被undefined代替：

• games

  games

• hasParent

  hasParent

See matchProperties in GamePlayers for details.

有关详细信息，请参见matchProperties中的GamePlayers 。

玩家对象 (Player object)

Player object requires: id property, winner is optional, rest is up to you - rendering is customizable via scoped slot.

播放器对象需要： id属性， winner是可选的，其余取决于您-渲染可通过作用域插槽自定义。

• id is being used for highlighting

  id用于突出显示

• winner property applies color for player accordingly, can be also null - player's color will be gray

  winner属性会相应地为玩家应用颜色，也可以为null玩家的颜色将为灰色

造型 (Styling)

Apply your custom style by overriding Bracket component CSS. See BracketNode.vue for all styles being used.

通过覆盖Bracket组件CSS来应用自定义样式。 有关正在使用的所有样式，请参见BracketNode.vue 。

发展历程 (Development)

Checkout repository and:

检出存储库和：

npm install
npm run serve

Then open browser and test your changes using App.vue main component for development purposes.

然后打开浏览器，并使用App.vue主要组件测试更改以进行开发。

See package.json to discover available commands.

请参阅package.json以发现可用命令。

发行 (Releasing)

npm test
npm run eslint
npm run build
git commit
npm version <version>
git push
npm publish --access=public

翻译自: https://vuejsexamples.com/vue-component-for-rendering-single-elemination-tournament-brackets/

vue强制渲染单个组件