Commit c8bc04bee6a032689fc669fcce7092ff34f4bd3c
1 parent
edea5760
fix: #124
Showing
3 changed files
with
41 additions
and
48 deletions
front-end/h5/src/components/core/editor/index.js
| @@ -302,26 +302,26 @@ export default { | @@ -302,26 +302,26 @@ export default { | ||
| 302 | <a-layout-sider width="240" theme='light' style={{ background: '#fff', padding: '12px' }}> | 302 | <a-layout-sider width="240" theme='light' style={{ background: '#fff', padding: '12px' }}> |
| 303 | { this._renderMenuContent() } | 303 | { this._renderMenuContent() } |
| 304 | </a-layout-sider> | 304 | </a-layout-sider> |
| 305 | - <a-layout style="padding: 0 0 24px"> | ||
| 306 | - <a-layout-content style={{ padding: '24px', margin: 0, minHeight: '280px' }}> | ||
| 307 | - <div style="text-align: center;"> | ||
| 308 | - <a-radio-group | ||
| 309 | - size="small" | ||
| 310 | - value={this.isPreviewMode} | ||
| 311 | - onInput={isPreviewMode => { | ||
| 312 | - this.isPreviewMode = isPreviewMode | ||
| 313 | - if (isPreviewMode) { | ||
| 314 | - // 当切换到预览模式的时候，清空当前编辑元素 | ||
| 315 | - this.setEditingElement() // 相当于 setEditingElement(null) | ||
| 316 | - } | ||
| 317 | - }} | ||
| 318 | - > | ||
| 319 | - {/* 编辑模式、预览模式 */} | ||
| 320 | - <a-radio-button label={false} value={false}>{this.$t('editor.centerPanel.mode.edit')}</a-radio-button> | ||
| 321 | - <a-radio-button label={true} value={true}>{this.$t('editor.centerPanel.mode.preview')}</a-radio-button> | ||
| 322 | - </a-radio-group> | ||
| 323 | - </div> | ||
| 324 | - <div class='canvas-wrapper' style={{ transform: `scale(${this.scaleRate})` }}> | 305 | + <a-layout> |
| 306 | + <div class="mode-toggle-wrapper"> | ||
| 307 | + <a-radio-group | ||
| 308 | + size="small" | ||
| 309 | + value={this.isPreviewMode} | ||
| 310 | + onInput={isPreviewMode => { | ||
| 311 | + this.isPreviewMode = isPreviewMode | ||
| 312 | + if (isPreviewMode) { | ||
| 313 | + // 当切换到预览模式的时候，清空当前编辑元素 | ||
| 314 | + this.setEditingElement() // 相当于 setEditingElement(null) | ||
| 315 | + } | ||
| 316 | + }} | ||
| 317 | + > | ||
| 318 | + {/* 编辑模式、预览模式 */} | ||
| 319 | + <a-radio-button label={false} value={false}>{this.$t('editor.centerPanel.mode.edit')}</a-radio-button> | ||
| 320 | + <a-radio-button label={true} value={true}>{this.$t('editor.centerPanel.mode.preview')}</a-radio-button> | ||
| 321 | + </a-radio-group> | ||
| 322 | + </div> | ||
| 323 | + <a-layout-content style={{ transform: `scale(${this.scaleRate})`, 'transform-origin': 'center top' }}> | ||
| 324 | + <div class='canvas-wrapper'> | ||
| 325 | {/* { this.isPreviewMode ? this.renderPreview(h, this.elements) : this.renderCanvas(h, this.elements) } */} | 325 | {/* { this.isPreviewMode ? this.renderPreview(h, this.elements) : this.renderCanvas(h, this.elements) } */} |
| 326 | { this.isPreviewMode | 326 | { this.isPreviewMode |
| 327 | ? <RenderPreviewCanvas elements={this.elements}/> | 327 | ? <RenderPreviewCanvas elements={this.elements}/> |
front-end/h5/src/components/core/styles/canvas-wrapper.scss
| @@ -2,8 +2,19 @@ | @@ -2,8 +2,19 @@ | ||
| 2 | * 编辑器中间的画布 | 2 | * 编辑器中间的画布 |
| 3 | */ | 3 | */ |
| 4 | 4 | ||
| 5 | +$cellSize: 35.6px; | ||
| 6 | +$designerWidth: 320px; | ||
| 7 | +$designerHeight: 568px; | ||
| 8 | +$designerWidthHalf: $designerWidth / 2; | ||
| 9 | + | ||
| 5 | .canvas-wrapper { | 10 | .canvas-wrapper { |
| 6 | - border: 1px dashed #e7e7e7; | 11 | + position: relative; |
| 12 | + top: 60px; | ||
| 13 | + width: $designerWidth; | ||
| 14 | + height: $designerHeight; | ||
| 15 | + margin: 0 auto; | ||
| 16 | + background: #fff; | ||
| 17 | + border: 1px solid #e7e7e7; | ||
| 7 | 18 | ||
| 8 | .edit-mode { | 19 | .edit-mode { |
| 9 | // box-shadow: 0 0 0 1px #d9d9d9; | 20 | // box-shadow: 0 0 0 1px #d9d9d9; |
| @@ -13,3 +24,12 @@ | @@ -13,3 +24,12 @@ | ||
| 13 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZAgMAAAC5h23wAAAAAXNSR0IB2cksfwAAAAlQTFRF9fX18PDwAAAABQ8/pgAAAAN0Uk5T/yIA41y2EwAAABhJREFUeJxjYIAC0VAQcGCQWgUCDUONBgDH8Fwzu33LswAAAABJRU5ErkJggg=='); | 24 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZAgMAAAC5h23wAAAAAXNSR0IB2cksfwAAAAlQTFRF9fX18PDwAAAABQ8/pgAAAAN0Uk5T/yIA41y2EwAAABhJREFUeJxjYIAC0VAQcGCQWgUCDUONBgDH8Fwzu33LswAAAABJRU5ErkJggg=='); |
| 14 | } | 25 | } |
| 15 | } | 26 | } |
| 27 | + | ||
| 28 | +// 切换编辑、预览模式 的按钮组 | ||
| 29 | +.mode-toggle-wrapper { | ||
| 30 | + position: fixed; | ||
| 31 | + z-index: 999; | ||
| 32 | + top: 80px; | ||
| 33 | + left: calc(50% - 120px); | ||
| 34 | + text-align: center; | ||
| 35 | +} |
front-end/h5/src/views/Editor.vue
| @@ -8,30 +8,3 @@ export default { | @@ -8,30 +8,3 @@ export default { | ||
| 8 | mixins: [loadPluginMixin] | 8 | mixins: [loadPluginMixin] |
| 9 | } | 9 | } |
| 10 | </script> | 10 | </script> |
| 11 | -<style lang="scss"> | ||
| 12 | -$cellSize: 35.6px; | ||
| 13 | -$designerWidth: 320px; | ||
| 14 | -$designerHeight: 568px; | ||
| 15 | -$designerWidthHalf: $designerWidth / 2; | ||
| 16 | - | ||
| 17 | -.canvas-wrapper { | ||
| 18 | - position: relative; | ||
| 19 | - top: 5%; | ||
| 20 | - width: $designerWidth; | ||
| 21 | - height: $designerHeight; | ||
| 22 | - border: 1px #ebeaea solid; | ||
| 23 | - margin: 0 auto; | ||
| 24 | - background: #fff; | ||
| 25 | -} | ||
| 26 | - | ||
| 27 | -.lb-tabs { | ||
| 28 | - box-shadow: none; | ||
| 29 | - padding: 4px 8px 4px 0; | ||
| 30 | - border: 1px solid #EBEEF5; | ||
| 31 | - height: 100%; | ||
| 32 | -} | ||
| 33 | - | ||
| 34 | -.full-height { | ||
| 35 | - height: 100% !important; | ||
| 36 | -} | ||
| 37 | -</style> |