| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | <el-tabs stretch> |
| 3 | <!-- 每个组件的自定义内容 --> | |
| 4 | <el-tab-pane label="内容" v-if="$slots.default"> | |
| 5 | <slot></slot> | |
| 6 | </el-tab-pane> | |
| 7 | ||
| 8 | <!-- 每个组件的通用内容 --> | |
| 9 | <el-tab-pane label="样式" lazy> | |
| 10 | <el-card header="组件样式" class="property-group"> | |
| 11 | <el-form :model="formData" label-width="80px"> | |
| 12 | <el-form-item label="组件背景" prop="bgType"> | |
| 13 | <el-radio-group v-model="formData.bgType"> | |
| 9259c2 | 14 | <el-radio value="color">纯色</el-radio> |
| H | 15 | <el-radio value="img">图片</el-radio> |
| 820397 | 16 | </el-radio-group> |
| H | 17 | </el-form-item> |
| 18 | <el-form-item label="选择颜色" prop="bgColor" v-if="formData.bgType === 'color'"> | |
| 19 | <ColorInput v-model="formData.bgColor" /> | |
| 20 | </el-form-item> | |
| 21 | <el-form-item label="上传图片" prop="bgImg" v-else> | |
| 22 | <UploadImg v-model="formData.bgImg" :limit="1"> | |
| 23 | <template #tip>建议宽度 750px</template> | |
| 24 | </UploadImg> | |
| 25 | </el-form-item> | |
| 26 | <el-tree :data="treeData" :expand-on-click-node="false" default-expand-all> | |
| 27 | <template #default="{ node, data }"> | |
| 28 | <el-form-item | |
| 29 | :label="data.label" | |
| 30 | :prop="data.prop" | |
| 31 | :label-width="node.level === 1 ? '80px' : '62px'" | |
| 32 | class="w-full m-b-0!" | |
| 33 | > | |
| 34 | <el-slider | |
| 35 | v-model="formData[data.prop]" | |
| 36 | :max="100" | |
| 37 | :min="0" | |
| 38 | show-input | |
| 39 | input-size="small" | |
| 40 | :show-input-controls="false" | |
| 41 | @input="handleSliderChange(data.prop)" | |
| 42 | /> | |
| 43 | </el-form-item> | |
| 44 | </template> | |
| 45 | </el-tree> | |
| 46 | <slot name="style" :style="formData"></slot> | |
| 47 | </el-form> | |
| 48 | </el-card> | |
| 49 | </el-tab-pane> | |
| 50 | </el-tabs> | |
| 51 | </template> | |
| 52 | ||
| 53 | <script setup lang="ts"> | |
| 54 | import { ComponentStyle, usePropertyForm } from '@/components/DiyEditor/util' | |
| 55 | ||
| 56 | /** | |
| 57 | * 组件容器属性：目前右边部分 | |
| 58 | * 用于包裹组件，为组件提供 背景、外边距、内边距、边框等样式 | |
| 59 | */ | |
| 60 | defineOptions({ name: 'ComponentContainer' }) | |
| 61 | ||
| 62 | const props = defineProps<{ modelValue: ComponentStyle }>() | |
| 63 | const emit = defineEmits(['update:modelValue']) | |
| 64 | const { formData } = usePropertyForm(props.modelValue, emit) | |
| 65 | ||
| 66 | const treeData = [ | |
| 67 | { | |
| 68 | label: '外部边距', | |
| 69 | prop: 'margin', | |
| 70 | children: [ | |
| 71 | { | |
| 72 | label: '上', | |
| 73 | prop: 'marginTop' | |
| 74 | }, | |
| 75 | { | |
| 76 | label: '右', | |
| 77 | prop: 'marginRight' | |
| 78 | }, | |
| 79 | { | |
| 80 | label: '下', | |
| 81 | prop: 'marginBottom' | |
| 82 | }, | |
| 83 | { | |
| 84 | label: '左', | |
| 85 | prop: 'marginLeft' | |
| 86 | } | |
| 87 | ] | |
| 88 | }, | |
| 89 | { | |
| 90 | label: '内部边距', | |
| 91 | prop: 'padding', | |
| 92 | children: [ | |
| 93 | { | |
| 94 | label: '上', | |
| 95 | prop: 'paddingTop' | |
| 96 | }, | |
| 97 | { | |
| 98 | label: '右', | |
| 99 | prop: 'paddingRight' | |
| 100 | }, | |
| 101 | { | |
| 102 | label: '下', | |
| 103 | prop: 'paddingBottom' | |
| 104 | }, | |
| 105 | { | |
| 106 | label: '左', | |
| 107 | prop: 'paddingLeft' | |
| 108 | } | |
| 109 | ] | |
| 110 | }, | |
| 111 | { | |
| 112 | label: '边框圆角', | |
| 113 | prop: 'borderRadius', | |
| 114 | children: [ | |
| 115 | { | |
| 116 | label: '上左', | |
| 117 | prop: 'borderTopLeftRadius' | |
| 118 | }, | |
| 119 | { | |
| 120 | label: '上右', | |
| 121 | prop: 'borderTopRightRadius' | |
| 122 | }, | |
| 123 | { | |
| 124 | label: '下右', | |
| 125 | prop: 'borderBottomRightRadius' | |
| 126 | }, | |
| 127 | { | |
| 128 | label: '下左', | |
| 129 | prop: 'borderBottomLeftRadius' | |
| 130 | } | |
| 131 | ] | |
| 132 | } | |
| 133 | ] | |
| 134 | ||
| 135 | const handleSliderChange = (prop: string) => { | |
| 136 | switch (prop) { | |
| 137 | case 'margin': | |
| 138 | formData.value.marginTop = formData.value.margin | |
| 139 | formData.value.marginRight = formData.value.margin | |
| 140 | formData.value.marginBottom = formData.value.margin | |
| 141 | formData.value.marginLeft = formData.value.margin | |
| 142 | break | |
| 143 | case 'padding': | |
| 144 | formData.value.paddingTop = formData.value.padding | |
| 145 | formData.value.paddingRight = formData.value.padding | |
| 146 | formData.value.paddingBottom = formData.value.padding | |
| 147 | formData.value.paddingLeft = formData.value.padding | |
| 148 | break | |
| 149 | case 'borderRadius': | |
| 150 | formData.value.borderTopLeftRadius = formData.value.borderRadius | |
| 151 | formData.value.borderTopRightRadius = formData.value.borderRadius | |
| 152 | formData.value.borderBottomRightRadius = formData.value.borderRadius | |
| 153 | formData.value.borderBottomLeftRadius = formData.value.borderRadius | |
| 154 | break | |
| 155 | } | |
| 156 | } | |
| 157 | </script> | |
| 158 | ||
| 159 | <style scoped lang="scss"> | |
| 160 | :deep(.el-slider__runway) { | |
| 161 | margin-right: 16px; | |
| 162 | } | |
| 163 | ||
| 164 | :deep(.el-input-number) { | |
| 165 | width: 50px; | |
| 166 | } | |
| 167 | </style> | |
