inleft
2022-03-03 0b0125884c449378a2e80f888a43a2d20974c8df
commit | author | age
9c695b 1 <template>
I 2     <div class="myModal">
0b0125 3         <a-modal v-model="visible" title="编辑预览" width="60%" :footer="null"
e33959 4             :bodyStyle="{'overflow':'overlay','width': '100%','height': '700px'}">
9c695b 5             <div style="display: flex;">
0b0125 6                 <a-textarea id="myInput" style="height: 750px;min-width: 50%" v-model="text" 
I 7                     @keydown.9.native.prevent="tabFunc" />
8                 
a71b64 9                 <div class="markdown-body article-detail" style="min-width: 50%;border: 1px solid #d9d9d9;">
0b0125 10                     <vue-markdown :source="text"></vue-markdown>
9c695b 11                 </div>
I 12             </div>
13         </a-modal>
14     </div>
15
16 </template>
17
18 <script>
19     import VueMarkdown from 'vue-markdown'
20
21     import md5 from 'js-md5';
22     export default {
23         components: {
24             VueMarkdown
25         },
26         data() {
27             return {
28                 visible: false,
0b0125 29                 text: "### &ensp;&ensp;十里平湖 \r> ##### (卢照邻)  \r> 化自《长安古意》 \r* 十里平湖霜满天 \r* 寸寸青丝愁华年 \r* 对月形单望相护 \r* 只羡鸳鸯不羡仙 \r![](http://blog.inleft.com/photo/example.jpg)",
9c695b 30             }
I 31         },
32         methods: {
0b0125 33             tabFunc() {
I 34                 this.insertInputTxt('myInput', '\t')
35             },
36             insertInputTxt(id, insertTxt) {
37                 var elInput =  document.getElementById(id);
38                 var startPos = elInput.selectionStart
39                 var endPos = elInput.selectionEnd
40                 if (startPos === undefined || endPos === undefined) return
41                 var txt = elInput.value
42                 var result = txt.substring(0, startPos) + insertTxt + txt.substring(endPos)
43                 elInput.value = result
44                 elInput.focus()
45                 elInput.selectionStart = startPos + insertTxt.length
46                 elInput.selectionEnd = startPos + insertTxt.length
47             },
48
9c695b 49             getCalendarContainer(trigger) {
I 50                 return this.$refs.myModal;
51             },
52             showModal() {
53                 this.visible = true;
54             },
55             handleCancel(e) {
56                 this.visible = false;
57             },
58
59         },
60     }
61 </script>
62
63 <style>
64 </style>