| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | <el-form label-width="80px" :model="formData"> |
| 3 | <el-card header="按钮配置" class="property-group" shadow="never"> | |
| 4 | <el-form-item label="展开方向" prop="direction"> | |
| 5 | <el-radio-group v-model="formData.direction"> | |
| 9259c2 | 6 | <el-radio value="vertical">垂直</el-radio> |
| H | 7 | <el-radio value="horizontal">水平</el-radio> |
| 820397 | 8 | </el-radio-group> |
| H | 9 | </el-form-item> |
| 10 | <el-form-item label="显示文字" prop="showText"> | |
| 11 | <el-switch v-model="formData.showText" /> | |
| 12 | </el-form-item> | |
| 13 | </el-card> | |
| 14 | <el-card header="按钮列表" class="property-group" shadow="never"> | |
| 15 | <Draggable v-model="formData.list" :empty-item="{ textColor: '#fff' }"> | |
| 16 | <template #default="{ element, index }"> | |
| 17 | <el-form-item label="图标" :prop="`list[${index}].imgUrl`"> | |
| 18 | <UploadImg v-model="element.imgUrl" height="56px" width="56px" /> | |
| 19 | </el-form-item> | |
| 20 | <el-form-item label="文字" :prop="`list[${index}].text`"> | |
| 21 | <InputWithColor v-model="element.text" v-model:color="element.textColor" /> | |
| 22 | </el-form-item> | |
| 23 | <el-form-item label="跳转链接" :prop="`list[${index}].url`"> | |
| 24 | <AppLinkInput v-model="element.url" /> | |
| 25 | </el-form-item> | |
| 26 | </template> | |
| 27 | </Draggable> | |
| 28 | </el-card> | |
| 29 | </el-form> | |
| 30 | </template> | |
| 31 | ||
| 32 | <script setup lang="ts"> | |
| 33 | import { FloatingActionButtonProperty } from './config' | |
| 34 | import { usePropertyForm } from '@/components/DiyEditor/util' | |
| 35 | ||
| 36 | // 悬浮按钮属性面板 | |
| 37 | defineOptions({ name: 'FloatingActionButtonProperty' }) | |
| 38 | ||
| 39 | const props = defineProps<{ modelValue: FloatingActionButtonProperty }>() | |
| 40 | const emit = defineEmits(['update:modelValue']) | |
| 41 | const { formData } = usePropertyForm(props.modelValue, emit) | |
| 42 | </script> | |
| 43 | ||
| 44 | <style scoped lang="scss"></style> | |
