| commit | author | age | ||
| 9c695b | 1 | <template> |
| I | 2 | <div class="myModal"> |
| 6461f5 | 3 | <a-modal v-drag-modal v-model="visible" title="编辑预览" width="60%" :footer="null" |
| e33959 | 4 | :bodyStyle="{'overflow':'overlay','width': '100%','height': '700px'}"> |
| 9c695b | 5 | <div style="display: flex;"> |
| 74344a | 6 | <a-textarea id="myInput" style="height: 750px;min-width: 50%" v-model="text" |
| 0b0125 | 7 | @keydown.9.native.prevent="tabFunc" /> |
| a71b64 | 8 | <div class="markdown-body article-detail" style="min-width: 50%;border: 1px solid #d9d9d9;"> |
| 0b0125 | 9 | <vue-markdown :source="text"></vue-markdown> |
| 9c695b | 10 | </div> |
| I | 11 | </div> |
| 12 | </a-modal> | |
| 13 | </div> | |
| 14 | ||
| 15 | </template> | |
| 16 | ||
| 17 | <script> | |
| 18 | import VueMarkdown from 'vue-markdown' | |
| 00e46d | 19 | |
| I | 20 | const exp1 = |
| 21 | "###   十里平湖 \r> ##### (卢照邻·唐) \r> 化自《长安古意》 \r* 十里平湖霜满天 \r* 寸寸青丝愁华年 \r* 对月形单望相护 \r* 只羡鸳鸯不羡仙 \r\n\n"; | |
| 22 | const exp2 = "###   杂曲歌辞·春江曲 \r> ##### (郭元振·唐) \r* 江水春沉沉 \r* 上有双竹林 \r* 竹叶坏水色 \r* 郎亦坏人心 \r\n"; | |
| 23 | ||
| 24 | const exp3 = "\r> 「探清水河」\r引用化作 「上有竹林深 」 " | |
| 9c695b | 25 | |
| cb7779 | 26 | //import md5 from 'js-md5'; |
| 9c695b | 27 | export default { |
| I | 28 | components: { |
| 29 | VueMarkdown | |
| 30 | }, | |
| 31 | data() { | |
| 32 | return { | |
| 33 | visible: false, | |
| 00e46d | 34 | text: exp1 + exp2 + exp3, |
| 9c695b | 35 | } |
| I | 36 | }, |
| 37 | methods: { | |
| 0b0125 | 38 | tabFunc() { |
| I | 39 | this.insertInputTxt('myInput', '\t') |
| 40 | }, | |
| 41 | insertInputTxt(id, insertTxt) { | |
| 74344a | 42 | var elInput = document.getElementById(id); |
| 0b0125 | 43 | var startPos = elInput.selectionStart |
| I | 44 | var endPos = elInput.selectionEnd |
| 45 | if (startPos === undefined || endPos === undefined) return | |
| 46 | var txt = elInput.value | |
| 47 | var result = txt.substring(0, startPos) + insertTxt + txt.substring(endPos) | |
| 48 | elInput.value = result | |
| 49 | elInput.focus() | |
| 50 | elInput.selectionStart = startPos + insertTxt.length | |
| 51 | elInput.selectionEnd = startPos + insertTxt.length | |
| 52 | }, | |
| 53 | ||
| 9c695b | 54 | getCalendarContainer(trigger) { |
| I | 55 | return this.$refs.myModal; |
| 56 | }, | |
| 57 | showModal() { | |
| 58 | this.visible = true; | |
| 59 | }, | |
| 60 | handleCancel(e) { | |
| 61 | this.visible = false; | |
| 62 | }, | |
| 63 | ||
| 64 | }, | |
| 65 | } | |
| 66 | </script> | |
| 67 | ||
| 68 | <style> | |
| 69 | </style> | |
