From cb95eff6368525559b74aa645ec6724f72f26ee3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Tue, 24 Dec 2024 09:51:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=BE=B9=E6=A1=86=E5=A4=84?=
 =?UTF-8?q?=E7=90=86=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/border-config/index.vue | 61 +++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 src/components/common/border-config/index.vue

diff --git a/src/components/common/border-config/index.vue b/src/components/common/border-config/index.vue
new file mode 100644
index 00000000..25e7192d
--- /dev/null
+++ b/src/components/common/border-config/index.vue
@@ -0,0 +1,61 @@
+<template>
+    <el-form-item label="边框">
+        <el-switch v-model="border_show" active-value="1" inactive-value="0" />
+    </el-form-item>
+    <template v-if="border_show == '1'">
+        <el-form-item v-if="typeList.includes('color')" label="边框颜色">
+            <color-picker v-model="border_color" :default-color="defaultColor"></color-picker>
+        </el-form-item>
+        <el-form-item v-if="typeList.includes('style')" label="边框样式">
+            <el-radio-group v-model="border_style">
+                <el-radio value="dashed"><div class="border-style-item" style="border: 1px dashed #979797"></div></el-radio>
+                <el-radio value="solid"><div class="border-style-item" style="border: 1px solid #979797"></div></el-radio>
+                <el-radio value="dotted"><div class="border-style-item" style="border: 1px dotted #979797"></div></el-radio>
+            </el-radio-group>
+        </el-form-item>
+        <el-form-item v-if="typeList.includes('size')" label="边框粗细">
+            <padding :value="border_size" :max="100"></padding>
+        </el-form-item>
+    </template>
+</template>
+
+<script setup lang="ts">
+interface Props {
+    defaultColor?: string;
+    typeList?: string[]; // 默认显示3个，传递了之后按照传递的显示
+}
+const props = withDefaults(defineProps<Props>(), {
+    defaultColor: '',
+    typeList: () => ['color', 'style', 'size'],
+});
+const border_show = defineModel('show', {
+    type: String,
+    default: '0',
+});
+const border_color = defineModel('color', {
+    type: String,
+    default: '#FF3F3F',
+});
+const border_style = defineModel('style', {
+    type: String,
+    default: 'solid',
+});
+
+const border_size = defineModel('size', {
+    type: Object,
+    default: {
+        padding: 0,
+        padding_top: 0,
+        padding_bottom: 0,
+        padding_left: 0,
+        padding_right: 0,
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+.border-style-item {
+    width: 3rem;
+    height: 2rem;
+}
+</style>