vue项目中enter触发搜索

最新推荐文章于 2024-04-16 09:28:32 发布

原创最新推荐文章于 2024-04-16 09:28:32 发布 · 524 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

日常记录专栏收录该内容

12 篇文章

订阅专栏

这篇博客介绍了如何在Vue和Element-UI的admin项目中，通过监听键盘事件来实现在按下enter键时触发搜索功能。文章详细讲解了在`created`钩子中绑定事件，以及在组件销毁前移除事件监听的方法，确保了事件处理的正确性和页面的性能。

技术栈：vue + element-ui

admin项目中有搜索功能，想要做成点击enter键就能触发搜索。

		created() {
				// 绑定enter事件
            	this.enterSearch();
		},
		/**
         * @menthod 给页面绑定enter事件
         */
        enterSearch() {
            document.addEventListener('keydown', this.searchEvent);
            // 移除事件
            this.$once('hook:beforeDestroy', () => {
                document.removeEventListener('keydown', this.searchEvent);
            });
        },
        searchEvent(e) {
            if ((e.keyCode === 13 || e.code === 'Enter') && e.target.baseURI.match(/你的当前页面路径/)) {
                this.$emit('search'); // 你的搜索事件
            }
        }