From f2ab32a9a068e8953c71c902b446cd55e7b09b3e Mon Sep 17 00:00:00 2001
From: Betty985 <1830265753@qq.com>
Date: Sat, 7 May 2022 22:04:27 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BE=B9=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/StyleParse/border/index.vue    | 22 ++++++++++
 src/components/StyleParse/code/index.vue      |  0
 .../StyleParse/colorPicker/index.vue          | 41 ++++++++++---------
 src/components/StyleParse/index.js            | 17 ++++----
 .../custom/elementUi/button/index.vue         | 12 ++++--
 src/constants/config.js                       |  3 +-
 src/constants/style-form-config.js            | 24 +++++++++++
 7 files changed, 87 insertions(+), 32 deletions(-)
 create mode 100644 src/components/StyleParse/border/index.vue
 create mode 100644 src/components/StyleParse/code/index.vue

diff --git a/src/components/StyleParse/border/index.vue b/src/components/StyleParse/border/index.vue
new file mode 100644
index 0000000..b0567d8
--- /dev/null
+++ b/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>
diff --git a/src/components/StyleParse/code/index.vue b/src/components/StyleParse/code/index.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/StyleParse/colorPicker/index.vue b/src/components/StyleParse/colorPicker/index.vue
index 7b8c2a0..3e01a00 100644
--- a/src/components/StyleParse/colorPicker/index.vue
+++ b/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>
diff --git a/src/components/StyleParse/index.js b/src/components/StyleParse/index.js
index 07fb041..3261a5d 100644
--- a/src/components/StyleParse/index.js
+++ b/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
-}
\ No newline at end of file
+  ColorPicker,
+  Border,
+};
diff --git a/src/components/custom/elementUi/button/index.vue b/src/components/custom/elementUi/button/index.vue
index e051ea4..345400d 100644
--- a/src/components/custom/elementUi/button/index.vue
+++ b/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>
diff --git a/src/constants/config.js b/src/constants/config.js
index 303554a..332604f 100644
--- a/src/constants/config.js
+++ b/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,
   },
 ];
diff --git a/src/constants/style-form-config.js b/src/constants/style-form-config.js
index 15d2e42..cc26df0 100644
--- a/src/constants/style-form-config.js
+++ b/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",
+  },
+];