vue-chessboard
vue-chessboard copied to clipboard
How to set the size?
Hi, how i can set the size of the board? I like to set him to the 100% if the parent element width,
That's a good question, I can't investigate this now but I think you should overwrite this css rule and play a little with it. By default is 320px here is 600px. If the pieces looks bad I think you need to redraw it with something like document.body.dispatchEvent(new Event('chessground.resize'))
The base library to display the chessboard is https://github.com/ornicar/chessground
.cg-board-wrap {
width: 600px;
height: 600px;
position: relative;
display: block;
}
I used the following technique and I think it's pretty good.
- Give the
element a :key ... - Set componentKey to 0 in your data object ... data() { return { componentKey: 0 }}
- Create a method which increments your component key ... incKey() {this.componentKey += 1}
- Use the created hook to add an event listener ('resize') and run your method ... window.addEventListener('resize', this.incKey()).
- Make sure you remove the event listener on the destroyed hook.
Maybe a little hacky but it should be extremely performant and it forces the board to re-render every time the window is resized and the key changes.