feat：页面参数新增辅助线功能

cheng365 · Nov 21, 2023 · 3e1df1c · 3e1df1c
1 parent 3a0360f
commit 3e1df1c
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/src/components/panel/page.vue b/src/components/panel/page.vue
@@ -50,6 +50,12 @@
           <span class="unit-text">(mm)</span>
         </el-form-item>
       </el-row>
+      <el-row>
+        <el-form-item label="辅助线">
+          <el-switch v-model="pageInfo.auxiliaryLine"
+            :active-value="true" :inactive-value="false"></el-switch>
+        </el-form-item>
+      </el-row>
     </el-form>
   </div>
 </template>

diff --git a/src/components/viewport/index.vue b/src/components/viewport/index.vue
@@ -6,7 +6,7 @@
         width: page.width + 'px',
         backgroundImage: 'url('+backImg+')'
       }"
-      class="screen"
+      :class="['screen', page.auxiliaryLine ? 'auxiliary-line': '']"
     >
       <!-- 组件 -->
       <component
@@ -170,4 +170,9 @@ export default {
   background-color: #ffffff;
   background-repeat: no-repeat;
 }
+.auxiliary-line {
+  background-size: 5mm 5mm;
+  background-repeat: repeat;
+  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(0, 0, 0, 0.1) 3%, rgba(0, 0, 0, 0) 3%) !important;
+}
 </style>
diff --git a/src/store/state.js b/src/store/state.js
@@ -22,6 +22,7 @@ export default {
     height: 550,
     pageWidth: 750,
     pageHeight: 550,
+    auxiliaryLine: true, // 辅助线
     tempItems: [], // 模板已选项
   },
   optionItems: [], // 可选项