文字、按钮、开关

src/components/iconLibrary.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-
-import { defineProps } from "vue";
 defineProps(["list"])
 const emits = defineEmits(['selectIcon'])
 

src/components/maskedbox/boxSize.vue

@@ -56,7 +56,7 @@ function getLock(params: any) {
             </el-icon>
         </div>
         <div class="grey_input_bgc">
-            <el-input-number class="card_number" :disabled="true" v-model="heightNum" :min="1" size="small"
+            <el-input-number class="card_number" v-model="heightNum" :min="1" size="small"
                 controls-position="right" @change="heightChange" />
             <span>H</span>
         </div>

src/components/maskedbox/digitalSlider.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+const props = defineProps({
+    num: {
+        type: Number,
+        required: true
+    },
+    title: {
+        type: String,
+        required: true
+    },
+    min: {
+        type: Number,
+        default: 0
+    },
+    max: {
+        type: Number,
+        default: 200
+    },
+})
+const lineNum: any = ref()
+
+watch(() => props.num, (newValue) => {
+    if (newValue) {
+        lineNum.value = newValue;
+    }
+}, { immediate: true, deep: true })
+
+const emit = defineEmits(['update:num']);
+function numberChange(params: any) {
+    const arr = params
+    emit('update:num', arr);
+}
+</script>
+
+<template>
+    <div class="same_row_in upAndDown_padding">
+        <span class="title_12 w_60 default_size" style="flex: none;">{{ title }}</span>
+        <div class="grey_input_bgc w_60_index">
+            <el-input-number class="card_number" v-model="lineNum" :min="min" :max="max" size="small"
+                controls-position="right" @input="numberChange" />
+        </div>
+        <div class="card_slider" style="width: 100%;">
+            <el-slider v-model="lineNum" :min="min" :max="max" size="small" @input="numberChange" />
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.card_number :deep(.el-input-number__decrease),
+.card_number :depp(.el-input-number__increase) {
+    width: 20px;
+}
+
+.card_slider :deep(.el-slider__button-wrapper) {
+    top: -17px;
+}
+
+.card_slider :deep(.el-slider__runway) {
+    height: 4px !important;
+}
+
+.card_slider :deep(.el-slider__bar) {
+    height: 4px !important;
+}
+
+.card_slider :deep(.el-slider__button) {
+    width: 13px;
+    height: 13px;
+}
+</style>

src/components/moduleLibrary.vue

@@ -15,7 +15,6 @@
 </template>
   
 <script lang="ts" setup>
-import { defineProps } from "vue";
 defineProps(["current"])
 
 interface Tree {

src/components/widgets/Button.vue

@@ -1,11 +1,53 @@
 <template>
-  <div style="width: 50px;font-size: 30px;">button1{{ input }}</div>
+  <div class="center_in card_button_padding"
+    :style="{ width: width + 'px', height: height + 'px', 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>
+  </div>
 </template>
 
 <script setup lang="ts">
+import { watch, ref } from "vue";
+const props = defineProps(["config"])
 
-import { ref } from "vue";
-const input = ref('')
+const value = ref(false)
+const width = ref('')
+const height = ref('')
+const backgroundColor = ref('')
+const borderRadius = ref('')
+
+const color = ref('')
+const fontSize = ref('')
+const fontWeight = ref('')
+const textWidth = ref('')
+
+watch(() => props.config, (newValue) => {
+  if (newValue) {
+    value.value = newValue.config.name
+    width.value = newValue.css.width
+    height.value = newValue.css.height
+    backgroundColor.value = newValue.css.backgroundColor
+    borderRadius.value = newValue.css.borderRadius
+
+    color.value = newValue.css.color
+    fontSize.value = newValue.css.fontSize
+    fontWeight.value = newValue.css.fontWeight
+    textWidth.value = newValue.css.textWidth
+  }
+}, { immediate: true, deep: true })
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.card_button_padding {
+  padding-right: 8px;
+  padding-left: 8px;
+}
+
+.beyondHiding {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

src/components/widgets/Images.vue

@@ -6,7 +6,6 @@
 </template>
   
 <script lang="ts" setup>
-import { defineProps } from "vue";
 defineProps(["config", "sendSon"])
 </script>
  

src/components/widgets/SceneButton.vue

@@ -15,7 +15,7 @@
 </template>
   
 <script lang="ts" setup>
-import { defineProps, watch, ref } from "vue";
+import { watch, ref } from "vue";
 const props = defineProps(["config"])
 
 const btndata: any = ref({})

src/components/widgets/Switch.vue

@@ -1,11 +1,21 @@
 <template>
-  <el-switch style="width: 40px;height: 20px;pointer-events: none;" v-model="value" />
+  <el-switch style="width: 40px;height: 20px;pointer-events: none;"
+    :style="{ '--el-switch-on-color': activeColor, '--el-switch-off-color': inactiveColor }" v-model="value" />
 </template>
 
 <script setup lang="ts">
+import { watch, ref } from "vue";
+const props = defineProps(["config"])
 
-import { ref } from "vue";
 const value = ref(false)
+const activeColor = ref('') //开
+const inactiveColor = ref('') //关
+watch(() => props.config, (newValue) => {
+  if (newValue) {
+    activeColor.value = newValue.css.colorOpen
+    inactiveColor.value = newValue.css.colorClose
+  }
+}, { immediate: true, deep: true })
 </script>
 
 <style lang="scss">

src/components/widgets/Text.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, watch, ref } from "vue";
+import { watch, ref } from "vue";
 const props = defineProps(["config"])
 
 const configData: any = ref({})

src/module/config/button.ts

@@ -1,24 +1,22 @@
 const btnConfig = {
     isActive: false,
-    name: '场景',
-    size: 30,
-    img: 'set',
-    lineNum: null,
+    name: '功能名称',
     isResizable: true, //禁止缩放
-    // sticks:['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml'],
     aspectRatio: false, //禁止等比例缩放
+    resizable: true, //禁止调整大小
 }
 
 const btnCss = {
     top: 577,
     left: 142.5,
-    width: 90,
-    height: 90,
-    borderRadius: 8,
-    iconColor: "rgba(21, 140, 251, 1)",
-    backgroundColor: '#fff',
-    fontWeight: 500,
-    textAlign: 'center',
+    width: 125,
+    height: 45,
+    borderRadius: 24,
+    textWidth: 86,
+    fontSize: 14,
+    fontWeight: 400,
+    color: "rgba(255, 255, 255, 1)",
+    backgroundColor: 'rgba(21, 140, 251, 1)',
 }
 
 export { btnConfig, btnCss }

src/module/config/sceneButton.ts

@@ -0,0 +1,24 @@
+const sceneConfig = {
+    isActive: false,
+    name: '场景',
+    size: 30,
+    img: 'set',
+    lineNum: null,
+    isResizable: true, //禁止缩放
+    // sticks:['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml'],
+    aspectRatio: false, //禁止等比例缩放
+}
+
+const sceneCss = {
+    top: 577,
+    left: 142.5,
+    width: 90,
+    height: 90,
+    borderRadius: 8,
+    iconColor: "rgba(21, 140, 251, 1)",
+    backgroundColor: '#fff',
+    fontWeight: 500,
+    textAlign: 'center',
+}
+
+export { sceneConfig, sceneCss }

src/module/config/switch.ts

@@ -11,8 +11,8 @@ const switchCss = {
     left: 0,
     width: 40,
     height: 20,
-    colorOpen: "rgba(61, 61, 61, 1)",
-    colorClose: "rgba(61, 61, 61, 1)",
+    colorOpen: "rgba(64, 158, 255, 1)",
+    colorClose: "rgba(220, 223, 230, 1)",
 }
 
 export { switchConfig, switchCss }

src/module/index.ts

@@ -2,6 +2,7 @@
 import { TextConfig, TextCss } from "./config/text";
 import { switchConfig, switchCss } from "./config/switch";
 import { btnConfig, btnCss } from "./config/button";
+import { sceneConfig, sceneCss } from "./config/sceneButton";
 import { configList1, cssList1 } from "./config/input";
 
 const baseComponent = [{
@@ -27,8 +28,8 @@ const baseComponent = [{
 }, {
     id: 9, type: 'Picture', name: "图片", active: false,
     displayPicture: true,
-    config: btnConfig,
-    css: btnCss,
+    config: sceneConfig,
+    css: sceneCss,
 }]
 
 const attributeValue = [{
@@ -37,18 +38,18 @@ const attributeValue = [{
     css: cssList1,
 }, {
     id: 2, type: 'SceneButton', name: "场景", active: false,
-    config: btnConfig,
-    css: btnCss,
+    config: sceneConfig,
+    css: sceneCss,
 }]
 
 const layout = [{
     id: 3, type: 'SceneButton', name: "场景", active: false,
-    config: btnConfig,
-    css: btnCss,
+    config: sceneConfig,
+    css: sceneCss,
 }, {
     id: 4, type: 'SceneButton', name: "场景2", active: false,
-    config: btnConfig,
-    css: btnCss,
+    config: sceneConfig,
+    css: sceneCss,
 }]
 
 export { baseComponent, attributeValue, layout };

src/views/maskedbox.vue

@@ -9,24 +9,20 @@
             </el-icon>
         </div>
         <div v-if="basicFlag" class="card_second_level">
-            <div class="same_row_in upAndDown_padding" v-if="config.config.size">
-                <span class="title_12 w_60 default_size" style="flex: none;">层级</span>
-                <div class="grey_input_bgc w_60_index">
-                    <el-input-number class="card_number" v-model="config.config.size" :min="1" size="small"
-                        controls-position="right" />
-                </div>
-                <div class="card_slider" style="width: 100%;">
-                    <el-slider v-model="config.config.size" size="small" />
-                </div>
-            </div>
+            <digitalSlider v-if="config.config.size" v-model:num="config.config.size" title="层级"></digitalSlider>
             <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"
                 v-model:width="config.css.width" v-model:height="config.css.height"></boxSize>
             <colorSelection v-if="config.css.color" v-model:iconColor="config.css.color" title="颜色"></colorSelection>
+            <colorSelection v-if="config.css.colorOpen" v-model:iconColor="config.css.colorOpen" title="颜色(开)">
+            </colorSelection>
+            <colorSelection v-if="config.css.colorClose" v-model:iconColor="config.css.colorClose" title="颜色(关)">
+            </colorSelection>
             <fontSize v-if="config.css.fontSize && config.css.fontWeight" v-model:fontSize="config.css.fontSize"
                 v-model:fontWeight="config.css.fontWeight"></fontSize>
             <textAlignment v-if="config.css.textAlign" v-model:align="config.css.textAlign"></textAlignment>
             <lineNumber v-if="'lineNum' in config.config" v-model:num="config.config.lineNum"></lineNumber>
+            <digitalSlider v-if="'textWidth' in config.css" v-model:num="config.css.textWidth" title="宽度"></digitalSlider>
         </div>
     </div>
     <div class="box_padding" v-if="config.config.img">
@@ -45,6 +41,21 @@
             <lineNumber v-model:num="config.config.lineNum"></lineNumber>
         </div>
     </div>
+    <div class="box_padding" v-if="'backgroundColor' in config.css && 'borderRadius' in config.css">
+        <div class="same_row_in">
+            <span class="default_size title_5">背景</span>
+            <el-icon style="cursor: pointer;" :class="backgroundFlag ? '' : 'putAway'"
+                @click="getbasicSetting('background')">
+                <ArrowDown />
+            </el-icon>
+        </div>
+        <div v-if="backgroundFlag" class="card_second_level">
+            <digitalSlider v-if="'borderRadius' in config.css" v-model:num="config.css.borderRadius" title="圆角">
+            </digitalSlider>
+            <colorSelection v-if="config.css.backgroundColor" v-model:iconColor="config.css.backgroundColor" title="颜色">
+            </colorSelection>
+        </div>
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -58,6 +69,7 @@ import iconSize from '../components/maskedbox/iconSize.vue';
 import colorSelection from '../components/maskedbox/colorSelection.vue';
 import textAlignment from '../components/maskedbox/textAlignment.vue';
 import lineNumber from '../components/maskedbox/lineNumber.vue';
+import digitalSlider from '../components/maskedbox/digitalSlider.vue';
 
 const props = defineProps({
     config: {
@@ -68,6 +80,7 @@ const props = defineProps({
 
 const basicFlag = ref(true)
 const imgFlag = ref(true)
+const backgroundFlag = ref(true)
 
 function getbasicSetting(params: any) {
     if (params == 'basic') {
@@ -82,6 +95,12 @@ function getbasicSetting(params: any) {
         } else {
             imgFlag.value = true
         }
+    } else if (params == 'background') {
+        if (backgroundFlag.value) {
+            backgroundFlag.value = false
+        } else {
+            backgroundFlag.value = true
+        }
     }
 }
 
@@ -134,31 +153,9 @@ watch(() => props.config, (newValue) => {
     padding-right: 30px;
 }
 
-.card_number :deep(.el-input-number__decrease),
-.card_number :depp(.el-input-number__increase) {
-    width: 20px;
-}
-
 .card_select_bg {
     background-color: #f1f1f7;
     padding: 2px;
     border-radius: 4px;
 }
-
-.card_slider :deep(.el-slider__button-wrapper) {
-    top: -17px;
-}
-
-.card_slider :deep(.el-slider__runway) {
-    height: 4px !important;
-}
-
-.card_slider :deep(.el-slider__bar) {
-    height: 4px !important;
-}
-
-.card_slider :deep(.el-slider__button) {
-    width: 13px;
-    height: 13px;
-}
 </style>