From 271ca6cb0ee2ff0a789bf74d1821e7891a7043bb Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Tue, 30 Aug 2022 21:57:42 +0800
Subject: [PATCH] 自定义表情组件

---
 src/components/group/MyPreviewModal.vue |   35 +++++++++++++++++++++++++++++------
 1 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/components/group/MyPreviewModal.vue b/src/components/group/MyPreviewModal.vue
index 92ef70d..02f55ea 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="编辑预览"  width="60%" :footer="null"
-			:bodyStyle="{'overflow':'overlay','width': '100%','height': '100%'}">
+		<a-modal v-drag-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"  />
+				<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>
+					<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 =
+		"### &ensp;&ensp;十里平湖 \r> ##### (卢照邻·唐)  \r> 化自《长安古意》 \r* 十里平湖霜满天 \r* 寸寸青丝愁华年 \r* 对月形单望相护 \r* 只羡鸳鸯不羡仙 \r![](http://blog.inleft.com/photo/example.jpg)\n\n";
+	const exp2 = "### &ensp;&ensp;杂曲歌辞·春江曲 \r> ##### (郭元振·唐) \r* 江水春沉沉 \r* 上有双竹林 \r* 竹叶坏水色 \r* 郎亦坏人心 \r\n";
+
+	const exp3 = "\r> 「探清水河」\r引用化作 「上有竹林深 」 "
+
+	//import md5 from 'js-md5';
 	export default {
 		components: {
 			VueMarkdown
@@ -24,10 +31,26 @@
 		data() {
 			return {
 				visible: false,
-				text: "### 十里平湖 \r> ##### (卢照邻)  \r> 化自《长安古意》 \r* 十里平湖霜满天 \r* 寸寸青丝愁华年 \r* 对月形单望相护 \r* 只羡鸳鸯不羡仙 \r![](http://blog.inleft.com/photo/example.jpg)",
+				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;
 			},

--
Gitblit v1.9.1