From 2795bef55b825acd0065d991e835c5f616ec4724 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Fri, 05 Aug 2022 18:25:35 +0800
Subject: [PATCH] mini消息盒子
---
src/components/group/MyPreviewModal.vue | 41 ++++++++++++++++++++++++++++++-----------
1 files changed, 30 insertions(+), 11 deletions(-)
diff --git a/src/components/group/MyPreviewModal.vue b/src/components/group/MyPreviewModal.vue
index 0faa89e..7caf14a 100644
--- a/src/components/group/MyPreviewModal.vue
+++ b/src/components/group/MyPreviewModal.vue
@@ -1,11 +1,12 @@
<template>
<div class="myModal">
- <a-modal v-model="visible" title="编辑预览" on-ok="handleOk" width="90%" :footer="null"
- :bodyStyle="{'overflow':'overlay','width': '100%','height': '100%'}">
+ <a-modal v-model="visible" title="编辑预览" width="60%" :footer="null"
+ :bodyStyle="{'overflow':'overlay','width': '100%','height': '700px'}">
<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>
+ <a-textarea id="myInput" style="height: 750px;min-width: 50%" v-model="text"
+ @keydown.9.native.prevent="tabFunc" />
+ <div class="markdown-body article-detail" style="min-width: 50%;border: 1px solid #d9d9d9;">
+ <vue-markdown :source="text"></vue-markdown>
</div>
</div>
</a-modal>
@@ -16,7 +17,13 @@
<script>
import VueMarkdown from 'vue-markdown'
- import md5 from 'js-md5';
+ const exp1 =
+ "###   十里平湖 \r> ##### (卢照邻·唐) \r> 化自《长安古意》 \r* 十里平湖霜满天 \r* 寸寸青丝愁华年 \r* 对月形单望相护 \r* 只羡鸳鸯不羡仙 \r\n\n";
+ const exp2 = "###   杂曲歌辞·春江曲 \r> ##### (郭元振·唐) \r* 江水春沉沉 \r* 上有双竹林 \r* 竹叶坏水色 \r* 郎亦坏人心 \r\n";
+
+ const exp3 = "\r> 「探清水河」\r引用化作 「上有竹林深 」 "
+
+ //import md5 from 'js-md5';
export default {
components: {
VueMarkdown
@@ -24,20 +31,32 @@
data() {
return {
visible: false,
- text: "### 长安古意 \r* 十里平湖霜满天 \r* 寸寸青丝愁华年 \r* 对月形单望相护 \r* 只羡鸳鸯不羡仙 ",
+ text: exp1 + exp2 + exp3,
}
},
methods: {
+ tabFunc() {
+ this.insertInputTxt('myInput', '\t')
+ },
+ insertInputTxt(id, insertTxt) {
+ var elInput = document.getElementById(id);
+ var startPos = elInput.selectionStart
+ var endPos = elInput.selectionEnd
+ if (startPos === undefined || endPos === undefined) return
+ var txt = elInput.value
+ var result = txt.substring(0, startPos) + insertTxt + txt.substring(endPos)
+ elInput.value = result
+ elInput.focus()
+ elInput.selectionStart = startPos + insertTxt.length
+ elInput.selectionEnd = startPos + insertTxt.length
+ },
+
getCalendarContainer(trigger) {
return this.$refs.myModal;
},
showModal() {
this.visible = true;
},
- handleOk(e) {
- console.log(111);
- },
-
handleCancel(e) {
this.visible = false;
},
--
Gitblit v1.9.1