vue父组件加载子组件
棋盘 (vue-chessboard)
Chessboard vue component to load positions, create positions and see threats.
棋盘Vue组件可加载位置,创建位置并查看威胁。
It uses chess.js for chess movements and validations
它使用Chess.js进行国际象棋移动和验证
It uses chessground for chessboard UI chessground
它使用国际象棋棋盘UI国际象棋棋盘
安装 (Installation)
npm install --save vue-chessboard
默认组件导入 (Default component import)
import {chessboard} from 'vue-chessboard'
import 'vue-chessboard/dist/vue-chessboard.css'
Then use it in your template
然后在模板中使用它
<chessboard/>
浏览器 (Browser)
<div id="app">
<chessboard></chessboard>
</div>
<link rel="stylesheet" href="vue-chessboard/dist/vue-chessboard.css"/>
<script src="vue.js"></script>
<script src="vue-chessboard/dist/vue-chessboard.browser.js"></script>
<script>
new Vue({
el: '#app',
components: {
VueChessboard
}
});
</script>
例子 (Examples)
Check live examples: http://vitomd.com/vue-chessboard-examples/
查看实时示例: http : //vitomd.com/vue-chessboard-examples/
Check live examples repository: https://github.com/vitogit/vue-chessboard-examples
检查实时示例存储库: https : //github.com/vitogit/vue-chessboard-examples
Check full application using the component: Chess Guardian
使用以下组件检查完整的应用程序: Chess Guardian
简单的棋盘与法律动作 (Simple Chessboard with legal moves)
<chessboard/>
简单的棋盘,自由移动 (Simple Chessboard with free moves)
<chessboard :free="true"/>
简单的棋盘,显示对当前位置和玩家的威胁 (Simple Chessboard that shows threats for current position and player)
<chessboard :showThreats="true"/>
芬绑定到棋盘(单击新位置时的加载位置) (Fen binded to the chessboard (load position when click on a new position))
<chessboard :fen="currentFen"/>
<button class="button is-light" @click="loadFen(fen)" v-for="fen in fens">
{{fen}}
</button>
带有onmove回调的棋盘。 每次移动后返回位置信息{“ legal_black”:20,“ checks_black”:0,“ threat_black”:0,“ turn”:“ black”}。 (Chessboard with onmove callback. Returns positional info { "legal_black": 20, "checks_black": 0, "threat_black": 0, "turn": "black" } after each move.)
It also returns the fen and the history data.
它还返回fen和历史数据。
<chessboard @onMove="showInfo"/>
<div>
{{this.positionInfo}}
</div>
showInfo(data) {
this.positionInfo = data
}
带有onpromote回调的棋盘 (Chessboard with onpromote callback)
When there is a promotion it will execute the callback. Just return the first letter of the piece: q:Queen, r:Rook, k:Knight, b:Bishop
有促销时,它将执行回调。 只需返回该乐曲的首字母即可:q:Queen,r:Rook,k:Knight,b:Bishop
<chessboard :onPromotion="promote"/>
promote() {
return 'r' // This will promote to a rook
}
翻译自: https://vuejsexamples.com/chessboard-vue-component-to-load-positions/
vue父组件加载子组件