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';

最终效果：

 

原文地址：https://blog.csdn.net/lilycheng1986/article/details/138861067

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！