参考这个博客做了网格线：

http://t.csdnimg.cn/y20vM

把网格颜色，宽高和透明度做成可配置项。

在css里绑定变量：

上面的html和下面的css不在同一个vue文件里，虽然变量名不同，一个是formData，一个是designData，所指向的对象是相同的。

注意：style里不要写lang="scss" 不然会一直报错。

唯一的遗憾是，宽度和高度本来想设置为数字类型，通过input-number输入，然后在css里拼上‘px’，像下面这种写法，会报错，所以只能把px单位放在输入框里。

另外还有一个小小的问题，页面缩放的时候，网格线会消失。

background-size: v-bind(designData.grid.width)+'px' v-bind(designData.grid.height)+'px';

最终效果：