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