| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | <ComponentContainerProperty v-model="formData.style"> |
| 3 | <el-form label-width="85px" :model="formData" :rules="rules"> | |
| 4 | <el-card header="风格" class="property-group" shadow="never"> | |
| 5 | <el-form-item label="背景图片" prop="bgImgUrl"> | |
| 6 | <UploadImg v-model="formData.bgImgUrl" width="100%" height="40px"> | |
| 7 | <template #tip>建议尺寸 750*80</template> | |
| 8 | </UploadImg> | |
| 9 | </el-form-item> | |
| 10 | <el-form-item label="标题位置" prop="textAlign"> | |
| 11 | <el-radio-group v-model="formData!.textAlign"> | |
| 12 | <el-tooltip content="居左" placement="top"> | |
| 9259c2 | 13 | <el-radio-button value="left"> |
| 820397 | 14 | <Icon icon="ant-design:align-left-outlined" /> |
| H | 15 | </el-radio-button> |
| 16 | </el-tooltip> | |
| 17 | <el-tooltip content="居中" placement="top"> | |
| 9259c2 | 18 | <el-radio-button value="center"> |
| 820397 | 19 | <Icon icon="ant-design:align-center-outlined" /> |
| H | 20 | </el-radio-button> |
| 21 | </el-tooltip> | |
| 22 | </el-radio-group> | |
| 23 | </el-form-item> | |
| 24 | </el-card> | |
| 25 | <el-card header="主标题" class="property-group" shadow="never"> | |
| 26 | <el-form-item label="文字" prop="title" label-width="40px"> | |
| 27 | <InputWithColor | |
| 28 | v-model="formData.title" | |
| 29 | v-model:color="formData.titleColor" | |
| 30 | show-word-limit | |
| 31 | maxlength="20" | |
| 32 | /> | |
| 33 | </el-form-item> | |
| 34 | <el-form-item label="大小" prop="titleSize" label-width="40px"> | |
| 35 | <el-slider | |
| 36 | v-model="formData.titleSize" | |
| 37 | :max="60" | |
| 38 | :min="10" | |
| 39 | show-input | |
| 40 | input-size="small" | |
| 41 | /> | |
| 42 | </el-form-item> | |
| 43 | <el-form-item label="粗细" prop="titleWeight" label-width="40px"> | |
| 44 | <el-slider | |
| 45 | v-model="formData.titleWeight" | |
| 46 | :min="100" | |
| 47 | :max="900" | |
| 48 | :step="100" | |
| 49 | show-input | |
| 50 | input-size="small" | |
| 51 | /> | |
| 52 | </el-form-item> | |
| 53 | </el-card> | |
| 54 | <el-card header="副标题" class="property-group" shadow="never"> | |
| 55 | <el-form-item label="文字" prop="description" label-width="40px"> | |
| 56 | <InputWithColor | |
| 57 | v-model="formData.description" | |
| 58 | v-model:color="formData.descriptionColor" | |
| 59 | show-word-limit | |
| 60 | maxlength="50" | |
| 61 | /> | |
| 62 | </el-form-item> | |
| 63 | <el-form-item label="大小" prop="descriptionSize" label-width="40px"> | |
| 64 | <el-slider | |
| 65 | v-model="formData.descriptionSize" | |
| 66 | :max="60" | |
| 67 | :min="10" | |
| 68 | show-input | |
| 69 | input-size="small" | |
| 70 | /> | |
| 71 | </el-form-item> | |
| 72 | <el-form-item label="粗细" prop="descriptionWeight" label-width="40px"> | |
| 73 | <el-slider | |
| 74 | v-model="formData.descriptionWeight" | |
| 75 | :min="100" | |
| 76 | :max="900" | |
| 77 | :step="100" | |
| 78 | show-input | |
| 79 | input-size="small" | |
| 80 | /> | |
| 81 | </el-form-item> | |
| 82 | </el-card> | |
| 83 | <el-card header="查看更多" class="property-group" shadow="never"> | |
| 84 | <el-form-item label="是否显示" prop="more.show"> | |
| 85 | <el-checkbox v-model="formData.more.show" /> | |
| 86 | </el-form-item> | |
| 87 | <!-- 更多按钮的 样式选择 --> | |
| 88 | <template v-if="formData.more.show"> | |
| 89 | <el-form-item label="样式" prop="more.type"> | |
| 90 | <el-radio-group v-model="formData.more.type"> | |
| 9259c2 | 91 | <el-radio value="text">文字</el-radio> |
| H | 92 | <el-radio value="icon">图标</el-radio> |
| 93 | <el-radio value="all">文字+图标</el-radio> | |
| 820397 | 94 | </el-radio-group> |
| H | 95 | </el-form-item> |
| 96 | <el-form-item label="更多文字" prop="more.text" v-show="formData.more.type !== 'icon'"> | |
| 97 | <el-input v-model="formData.more.text" /> | |
| 98 | </el-form-item> | |
| 99 | <el-form-item label="跳转链接" prop="more.url"> | |
| 100 | <AppLinkInput v-model="formData.more.url" /> | |
| 101 | </el-form-item> | |
| 102 | </template> | |
| 103 | </el-card> | |
| 104 | </el-form> | |
| 105 | </ComponentContainerProperty> | |
| 106 | </template> | |
| 107 | <script setup lang="ts"> | |
| 108 | import { TitleBarProperty } from './config' | |
| 109 | import { usePropertyForm } from '@/components/DiyEditor/util' | |
| 110 | // 导航栏属性面板 | |
| 111 | defineOptions({ name: 'TitleBarProperty' }) | |
| 112 | ||
| 113 | const props = defineProps<{ modelValue: TitleBarProperty }>() | |
| 114 | const emit = defineEmits(['update:modelValue']) | |
| 115 | const { formData } = usePropertyForm(props.modelValue, emit) | |
| 116 | ||
| 117 | // 表单校验 | |
| 118 | const rules = {} | |
| 119 | </script> | |
| 120 | ||
| 121 | <style scoped lang="scss"></style> | |
