Masth0/ScratchCard

some problems with vue

Closed this issue · 7 comments

I want to use ScratchCard with Vue, but i find that if ScratchCard is used in vue child route, it can not be scratched
{ path: '/', component: index, children: [ { name: 'intro', path: '/intro', component: intro }, { name: 'question', path: '/question', component: question }, { name: 'result', path: '/result', component: result }, { name: 'cj', path: '/cj', component: cj } ] }

Hi, have you got anything more to show ?
I use ScratchCard with nuxt for the demo page, i import SratchCard and instantiate it inside mounted method.

I find the problem. ScratchCard use getBoundingClientRect() to get the position of canvas, but if i add some css3 animation such as bounceInDown in animate.css to dom element, getBoundingClientRect() will change.

I got some problems with another script that had animations and getBoundingClientRect().
I will change that.

You can clone the branch master:
yarn install
yarn dev and choose the dist folder localhost:8080/dist
you can test it

I waiting your feedback 😸

It works, ths.
In package.json, you can change
"dev": "NODE_ENV=development concurrently \"webpack\" \"webpack-dev-server\" ",
to
"dev": "set NODE_ENV=development && concurrently \"webpack\" \"webpack-dev-server\" ",

because powershell in windows system doesn't support NODE_ENV

I added cross-env to supports NODE_ENV and i pusblished on npm.

thank you very much 😊