增加键盘监听，ctrl+Z, ctrl+B, ctrl+I, 但是tab键无法阻止默认事件

pangqianjin · Jun 22, 2021 · 20af9a2 · 20af9a2
1 parent 7a722ed
commit 20af9a2
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 2 deletions.
diff --git a/public/index.html b/public/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>default</title>
+    <title>vue-markdown</title>
   </head>
   <body>
     <noscript>

diff --git a/src/components/MyMain.vue b/src/components/MyMain.vue
@@ -2,6 +2,7 @@
     <el-row>
         <el-col :span="12" id="writing-area">
             <el-input ref="textarea" type="textarea" placeholder="请输入markdown语法"
+                @keyup.native="handleKeyupCtrl($event)"
                 v-model="text" autofocus :rows="22"></el-input>
         </el-col>
         <el-col :span="12">
@@ -23,12 +24,31 @@ export default {
     },
     mounted(){
         this.$store.dispatch('setNode', this.$refs.textarea)
+        this.timer = setInterval(()=>{// 每3s对比,并决定是否记录历史输入(逻辑在store中)
+            this.addHistory()
+        },3000)
+    },
+    beforeDestroy(){
+        clearInterval(this.timer)
     },
     computed:{
         ...mapGetters(['value','htmlString'])
     },
     methods:{
-        ...mapActions(['changeValue'])
+        ...mapActions(['addStyles','changeValue', 'addHistory','rollback']),
+        handleKeyupCtrl(event){
+            switch(event.keyCode){
+                case 90:// ctrl+Z
+                    this.rollback()
+                    break
+                case 66:// ctrl+B
+                    this.addStyles({char1:'**',char2:'**',wrap:true})
+                    break
+                case 73://ctrl+I
+                    this.addStyles({char1:'*',char2:'*',wrap:true})
+                    break
+            }
+        }
     },
     watch:{
         value(newValue){// 监视$store中的value

diff --git a/src/store/index.js b/src/store/index.js
@@ -8,6 +8,7 @@ Vue.use(Vuex)
 
 const state = {
     value: '', // 左侧输入的文本
+    lastValues: [''],//历史输入的文本，用来撤销操作：ctrl+z
     htmlString: '',// 右侧渲染的HTML
     textareaNode: null, // textarea节点
     selectionStart:0,// 光标的开始位置
@@ -51,6 +52,17 @@ const mutations = {
             value = value.slice(0, selectionStart)+char1+char2+value.slice(selectionEnd)
         }      
         state.value = value
+    },
+    addHistory(state){
+        const {lastValues} = state
+        if(state.value!==lastValues[lastValues.length-1]){
+            state.lastValues.push(state.value)
+        }
+    },
+    rollback(state){
+        if(state.lastValues.length>0){
+            state.value = state.lastValues.pop()
+        } 
     }
 }
 
@@ -70,6 +82,12 @@ const actions = {
     },
     setNode({commit}, node){
         commit('setNode', node)
+    },
+    addHistory({commit}, history){
+        commit('addHistory', history)
+    },
+    rollback({commit}){
+        commit('rollback')
     }
 }