vnode2canvas
Rendering virtual DOM into canvas based on Vue plugin
mpvue vnode2canvas
使用文档请移步到这里文档
example
example url: demo
usage
install
npm i vnode2canvas --save
use in Vue
First of all, you need to register vnode2Canvas
Vue
vnode2Canvas
will render canvas by function renderCanvas
option:
// define render options canvasOptions: width: windowinnerWidth // canvas width height: windowinnerHeight // canvas height { // .... }
after that vnode2Canvas
will register a property named renderInstance
on vue instance:
renderInstance = _ctx _canvas ...
1. render scroll list
A rolling list based on scroller to support lazy list loading.
usage:
el: '#app' data: dataJSON: // ... methods: { return img: left: 10 top: 10 + 110 * i width: 100 height: 100 fill: '#000' title: left: 120 top: 10 + 110 * i fill: '#000' fontSize: 18 width: 150 ellipse: true desc: left: 120 top: 50 + 110 * i fill: '#999' date: left: 120 top: 80 + 110 * i fill: '#999' type } { return width: windowinnerWidth height: windowinnerHeight } { return }
2. events
Support the following events:
click
mouseup
mousedown
- to be continue...
usage
// ...
renderCanvas(h) {
return h('view', {
on: {
click: (e, item) => {
alert('click Text')
}
}
},
'click event'
)
}
// ...
3. use css file for webpack loader
If you think write CSS in JS is not comfortable, you can also load your external CSS file through a webpack loader.
// webpackconst canvasStyleLoader = moduleexports = module: rules: test: /\.js$/ exclude: /node_modules/ use: loader: "babel-loader" test: /\.css$/ // To avoid conflicts with CSS styles, you need to specify loading paths. include: path use: loader: 'canvasStyleLoader' ;
//
// ... { return }