| 提交 | 用户 | 时间 | ||
| 314507 | 1 | <template> |
| H | 2 | <div class="h-40px flex items-center justify-center"> |
| 3 | <MagicCubeEditor | |
| 4 | v-model="cellList" | |
| 5 | class="m-b-16px" | |
| 6 | :rows="1" | |
| 7 | :cols="cellCount" | |
| 8 | :cube-size="38" | |
| 9 | @hot-area-selected="handleHotAreaSelected" | |
| 10 | /> | |
| 11 | <img src="@/assets/imgs/diy/app-nav-bar-mp.png" alt="" class="h-30px w-76px" v-if="isMp" /> | |
| 12 | </div> | |
| 13 | <template v-for="(cell, cellIndex) in cellList" :key="cellIndex"> | |
| 14 | <template v-if="selectedHotAreaIndex === cellIndex"> | |
| 15 | <el-form-item label="类型" :prop="`cell[${cellIndex}].type`"> | |
| 16 | <el-radio-group v-model="cell.type"> | |
| 17 | <el-radio label="text">文字</el-radio> | |
| 18 | <el-radio label="image">图片</el-radio> | |
| 19 | <el-radio label="search">搜索框</el-radio> | |
| 20 | </el-radio-group> | |
| 21 | </el-form-item> | |
| 22 | <!-- 1. 文字 --> | |
| 23 | <template v-if="cell.type === 'text'"> | |
| 24 | <el-form-item label="内容" :prop="`cell[${cellIndex}].text`"> | |
| 25 | <el-input v-model="cell!.text" maxlength="10" show-word-limit /> | |
| 26 | </el-form-item> | |
| 27 | <el-form-item label="颜色" :prop="`cell[${cellIndex}].text`"> | |
| 28 | <ColorInput v-model="cell!.textColor" /> | |
| 29 | </el-form-item> | |
| 30 | </template> | |
| 31 | <!-- 2. 图片 --> | |
| 32 | <template v-else-if="cell.type === 'image'"> | |
| 33 | <el-form-item label="图片" :prop="`cell[${cellIndex}].imgUrl`"> | |
| 34 | <UploadImg v-model="cell.imgUrl" :limit="1" height="56px" width="56px"> | |
| 35 | <template #tip>建议尺寸 56*56</template> | |
| 36 | </UploadImg> | |
| 37 | </el-form-item> | |
| 38 | <el-form-item label="链接" :prop="`cell[${cellIndex}].url`"> | |
| 39 | <AppLinkInput v-model="cell.url" /> | |
| 40 | </el-form-item> | |
| 41 | </template> | |
| 42 | <!-- 3. 搜索框 --> | |
| 43 | <template v-else> | |
| 44 | <el-form-item label="提示文字" :prop="`cell[${cellIndex}].placeholder`"> | |
| 45 | <el-input v-model="cell.placeholder" maxlength="10" show-word-limit /> | |
| 46 | </el-form-item> | |
| 47 | <el-form-item label="圆角" :prop="`cell[${cellIndex}].borderRadius`"> | |
| 48 | <el-slider | |
| 49 | v-model="cell.borderRadius" | |
| 50 | :max="100" | |
| 51 | :min="0" | |
| 52 | show-input | |
| 53 | input-size="small" | |
| 54 | :show-input-controls="false" | |
| 55 | /> | |
| 56 | </el-form-item> | |
| 57 | </template> | |
| 58 | </template> | |
| 59 | </template> | |
| 60 | </template> | |
| 61 | ||
| 62 | <script setup lang="ts"> | |
| 63 | import { NavigationBarCellProperty } from '../config' | |
| 64 | import { usePropertyForm } from '@/components/DiyEditor/util' | |
| 65 | // 导航栏属性面板 | |
| 66 | defineOptions({ name: 'NavigationBarCellProperty' }) | |
| 67 | ||
| 68 | const props = defineProps<{ | |
| 69 | modelValue: NavigationBarCellProperty[] | |
| 70 | isMp: boolean | |
| 71 | }>() | |
| 72 | const emit = defineEmits(['update:modelValue']) | |
| 73 | const { formData: cellList } = usePropertyForm(props.modelValue, emit) | |
| 74 | if (!cellList.value) cellList.value = [] | |
| 75 | ||
| 76 | // 单元格数量：小程序6个（右侧胶囊按钮占了2个），其它平台8个 | |
| 77 | const cellCount = computed(() => (props.isMp ? 6 : 8)) | |
| 78 | ||
| 79 | // 选中的热区 | |
| 80 | const selectedHotAreaIndex = ref(0) | |
| 81 | const handleHotAreaSelected = (cellValue: NavigationBarCellProperty, index: number) => { | |
| 82 | selectedHotAreaIndex.value = index | |
| 83 | if (!cellValue.type) { | |
| 84 | cellValue.type = 'text' | |
| 85 | cellValue.textColor = '#111111' | |
| 86 | } | |
| 87 | } | |
| 88 | </script> | |
| 89 | ||
| 90 | <style scoped lang="scss"></style> | |
