边框

src/components/StyleParse/border/index.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { ref, watch } from "vue";
+import { usePanel } from "@/hooks/usePanel";
+let { current } = usePanel();
+
+const init = current.value.styles?.border || null;
+
+let val = ref(init);
+
+watch(
+  () => val.value,
+  () => {
+    current.value["styles"]["border"] = val;
+  }
+);
+</script>
+
+<template>
+  <el-input v-model="val" placeholder="1px solid red"></el-input>
+</template>
+
+<style scoped></style>

src/components/StyleParse/colorPicker/index.vue

@@ -3,39 +3,40 @@ import { ref, watch } from "vue";
 import { usePanel } from "@/hooks/usePanel";
 let { current, isMenuDown } = usePanel();
 const props = defineProps({
-	data: {
-		type: Object,
-	},
-	isStyle: {
-		type: Boolean,
-		default: false,
-	},
+  data: {
+    type: Object,
+  },
+  isStyle: {
+    type: Boolean,
+    default: false,
+  },
 });
 let key = props.data.key;
 let init = current.value["styles"][key] || null;
 let val = ref(init);
+
 watch(
-	() => val.value,
-	() => {
-		if (props.isStyle) {
-			current.value["styles"][key] = val.value;
-		} else {
-			current[key] = val.value;
-		}
-	}
+  () => val.value,
+  () => {
+    if (props.isStyle) {
+      current.value["styles"][key] = val.value;
+    } else {
+      current[key] = val.value;
+    }
+  }
 );
 function md() {
-	isMenuDown.value = true;
+  isMenuDown.value = true;
 }
 function change() {
-	// isMenuDown.value = true;
+  // isMenuDown.value = true;
 }
 </script>
 
 <template>
-	<div @mousedown.stop="md">
-		<el-color-picker v-model="val" @change="change" />
-	</div>
+  <div @mousedown.stop="md">
+    <el-color-picker v-model="val" @change="change" />
+  </div>
 </template>
 
 <style scoped></style>

src/components/StyleParse/index.js

@@ -1,12 +1,13 @@
-import Input from './input/index.vue';
-import Echarts from './echarts/index.vue';
-import InputNumber from './inputNumber/index.vue';
-import ColorPicker from './colorPicker/index.vue';
+import Input from "./input/index.vue";
+import Echarts from "./echarts/index.vue";
+import InputNumber from "./inputNumber/index.vue";
+import ColorPicker from "./colorPicker/index.vue";
+import Border from "./border/index.vue";
 
-
-export default{
+export default {
   Input,
   Echarts,
   InputNumber,
-  ColorPicker
-}
+  ColorPicker,
+  Border,
+};

src/components/custom/elementUi/button/index.vue

@@ -1,8 +1,13 @@
-<script setup></script>
+<script setup>
+defineProps({
+  styles: Object,
+  value: String,
+});
+</script>
 
 <template>
-  <div class="btn">
-    <el-button>hello</el-button>
+  <div class="btn" :style="{ ...styles }">
+    <el-button>{{ value }}</el-button>
   </div>
 </template>
 
@@ -14,5 +19,6 @@
 ::v-deep(.el-button) {
   width: 100%;
   height: 100%;
+  color: v-bind("styles.color");
 }
 </style>

src/constants/config.js

@@ -55,8 +55,9 @@ export const WIDGE_LIST = [
     url: "/img/elementplus1.png",
     component: "customElementUiButton",
     label: "按钮",
+    value: "hello world!",
     default: dft.ECHARTSPIE_DATA,
     styles: dft.ECHARTSPIE_STYLE,
-    styleForm: styleFormConfig.PIE,
+    styleForm: styleFormConfig.BTN,
   },
 ];

src/constants/style-form-config.js

@@ -17,6 +17,11 @@ export const TEXT = [
     component: "InputNumber",
     isStyle: true,
   },
+  {
+    key: "border",
+    label: "边框",
+    component: "Border",
+  },
 ];
 
 export const BAR = [
@@ -44,3 +49,22 @@ export const PIE = [
     component: "el-input-number",
   },
 ];
+
+export const BTN = [
+  {
+    key: "color",
+    label: "颜色",
+    component: "ColorPicker",
+    isStyle: true,
+  },
+  {
+    key: "value",
+    label: "内容",
+    component: "Input",
+  },
+  {
+    key: "border",
+    label: "边框",
+    component: "Border",
+  },
+];