diff --git a/src/views/editor.vue b/src/views/editor.vue index 4e14f70..85f6543 100644 --- a/src/views/editor.vue +++ b/src/views/editor.vue @@ -41,10 +41,14 @@
- - + +
+ 预览 +
+
+
@@ -70,6 +74,7 @@ export default { name: 'editor', data() { return { + imgPreviewSrc: null } }, props: { @@ -123,6 +128,10 @@ export default { width: false, height: false }) + }, + imageClickHandler: { + type: Function, + default: null } }, components: { @@ -132,6 +141,7 @@ export default { }, mounted() { this.showToolbar && keyboardListener(this.getTextarea(), this) + this.imagePreviewListener() this.localValue = this.value }, async created() { @@ -251,6 +261,20 @@ export default { }) } return md.render(result) + }, + imagePreviewListener() { + // renderHtml img click + this.$refs.renderHtml.addEventListener('click', e => { + const event = e || window.event + const ele = event.srcElement || event.target + if (ele.tagName === 'IMG') { + if (this.imageClickHandler) { + this.imageClickHandler(ele) + } else { + this.imgPreviewSrc = ele.src + } + } + }) } }, watch: { @@ -296,6 +320,19 @@ export default { .markdown-body { display: flex; min-height: 400px; + .img-preview { + display: flex; + align-items: center; + justify-content: center; + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.7); + z-index: 1600; + transition: all 0.1s linear 0s; + } .markdown-input { padding: 10px 20px;