【vue】截获 Ctrl+S 组合键以及自动保存（提交）功能的实现

最新推荐文章于 2024-01-08 14:42:06 发布

转载最新推荐文章于 2024-01-08 14:42:06 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://www.jianshu.com/p/01ccb45f1818

文章标签：

#vue.js #前端

vue 专栏收录该内容

42 篇文章

订阅专栏

本文介绍了如何在Vue前端应用中，通过监听键盘事件并捕获Ctrl+S组合键，实现用户按下Ctrl+S时触发数据提交到后端数据库的操作。同时，文章还展示了如何设置定时器自动间隔保存文档内容，确保用户更改的实时保存。示例代码展示了具体的Vue组件实现方式。

默认情况下，Chrome 中按下 Ctrl+S 组合键会进入“保存网页”界面，并不会与网页中的具体内容做交互。

最近在做一个前端基于 Vue 的在线文档，希望网页中按下 Ctrl+S 组合件就能触发提交动作，将前端数据的改动存储到后端数据库中。
并且不管用户是否操作，每隔特定时间也会自动提交文档的当前内容到后端，实现自动保存的功能。

示例代码如下：

<template>
  <button @click="save('button')">保存</button>
</template>

<script>

export default {
  mounted() {
    document.addEventListener('keydown', this.saveContent)

    this.timer = setInterval(() => {
      this.save('timer')
    }, 10 * 1000)
  },

  beforeDestroy() {
    document.removeEventListener('keydown', this.saveContent)
    clearInterval(this.timer)
  },

  methods: {
    save(type) {
      console.log(`content saved by ${type}`)
    },
    saveContent(e) {
      var key = window.event.keyCode ? window.event.keyCode : window.event.which
      if (key === 83 && e.ctrlKey) {
        this.save('hot key')
        e.preventDefault()
      }
    }
  }
}
</script>