From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/components/DiyEditor/components/ComponentContainerProperty.vue | 168 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 168 insertions(+), 0 deletions(-)
diff --git a/src/components/DiyEditor/components/ComponentContainerProperty.vue b/src/components/DiyEditor/components/ComponentContainerProperty.vue
new file mode 100644
index 0000000..5d18785
--- /dev/null
+++ b/src/components/DiyEditor/components/ComponentContainerProperty.vue
@@ -0,0 +1,168 @@
+<template>
+ <el-tabs stretch>
+ <!-- 姣忎釜缁勪欢鐨勮嚜瀹氫箟鍐呭 -->
+ <el-tab-pane label="鍐呭" v-if="$slots.default">
+ <slot></slot>
+ </el-tab-pane>
+
+ <!-- 姣忎釜缁勪欢鐨勯�氱敤鍐呭 -->
+ <el-tab-pane label="鏍峰紡" lazy>
+ <el-card header="缁勪欢鏍峰紡" class="property-group">
+ <el-form :model="formData" label-width="80px">
+ <el-form-item label="缁勪欢鑳屾櫙" prop="bgType">
+ <el-radio-group v-model="formData.bgType">
+ <el-radio value="color">绾壊</el-radio>
+ <el-radio value="img">鍥剧墖</el-radio>
+ </el-radio-group>
+ </el-form-item>
+ <el-form-item label="閫夋嫨棰滆壊" prop="bgColor" v-if="formData.bgType === 'color'">
+ <ColorInput v-model="formData.bgColor" />
+ </el-form-item>
+ <el-form-item label="涓婁紶鍥剧墖" prop="bgImg" v-else>
+ <UploadImg v-model="formData.bgImg" :limit="1">
+ <template #tip>寤鸿瀹藉害 750px</template>
+ </UploadImg>
+ </el-form-item>
+ <el-tree :data="treeData" :expand-on-click-node="false" default-expand-all>
+ <template #default="{ node, data }">
+ <el-form-item
+ :label="data.label"
+ :prop="data.prop"
+ :label-width="node.level === 1 ? '80px' : '62px'"
+ class="w-full m-b-0!"
+ >
+ <el-slider
+ v-model="formData[data.prop]"
+ :max="100"
+ :min="0"
+ show-input
+ input-size="small"
+ :show-input-controls="false"
+ @input="handleSliderChange(data.prop)"
+ />
+ </el-form-item>
+ </template>
+ </el-tree>
+ <slot name="style" :style="formData"></slot>
+ </el-form>
+ </el-card>
+ </el-tab-pane>
+ </el-tabs>
+</template>
+
+<script setup lang="ts">
+import { ComponentStyle } from '@/components/DiyEditor/util'
+import { useVModel } from '@vueuse/core'
+
+/**
+ * 缁勪欢瀹瑰櫒灞炴�э細鐩墠鍙宠竟閮ㄥ垎
+ * 鐢ㄤ簬鍖呰９缁勪欢锛屼负缁勪欢鎻愪緵 鑳屾櫙銆佸杈硅窛銆佸唴杈硅窛銆佽竟妗嗙瓑鏍峰紡
+ */
+defineOptions({ name: 'ComponentContainer' })
+
+const props = defineProps<{ modelValue: ComponentStyle }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+
+const treeData = [
+ {
+ label: '澶栭儴杈硅窛',
+ prop: 'margin',
+ children: [
+ {
+ label: '涓�',
+ prop: 'marginTop'
+ },
+ {
+ label: '鍙�',
+ prop: 'marginRight'
+ },
+ {
+ label: '涓�',
+ prop: 'marginBottom'
+ },
+ {
+ label: '宸�',
+ prop: 'marginLeft'
+ }
+ ]
+ },
+ {
+ label: '鍐呴儴杈硅窛',
+ prop: 'padding',
+ children: [
+ {
+ label: '涓�',
+ prop: 'paddingTop'
+ },
+ {
+ label: '鍙�',
+ prop: 'paddingRight'
+ },
+ {
+ label: '涓�',
+ prop: 'paddingBottom'
+ },
+ {
+ label: '宸�',
+ prop: 'paddingLeft'
+ }
+ ]
+ },
+ {
+ label: '杈规鍦嗚',
+ prop: 'borderRadius',
+ children: [
+ {
+ label: '涓婂乏',
+ prop: 'borderTopLeftRadius'
+ },
+ {
+ label: '涓婂彸',
+ prop: 'borderTopRightRadius'
+ },
+ {
+ label: '涓嬪彸',
+ prop: 'borderBottomRightRadius'
+ },
+ {
+ label: '涓嬪乏',
+ prop: 'borderBottomLeftRadius'
+ }
+ ]
+ }
+]
+
+const handleSliderChange = (prop: string) => {
+ switch (prop) {
+ case 'margin':
+ formData.value.marginTop = formData.value.margin
+ formData.value.marginRight = formData.value.margin
+ formData.value.marginBottom = formData.value.margin
+ formData.value.marginLeft = formData.value.margin
+ break
+ case 'padding':
+ formData.value.paddingTop = formData.value.padding
+ formData.value.paddingRight = formData.value.padding
+ formData.value.paddingBottom = formData.value.padding
+ formData.value.paddingLeft = formData.value.padding
+ break
+ case 'borderRadius':
+ formData.value.borderTopLeftRadius = formData.value.borderRadius
+ formData.value.borderTopRightRadius = formData.value.borderRadius
+ formData.value.borderBottomRightRadius = formData.value.borderRadius
+ formData.value.borderBottomLeftRadius = formData.value.borderRadius
+ break
+ }
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.el-slider__runway) {
+ margin-right: 16px;
+}
+
+:deep(.el-input-number) {
+ width: 50px;
+}
+</style>
--
Gitblit v1.8.0