| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | <ComponentContainerProperty v-model="formData.style"> |
| 3 | <!-- 表单 --> | |
| 4 | <el-form label-width="80px" :model="formData" class="m-t-8px"> | |
| 5 | <el-form-item label="每行数量" prop="column"> | |
| 6 | <el-radio-group v-model="formData.column"> | |
| 9259c2 | 7 | <el-radio :value="3">3个</el-radio> |
| H | 8 | <el-radio :value="4">4个</el-radio> |
| 820397 | 9 | </el-radio-group> |
| H | 10 | </el-form-item> |
| 11 | ||
| 12 | <el-card header="菜单设置" class="property-group" shadow="never"> | |
| 13 | <Draggable v-model="formData.list" :empty-item="EMPTY_MENU_GRID_ITEM_PROPERTY"> | |
| 14 | <template #default="{ element }"> | |
| 15 | <el-form-item label="图标" prop="iconUrl"> | |
| 16 | <UploadImg v-model="element.iconUrl" height="80px" width="80px"> | |
| 17 | <template #tip> 建议尺寸：44 * 44 </template> | |
| 18 | </UploadImg> | |
| 19 | </el-form-item> | |
| 20 | <el-form-item label="标题" prop="title"> | |
| 21 | <InputWithColor v-model="element.title" v-model:color="element.titleColor" /> | |
| 22 | </el-form-item> | |
| 23 | <el-form-item label="副标题" prop="subtitle"> | |
| 24 | <InputWithColor v-model="element.subtitle" v-model:color="element.subtitleColor" /> | |
| 25 | </el-form-item> | |
| 26 | <el-form-item label="链接" prop="url"> | |
| 27 | <AppLinkInput v-model="element.url" /> | |
| 28 | </el-form-item> | |
| 29 | <el-form-item label="显示角标" prop="badge.show"> | |
| 30 | <el-switch v-model="element.badge.show" /> | |
| 31 | </el-form-item> | |
| 32 | <template v-if="element.badge.show"> | |
| 33 | <el-form-item label="角标内容" prop="badge.text"> | |
| 34 | <InputWithColor | |
| 35 | v-model="element.badge.text" | |
| 36 | v-model:color="element.badge.textColor" | |
| 37 | /> | |
| 38 | </el-form-item> | |
| 39 | <el-form-item label="背景颜色" prop="badge.bgColor"> | |
| 40 | <ColorInput v-model="element.badge.bgColor" /> | |
| 41 | </el-form-item> | |
| 42 | </template> | |
| 43 | </template> | |
| 44 | </Draggable> | |
| 45 | </el-card> | |
| 46 | </el-form> | |
| 47 | </ComponentContainerProperty> | |
| 48 | </template> | |
| 49 | ||
| 50 | <script setup lang="ts"> | |
| 51 | import { usePropertyForm } from '@/components/DiyEditor/util' | |
| 52 | import { | |
| 53 | EMPTY_MENU_GRID_ITEM_PROPERTY, | |
| 54 | MenuGridProperty | |
| 55 | } from '@/components/DiyEditor/components/mobile/MenuGrid/config' | |
| 56 | ||
| 57 | /** 宫格导航属性面板 */ | |
| 58 | defineOptions({ name: 'MenuGridProperty' }) | |
| 59 | ||
| 60 | const props = defineProps<{ modelValue: MenuGridProperty }>() | |
| 61 | const emit = defineEmits(['update:modelValue']) | |
| 62 | const { formData } = usePropertyForm(props.modelValue, emit) | |
| 63 | </script> | |
| 64 | ||
| 65 | <style scoped lang="scss"></style> | |
