From 9c695b19fc896c497c20bda6089f824c1705836c Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Mon, 28 Feb 2022 21:12:42 +0800
Subject: [PATCH] 添加md预览弹窗
---
src/components/group/MyPreviewModal.vue | 50 +++++++++++++++++++++++++
src/components/swichLabel/main1-show.vue | 11 ++++-
src/components/group/tool.vue | 7 +++
3 files changed, 65 insertions(+), 3 deletions(-)
diff --git a/src/components/group/MyPreviewModal.vue b/src/components/group/MyPreviewModal.vue
new file mode 100644
index 0000000..0faa89e
--- /dev/null
+++ b/src/components/group/MyPreviewModal.vue
@@ -0,0 +1,50 @@
+<template>
+ <div class="myModal">
+ <a-modal v-model="visible" title="编辑预览" on-ok="handleOk" width="90%" :footer="null"
+ :bodyStyle="{'overflow':'overlay','width': '100%','height': '100%'}">
+ <div style="display: flex;">
+ <a-textarea style="height: 750px;min-width: 50%" v-model="text" :rows="4" />
+ <div class="markdown-body article-detail" style="min-width: 50%;">
+ <vue-markdown :source="text"></vue-markdown>
+ </div>
+ </div>
+ </a-modal>
+ </div>
+
+</template>
+
+<script>
+ import VueMarkdown from 'vue-markdown'
+
+ import md5 from 'js-md5';
+ export default {
+ components: {
+ VueMarkdown
+ },
+ data() {
+ return {
+ visible: false,
+ text: "### 长安古意 \r* 十里平湖霜满天 \r* 寸寸青丝愁华年 \r* 对月形单望相护 \r* 只羡鸳鸯不羡仙 ",
+ }
+ },
+ methods: {
+ getCalendarContainer(trigger) {
+ return this.$refs.myModal;
+ },
+ showModal() {
+ this.visible = true;
+ },
+ handleOk(e) {
+ console.log(111);
+ },
+
+ handleCancel(e) {
+ this.visible = false;
+ },
+
+ },
+ }
+</script>
+
+<style>
+</style>
diff --git a/src/components/group/tool.vue b/src/components/group/tool.vue
index 05d4ea7..d4f319f 100644
--- a/src/components/group/tool.vue
+++ b/src/components/group/tool.vue
@@ -8,6 +8,10 @@
<!-- <a-button @click="showDrawer2">
抽屉2
</a-button> -->
+ <a-button @click="showPreview">
+ 预览
+ <a-icon type="youtube" />
+ </a-button>
<a-button @click="showModal">
日志
<a-icon type="plus-circle" />
@@ -40,6 +44,9 @@
showModal() {
this.$emit('showModal')
},
+ showPreview() {
+ this.$emit('showPreview')
+ },
showScreen() {
this.$emit('showScreen')
if (this.screen) {
diff --git a/src/components/swichLabel/main1-show.vue b/src/components/swichLabel/main1-show.vue
index 7b20388..01faddb 100644
--- a/src/components/swichLabel/main1-show.vue
+++ b/src/components/swichLabel/main1-show.vue
@@ -1,6 +1,7 @@
<template>
<div>
<MyModal ref="myModal"></MyModal>
+ <MyPreviewModal ref="MyPreviewModal"></MyPreviewModal>
<div class="blog-drawer">
<a-drawer placement="left" :closable="false" :visible="visible1" :getContainer="'body'"
@@ -37,7 +38,8 @@
<a-col v-bind="colApiRight" ref="myDrawer">
<!-- <boxRight></boxRight> -->
- <tool @showModal="showModal" @showDrawer1="showDrawer1" @showScreen="showScreen"></tool>
+ <tool @showModal="showModal" @showPreview="showPreview" @showDrawer1="showDrawer1"
+ @showScreen="showScreen"></tool>
</a-col>
</a-row>
</div>
@@ -51,6 +53,7 @@
import articleListScorll from "../group/articleListScorll.vue"
import tool from "../group/tool.vue"
import MyModal from "../group/MyModal.vue"
+ import MyPreviewModal from "../group/MyPreviewModal.vue"
export default {
@@ -60,6 +63,7 @@
articleListScorll,
tool,
MyModal,
+ MyPreviewModal,
},
methods: {
showScreen() {
@@ -83,6 +87,9 @@
},
showModal() {
this.$refs.myModal.showModal();
+ },
+ showPreview() {
+ this.$refs.MyPreviewModal.showModal();
},
afterVisibleChange(val) {},
showDrawer1() {
@@ -162,8 +169,6 @@
</script>
<style lang="less">
-
-
@font-face {
font-family: 'HYTangMeiRen';
// font-display: swap;
--
Gitblit v1.9.1