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:
通过以下方式安装组件：
{{ player.name }}
季后赛第三名 (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:
有带有整体比赛道具的插槽，请按以下方式使用它：
{{ player.name }}Extra info: {{ match.title }}
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代替：
gamesgameshasParenthasParent
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是可选的，其余取决于您-渲染可通过作用域插槽自定义。
idis being used for highlightingid用于突出显示winnerproperty applies color for player accordingly, can be alsonull- player's color will be graywinner属性会相应地为玩家应用颜色，也可以为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 serveThen 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
git push
npm publish --access=public 翻译自: https://vuejsexamples.com/vue-component-for-rendering-single-elemination-tournament-brackets/
vue强制渲染单个组件
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！