层级

src/components/drag/resizable.vue

@@ -20,7 +20,7 @@ import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
 import { ref, watch, computed } from "vue";
 const initW = ref(0)
 const initH = ref(0)
-const w = ref(0)
+const w: any = ref(0)
 const h: any = ref(null)
 const top = ref(0)
 const left = ref(0)

src/components/widgets/Button.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="center_in card_button_padding"
-    :style="{ width: width + 'px', height: height + 'px', backgroundColor: backgroundColor, borderRadius: borderRadius + 'px', }">
+    :style="{ width: width + 'px', height: height + 'px', zIndex: zIndex, backgroundColor: backgroundColor, borderRadius: borderRadius + 'px', }">
     <div class="beyondHiding" style="text-align: center;"
       :style="{ width: textWidth + 'px', color: color, fontSize: fontSize + 'px', fontWeight: fontWeight, }">{{ value }}
     </div>
@@ -14,6 +14,7 @@ const props = defineProps(["config"])
 const value = ref(false)
 const width = ref('')
 const height = ref('')
+const zIndex = ref(0)
 const backgroundColor = ref('')
 const borderRadius = ref('')
 
@@ -26,6 +27,7 @@ watch(() => props.config, (newValue) => {
   if (newValue) {
     value.value = newValue.config.name
     width.value = newValue.css.width
+    zIndex.value = newValue.css.zIndex
     height.value = newValue.css.height
     backgroundColor.value = newValue.css.backgroundColor
     borderRadius.value = newValue.css.borderRadius

src/module/config/button.ts

@@ -17,6 +17,7 @@ const btnCss = {
     textWidth: 86,
     fontSize: 14,
     fontWeight: 400,
+    zIndex: 0,
     color: "rgba(255, 255, 255, 1)",
     backgroundColor: 'rgba(21, 140, 251, 1)',
 }

src/module/config/picture.ts

@@ -18,6 +18,7 @@ const pictureCss = {
     height: 170,
     borderRadius: 15,
     opacity: 1,
+    zIndex: 0,
 }
 
 export { pictureConfig, pictureCss }

src/module/config/sceneButton.ts

@@ -18,6 +18,7 @@ const sceneCss = {
     height: 90,
     iconSize: 27,
     borderRadius: 8,
+    zIndex: 0,
     iconColor: "rgba(21, 140, 251, 1)",
     backgroundColor: 'rgba(255, 255, 255, 1)',
     fontWeight: 500,

src/views/maskedbox.vue

@@ -10,7 +10,7 @@
             </el-icon>
         </div>
         <div v-if="basicFlag" class="card_second_level">
-            <digitalSlider v-if="config.config.size" v-model:num="config.config.size" title="层级"></digitalSlider>
+            <digitalSlider v-if="'zIndex' in config.css" v-model:num="config.css.zIndex" title="层级"></digitalSlider>
             <patternMode v-if="config.config.pictureMode" v-model:mode="config.config.pictureMode"></patternMode>
             <literalName v-if="'name' in config.config" v-model:name="config.config.name"></literalName>
             <boxSize v-if="config.css.width && config.css.height != 'auto' && config.css.height && config.config.resizable"