vue父组件加载子组件_棋盘Vue组件以加载位置

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国际象棋棋盘

View demo 查看演示 Download Source 下载源

安装 (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父组件加载子组件