| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | <ComponentContainerProperty v-model="formData.style"> |
| 3 | <el-form label-width="80px" :model="formData" :rules="rules"> | |
| 4 | <el-form-item label="公告图标" prop="iconUrl"> | |
| 5 | <UploadImg v-model="formData.iconUrl" height="48px"> | |
| 6 | <template #tip>建议尺寸：24 * 24</template> | |
| 7 | </UploadImg> | |
| 8 | </el-form-item> | |
| 9 | <el-form-item label="背景颜色" prop="backgroundColor"> | |
| 10 | <ColorInput v-model="formData.backgroundColor" /> | |
| 11 | </el-form-item> | |
| 12 | <el-form-item label="文字颜色" prop="文字颜色"> | |
| 13 | <ColorInput v-model="formData.textColor" /> | |
| 14 | </el-form-item> | |
| 15 | <el-card header="公告内容" class="property-group" shadow="never"> | |
| 16 | <Draggable v-model="formData.contents"> | |
| 17 | <template #default="{ element }"> | |
| 18 | <el-form-item label="公告" prop="text" label-width="40px"> | |
| 19 | <el-input v-model="element.text" placeholder="请输入公告" /> | |
| 20 | </el-form-item> | |
| 21 | <el-form-item label="链接" prop="url" label-width="40px"> | |
| 22 | <AppLinkInput v-model="element.url" /> | |
| 23 | </el-form-item> | |
| 24 | </template> | |
| 25 | </Draggable> | |
| 26 | </el-card> | |
| 27 | </el-form> | |
| 28 | </ComponentContainerProperty> | |
| 29 | </template> | |
| 30 | ||
| 31 | <script setup lang="ts"> | |
| 32 | import { NoticeBarProperty } from './config' | |
| 33 | import { usePropertyForm } from '@/components/DiyEditor/util' | |
| 34 | // 通知栏属性面板 | |
| 35 | defineOptions({ name: 'NoticeBarProperty' }) | |
| 36 | // 表单校验 | |
| 37 | const rules = { | |
| 38 | content: [{ required: true, message: '请输入公告', trigger: 'blur' }] | |
| 39 | } | |
| 40 | ||
| 41 | const props = defineProps<{ modelValue: NoticeBarProperty }>() | |
| 42 | const emit = defineEmits(['update:modelValue']) | |
| 43 | const { formData } = usePropertyForm(props.modelValue, emit) | |
| 44 | </script> | |
| 45 | ||
| 46 | <style scoped lang="scss"></style> | |
