| 提交 | 用户 | 时间 | ||
| 314507 | 1 | <template> |
| H | 2 | <el-aside class="editor-left" width="261px"> |
| 3 | <el-scrollbar> | |
| 4 | <el-collapse v-model="extendGroups"> | |
| 5 | <el-collapse-item | |
| 6 | v-for="group in groups" | |
| 7 | :key="group.name" | |
| 8 | :name="group.name" | |
| 9 | :title="group.name" | |
| 10 | > | |
| 11 | <draggable | |
| 12 | class="component-container" | |
| 13 | ghost-class="draggable-ghost" | |
| 14 | item-key="index" | |
| 15 | :list="group.components" | |
| 16 | :sort="false" | |
| 17 | :group="{ name: 'component', pull: 'clone', put: false }" | |
| 18 | :clone="handleCloneComponent" | |
| 19 | :animation="200" | |
| 20 | :force-fallback="true" | |
| 21 | > | |
| 22 | <template #item="{ element }"> | |
| 23 | <div> | |
| 24 | <div class="drag-placement">组件放置区域</div> | |
| 25 | <div class="component"> | |
| 26 | <Icon :icon="element.icon" :size="32" /> | |
| 27 | <span class="mt-4px text-12px">{{ element.name }}</span> | |
| 28 | </div> | |
| 29 | </div> | |
| 30 | </template> | |
| 31 | </draggable> | |
| 32 | </el-collapse-item> | |
| 33 | </el-collapse> | |
| 34 | </el-scrollbar> | |
| 35 | </el-aside> | |
| 36 | </template> | |
| 37 | ||
| 38 | <script setup lang="ts"> | |
| 39 | import draggable from 'vuedraggable' | |
| 40 | import { componentConfigs } from '../components/mobile/index' | |
| 41 | import { cloneDeep } from 'lodash-es' | |
| 42 | import { DiyComponent, DiyComponentLibrary } from '@/components/DiyEditor/util' | |
| 43 | ||
| 44 | /** 组件库：目前左侧的【基础组件】、【图文组件】部分 */ | |
| 45 | defineOptions({ name: 'ComponentLibrary' }) | |
| 46 | ||
| 47 | // 组件列表 | |
| 48 | const props = defineProps<{ | |
| 49 | list: DiyComponentLibrary[] | |
| 50 | }>() | |
| 51 | // 组件分组 | |
| 52 | const groups = reactive<any[]>([]) | |
| 53 | // 展开的折叠面板 | |
| 54 | const extendGroups = reactive<string[]>([]) | |
| 55 | ||
| 56 | // 监听 list 属性，按照 DiyComponentLibrary 的 name 分组 | |
| 57 | watch( | |
| 58 | () => props.list, | |
| 59 | () => { | |
| 60 | // 清除旧数据 | |
| 61 | extendGroups.length = 0 | |
| 62 | groups.length = 0 | |
| 63 | // 重新生成数据 | |
| 64 | props.list.forEach((group) => { | |
| 65 | // 是否展开分组 | |
| 66 | if (group.extended) { | |
| 67 | extendGroups.push(group.name) | |
| 68 | } | |
| 69 | // 查找组件 | |
| 70 | const components = group.components | |
| 71 | .map((name) => componentConfigs[name] as DiyComponent<any>) | |
| 72 | .filter((component) => component) | |
| 73 | if (components.length > 0) { | |
| 74 | groups.push({ | |
| 75 | name: group.name, | |
| 76 | components | |
| 77 | }) | |
| 78 | } | |
| 79 | }) | |
| 80 | }, | |
| 81 | { | |
| 82 | immediate: true | |
| 83 | } | |
| 84 | ) | |
| 85 | ||
| 86 | // 克隆组件 | |
| 87 | const handleCloneComponent = (component: DiyComponent<any>) => { | |
| 88 | const instance = cloneDeep(component) | |
| 89 | instance.uid = new Date().getTime() | |
| 90 | return instance | |
| 91 | } | |
| 92 | </script> | |
| 93 | ||
| 94 | <style scoped lang="scss"> | |
| 95 | .editor-left { | |
| 96 | z-index: 1; | |
| 97 | flex-shrink: 0; | |
| 98 | user-select: none; | |
| 99 | box-shadow: 8px 0 8px -8px rgb(0 0 0 / 12%); | |
| 100 | ||
| 101 | :deep(.el-collapse) { | |
| 102 | border-top: none; | |
| 103 | } | |
| 104 | ||
| 105 | :deep(.el-collapse-item__wrap) { | |
| 106 | border-bottom: none; | |
| 107 | } | |
| 108 | ||
| 109 | :deep(.el-collapse-item__content) { | |
| 110 | padding-bottom: 0; | |
| 111 | } | |
| 112 | ||
| 113 | :deep(.el-collapse-item__header) { | |
| 114 | height: 32px; | |
| 115 | padding: 0 24px; | |
| 116 | line-height: 32px; | |
| 117 | background-color: var(--el-bg-color-page); | |
| 118 | border-bottom: none; | |
| 119 | } | |
| 120 | ||
| 121 | .component-container { | |
| 122 | display: flex; | |
| 123 | flex-wrap: wrap; | |
| 124 | align-items: center; | |
| 125 | } | |
| 126 | ||
| 127 | .component { | |
| 128 | display: flex; | |
| 129 | width: 86px; | |
| 130 | height: 86px; | |
| 131 | cursor: move; | |
| 132 | border-right: 1px solid var(--el-border-color-lighter); | |
| 133 | border-bottom: 1px solid var(--el-border-color-lighter); | |
| 134 | flex-direction: column; | |
| 135 | align-items: center; | |
| 136 | justify-content: center; | |
| 137 | ||
| 138 | .el-icon { | |
| 139 | margin-bottom: 4px; | |
| 140 | color: gray; | |
| 141 | } | |
| 142 | } | |
| 143 | ||
| 144 | .component.active, | |
| 145 | .component:hover { | |
| 146 | color: var(--el-color-white); | |
| 147 | background: var(--el-color-primary); | |
| 148 | ||
| 149 | .el-icon { | |
| 150 | color: var(--el-color-white); | |
| 151 | } | |
| 152 | } | |
| 153 | ||
| 154 | .component:nth-of-type(3n) { | |
| 155 | border-right: none; | |
| 156 | } | |
| 157 | } | |
| 158 | ||
| 159 | /* 拖拽占位提示，默认不显示 */ | |
| 160 | .drag-placement { | |
| 161 | display: none; | |
| 162 | color: #fff; | |
| 163 | } | |
| 164 | ||
| 165 | .drag-area { | |
| 166 | /* 拖拽到手机区域时的样式 */ | |
| 167 | .draggable-ghost { | |
| 168 | display: flex; | |
| 169 | width: 100%; | |
| 170 | height: 40px; | |
| 171 | ||
| 172 | /* 条纹背景 */ | |
| 173 | background: linear-gradient( | |
| 174 | 45deg, | |
| 175 | #91a8d5 0, | |
| 176 | #91a8d5 10%, | |
| 177 | #94b4eb 10%, | |
| 178 | #94b4eb 50%, | |
| 179 | #91a8d5 50%, | |
| 180 | #91a8d5 60%, | |
| 181 | #94b4eb 60%, | |
| 182 | #94b4eb | |
| 183 | ); | |
| 184 | background-size: 1rem 1rem; | |
| 185 | transition: all 0.5s; | |
| 186 | justify-content: center; | |
| 187 | align-items: center; | |
| 188 | ||
| 189 | span { | |
| 190 | display: inline-block; | |
| 191 | width: 140px; | |
| 192 | height: 25px; | |
| 193 | font-size: 12px; | |
| 194 | line-height: 25px; | |
| 195 | color: #fff; | |
| 196 | text-align: center; | |
| 197 | background: #5487df; | |
| 198 | } | |
| 199 | ||
| 200 | /* 拖拽时隐藏组件 */ | |
| 201 | .component { | |
| 202 | display: none; | |
| 203 | } | |
| 204 | ||
| 205 | /* 拖拽时显示占位提示 */ | |
| 206 | .drag-placement { | |
| 207 | display: block; | |
| 208 | } | |
| 209 | } | |
| 210 | } | |
| 211 | </style> | |
