| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | <el-form label-width="80px" :model="formData" :rules="rules"> |
| 3 | <el-form-item label="样式" prop="styleType"> | |
| 4 | <el-radio-group v-model="formData!.styleType"> | |
| 9259c2 | 5 | <el-radio value="normal">标准</el-radio> |
| 820397 | 6 | <el-tooltip |
| H | 7 | content="沉侵式头部仅支持微信小程序、APP，建议页面第一个组件为图片展示类组件" |
| 8 | placement="top" | |
| 9 | > | |
| 9259c2 | 10 | <el-radio value="inner">沉浸式</el-radio> |
| 820397 | 11 | </el-tooltip> |
| H | 12 | </el-radio-group> |
| 13 | </el-form-item> | |
| 14 | <el-form-item label="常驻显示" prop="alwaysShow" v-if="formData.styleType === 'inner'"> | |
| 15 | <el-radio-group v-model="formData!.alwaysShow"> | |
| 9259c2 | 16 | <el-radio :value="false">关闭</el-radio> |
| 820397 | 17 | <el-tooltip content="常驻显示关闭后,头部小组件将在页面滑动时淡入" placement="top"> |
| 9259c2 | 18 | <el-radio :value="true">开启</el-radio> |
| 820397 | 19 | </el-tooltip> |
| H | 20 | </el-radio-group> |
| 21 | </el-form-item> | |
| 22 | <el-form-item label="背景类型" prop="bgType"> | |
| 23 | <el-radio-group v-model="formData.bgType"> | |
| 9259c2 | 24 | <el-radio value="color">纯色</el-radio> |
| H | 25 | <el-radio value="img">图片</el-radio> |
| 820397 | 26 | </el-radio-group> |
| H | 27 | </el-form-item> |
| 28 | <el-form-item label="背景颜色" prop="bgColor" v-if="formData.bgType === 'color'"> | |
| 29 | <ColorInput v-model="formData.bgColor" /> | |
| 30 | </el-form-item> | |
| 31 | <el-form-item label="背景图片" prop="bgImg" v-else> | |
| 32 | <UploadImg v-model="formData.bgImg" :limit="1" width="56px" height="56px" /> | |
| 33 | </el-form-item> | |
| 34 | <el-card class="property-group" shadow="never"> | |
| 35 | <template #header> | |
| 36 | <div class="flex items-center justify-between"> | |
| 37 | <span>内容（小程序）</span> | |
| 38 | <el-form-item prop="_local.previewMp" class="m-b-0!"> | |
| 39 | <el-checkbox | |
| 40 | v-model="formData._local.previewMp" | |
| 41 | @change="formData._local.previewOther = !formData._local.previewMp" | |
| 42 | >预览</el-checkbox | |
| 43 | > | |
| 44 | </el-form-item> | |
| 45 | </div> | |
| 46 | </template> | |
| 47 | <NavigationBarCellProperty v-model="formData.mpCells" is-mp /> | |
| 48 | </el-card> | |
| 49 | <el-card class="property-group" shadow="never"> | |
| 50 | <template #header> | |
| 51 | <div class="flex items-center justify-between"> | |
| 52 | <span>内容（非小程序）</span> | |
| 53 | <el-form-item prop="_local.previewOther" class="m-b-0!"> | |
| 54 | <el-checkbox | |
| 55 | v-model="formData._local.previewOther" | |
| 56 | @change="formData._local.previewMp = !formData._local.previewOther" | |
| 57 | >预览</el-checkbox | |
| 58 | > | |
| 59 | </el-form-item> | |
| 60 | </div> | |
| 61 | </template> | |
| 62 | <NavigationBarCellProperty v-model="formData.otherCells" :is-mp="false" /> | |
| 63 | </el-card> | |
| 64 | </el-form> | |
| 65 | </template> | |
| 66 | ||
| 67 | <script setup lang="ts"> | |
| 68 | import { NavigationBarProperty } from './config' | |
| 69 | import { usePropertyForm } from '@/components/DiyEditor/util' | |
| 70 | import NavigationBarCellProperty from '@/components/DiyEditor/components/mobile/NavigationBar/components/CellProperty.vue' | |
| 71 | // 导航栏属性面板 | |
| 72 | defineOptions({ name: 'NavigationBarProperty' }) | |
| 73 | // 表单校验 | |
| 74 | const rules = { | |
| 75 | name: [{ required: true, message: '请输入页面名称', trigger: 'blur' }] | |
| 76 | } | |
| 77 | ||
| 78 | const props = defineProps<{ modelValue: NavigationBarProperty }>() | |
| 79 | const emit = defineEmits(['update:modelValue']) | |
| 80 | const { formData } = usePropertyForm(props.modelValue, emit) | |
| 81 | if (!formData.value._local) { | |
| 82 | formData.value._local = { previewMp: true, previewOther: false } | |
| 83 | } | |
| 84 | </script> | |
| 85 | ||
| 86 | <style scoped lang="scss"></style> | |
