diff --git a/src/meditor/index.js b/src/meditor/index.js index f3c1314..cdf2be4 100644 --- a/src/meditor/index.js +++ b/src/meditor/index.js @@ -226,6 +226,7 @@ class MEditor extends Component { top: 0; z-index: 99; width: 80px; + height: 0; padding: 5px 0; line-height: 25px; background: #fff; @@ -237,6 +238,7 @@ class MEditor extends Component { &.fadein { visibility: visible; top: 34px; + height: auto; opacity: 1; } } @@ -274,12 +276,12 @@ class MEditor extends Component { } .table-layer { + overflow: hidden; display: flex; flex-wrap: wrap; justify-content: space-between; left: 240px; width: 200px; - height: 200px; padding: 2px; background: #fff; @@ -292,6 +294,10 @@ class MEditor extends Component { background: rgba(77, 182, 172, 0.3); } } + + &.fadein { + height: 200px; + } } .link-layer { @@ -358,9 +364,9 @@ class MEditor extends Component { previewEnabled = false #hideLayers() { - this.$refs.header.classList.remove('fadein') - this.$refs.link.classList.remove('fadein') - this.$refs.table.classList.remove('fadein') + this.$refs.header?.classList.remove('fadein') + this.$refs.link?.classList.remove('fadein') + this.$refs.table?.classList.remove('fadein') } // 处理图片 @@ -772,7 +778,7 @@ class MEditor extends Component { #fixedPadding() { if (this.clientHeight > 64) { - let pb = ~~(this.clientHeight * 0.6) + let pb = ~~(this.clientHeight * 0.6) - (this.#toolbar.length ? 34 : 0) pb = pb < 64 ? 64 : pb this.$refs.editor.style.paddingBottom = pb + 'px' } else { @@ -794,6 +800,10 @@ class MEditor extends Component { } render() { + let hasTable = this.#toolbar.includes('table') + let hasHeader = this.#toolbar.includes('header') + let hasLink = this.#toolbar.includes('link') + return html`
-
- H1 - H2 - H3 - H4 - H5 - H6 -
- -
- ${range(81).map((_, n) => html``)} -
- - + ${hasHeader + ? html`
+ H1 + H2 + H3 + H4 + H5 + H6 +
` + : ''} + ${hasTable + ? html`
+ ${range(81).map((_, n) => html``)} +
` + : ''} + ${hasLink + ? html`` + : ''} ` }