nuxt项目中如何监听回车键(enter)键事件

ppylox
·7/13/2021·0 阅读
AI 摘要模型根据正文自动生成,仅供参考

在Nuxt项目中监听回车键事件与Vue项目相同,通过监听keypress或keydown事件并判断按键类型实现。示例代码使用window.addEventListener监听keypress,当key.code为'Enter'时执行search方法,该方法验证搜索词非空后打开对应标签页面。该方案应用于网站主页搜索功能。文章建议Nuxt项目的搜索和页面采用RESTful规范实现,便于搜索引擎收录,如翻页和分类页面均采用URL路径形式。

在Nuxt项目中监听键盘事件其实跟一般的vue项目一样的。主要是监听keypress或者keydown事件,再判断当前的按键是那个按键,在执行后面的操作就可以了。

window.addEventListener("keypress",(key) =>{\n      if (key.code === 'Enter') {\n        this.search()\n      }\n    })\n \nsearch(){\n      if (!this.searchWords) {\n        this.$message.warning("请输入关键字")\n        return\n      }\n      window.open("/post/tags/" + this.searchWords)\n    },

实例代码主要是监听用户是否按了回车键,如果按了回车键就执行搜索,主要用在网站(www.dsiab.com)主页的搜索功能上面。

nuxt项目的搜索跟页面建议通过restful规范来实现,最主要的方便收录,比如分类页面和翻页都是采用这种方式。

比如翻页:https://www.dsiab.com/page/2

比如分类:https://www.dsiab.com/post/category/3

相关文章

评论 (0)

暂无评论,来写第一条吧