css: 动态设置网格线

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

http://t.csdnimg.cn/y20vM

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

<e-collapse title="网格线" :expand="false">
			<t-form-item label="颜色">
			  <el-color-picker v-model="formData.grid.color"></el-color-picker>
			</t-form-item>
			<t-form-item label="宽度">
			  <t-input v-model="formData.grid.width" />
			</t-form-item>
			<t-form-item label="高度">
			  <t-input v-model="formData.grid.height" />
			</t-form-item>
			<t-form-item label="透明度">
			  <t-slider v-model="formData.grid.opacity" :min="0" :max="1" :step="0.1" label/>
			</t-form-item>
		</e-collapse>

在css里绑定变量：

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

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

<style scoped>
	.webContainer::after {
	  position: fixed;
	  top: 0;
	  left: 0;
	  content: '';
	  width: 100%;
	  height: 100%;
	  background-image: linear-gradient(
	      0deg,
	      v-bind(designData.grid.color) 0px,
	      v-bind(designData.grid.color) 1px,
	      transparent 1px,
	      transparent 100px
	    ),
	    linear-gradient(
	      90deg,
	      v-bind(designData.grid.color) 0px,
	      v-bind(designData.grid.color) 1px,
	      transparent 1px,
	      transparent 100px
	    );
		
	  background-size: v-bind(designData.grid.width) v-bind(designData.grid.height);
	  opacity: v-bind(designData.grid.opacity);
	  z-index: -1;
	}
</style>

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

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

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

最终效果：