vue naive ui 按钮绑定按键

使用vue (naive ui) 绑定Enter 按键

知识点:

  • 按键绑定Button
  • 全局挂载使得message,notification, dialog, loadingBar 等NaiveUI 生效
  • UMD方式使用vue 与 naive ui
  • 将vue默认的 分隔符大括号 替换 为 [[ ]]
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>按钮绑定按键</title><script src="https://unpkg.com/vue@3.3.4/dist/vue.global.js"></script><script src="https://unpkg.com/naive-ui@2.34.4/dist/index.js"></script><link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"></head>
<body><div id="app"><n-button @click="compareClick" id="myButton">[[ button_name ]]</n-button></div><script>console.log("start")const disabledRef = Vue.ref(true);// message,notification, dialog, loadingBar 等生效的方法const {message, notification, dialog, loadingBar} = naive.createDiscreteApi(["message", "dialog", "notification", "loadingBar"],{configProviderProps: naive.configProviderPropsRef});const App = {setup() {document.onkeyup = function (e) {if (e.key == 'Enter') {var myButton = document.getElementById("myButton");message.info("您使用按键Enter触发了按钮,请稍后",{keepAliveOnHover: true});myButton.click()}}return {button_name: 'Button',compareClick() {loadingBar.start();disabledRef.value = false;message.info("您已经点击了按钮,请稍后",{keepAliveOnHover: true});var timeInterval = 2000;setTimeout(() => {loadingBar.finish();disabledRef.value = true;}, timeInterval);}}}}// 将 默认的 分隔符大括号 替换 为 [[ ]]App.delimiters = ["[[", "]]"];const app = Vue.createApp(App)console.log("App.createApp ")app.use(naive)console.log("use naive")app.mount('#app')console.log("mount")
</script>
</body>
</html>

Enter 触发按钮

在这里插入图片描述

点击触发按钮

在这里插入图片描述

参考链接

  • https://juejin.cn/post/7188032240775856185
  • https://www.naiveui.com/zh-CN/os-theme/components/discrete

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/61170.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode-452-用最少数量的箭引爆气球

题目描述&#xff1a; 有一些球形气球贴在一堵用 XY 平面表示的墙面上。墙面上的气球记录在整数数组 points &#xff0c;其中points[i] [xstart, xend] 表示水平直径在 xstart 和 xend之间的气球。你不知道气球的确切 y 坐标。 一支弓箭可以沿着 x 轴从不同点 完全垂直 地射出…

Myabtis学习记录

mapper.xml常用标签 foreach标签 MyBatis中mapper.xml中foreach的使用_mapper.xml foreach_Willing卡卡的博客-CSDN博客 if标签 Mybatis的mapper.xml中if标签test判断的用法_if标签的test_大唐冠军侯的博客-CSDN博客

一文讲通物联网嵌入式

最近有很多同学问我&#xff0c;物联网近几年一直是科技的热点&#xff0c;嵌入式和物联网有什么关系呢&#xff1f;我在这里统一给大家讲解一下。 嵌入式是应用于物联网产品方向的一种嵌入式操作系统。类似于Android系统是谷歌开发的移动操作系统&#xff0c;嵌入式实际上也是…

docker 学习-- 04 实践搭建 1(宝塔)

docker 学习-- 04 实践 1&#xff08;宝塔&#xff09; docker 学习-- 01 基础知识 docker 学习-- 02 常用命令 docker 学习-- 03 环境安装 docker 学习-- 04 实践 1&#xff08;宝塔&#xff09; docker 学习-- 04 实践 2 &#xff08;lnpmr环境&#xff09; 通过上面的学…

opencv-答题卡识别判卷

#导入工具包 import numpy as np import argparse import imutils import cv2# 设置参数 ap = argparse.ArgumentParser() ap.add_argument("-i", "--image", required=True,help="path to the input image") args = vars(ap.parse_args())# 正确…

RabbitMQ工作模式-路由模式

官方文档参考&#xff1a;https://www.rabbitmq.com/tutorials/tutorial-four-python.html 使用direct类型的Exchange,发N条消息并使用不同的routingKey,消费者定义队列并将队列routingKey、Exchange绑定。此时使用direct模式Exchange必须要routingKey完成匹配的情况下消息才…

妈妈的爱依然深沉

村里的孩子为了买化肥&#xff0c;跟城里官老爷们借了好多钱。 那几年庄稼转手很快&#xff0c;不是用来吃的&#xff0c;因此借钱成本很高&#xff0c;大概LPR加100bp。 后来村里孩子终于发现庄稼终究只能用来吃&#xff0c;不再热衷买卖化肥。可是官老爷们的金融生意还要继续…

模块化与组件化:开发中的双剑合璧

引言&#xff1a;模块化与组件化的重要性 在现代软件开发中&#xff0c;随着项目规模的增长和技术的复杂性增加&#xff0c;如何有效地组织和管理代码变得越来越重要。模块化与组件化作为两种主要的代码组织方法&#xff0c;为开发者提供了有效的工具&#xff0c;帮助他们创建…

C语言练习7(巩固提升)

C语言练习7 编程题 前言 “芳林新叶催陈叶&#xff0c;流水前波让后波。”改革开放40年来&#xff0c;我们以敢闯敢干的勇气和自我革新的担当&#xff0c;闯出了一条新路、好路&#xff0c;实现了从“赶上时代”到“引领时代”的伟大跨越。今天&#xff0c;我们要不忘初心、牢记…

MyBatisPlus实现多租户功能

前言&#xff1a;多租户是一种软件架构技术&#xff0c;在多用户的环境下&#xff0c;共有同一套系统&#xff0c;并且要注意数据之间的隔离性。 一、SaaS多租户简介 1.1、SaaS多租户 SaaS&#xff0c;是Software-as-a-Service的缩写名称&#xff0c;意思为软件即服务&#x…

手工测试与自动化测试各自的优势和局限性是什么?如何合理地配合使用?

对测试从业者而言&#xff0c;手工测试和自动化测试是伴随测试职业一生的两个名词。今天&#xff0c;我们就来聊聊两者各自的优势和局限性&#xff0c;以及如何合理地配合使用。 手工测试和自动化测试的定义 手工测试&#xff08;Manual Testing&#xff09;是一种软件测试方法…

【电子学会真题】青少年软件编程(C语言)等级考试试卷(一级) 2021年9月

试卷下载 pdf 格式下载&#xff1a;https://download.csdn.net/download/SHUTIAN2010/88255543 word 格式下载&#xff1a;https://download.csdn.net/download/SHUTIAN2010/88255558 1&#xff0e;计算乘积 一行两个整数a、b&#xff0c;以空格分隔。&#xff08;0&#xff1…

CotEditor for mac 4.0.1 中文版(开源文本编辑器)

coteditorformac是一款简单实用的基于Cocoa的macOS纯文本编辑器&#xff0c;coteditormac版本可以用来编辑网页、结构化文本、程序源代码等文本文件&#xff0c;使用起来非常方便。 CotEditor for Mac具有正则表达式搜索和替换、语法高亮、编码等实用功能&#xff0c;而CotEdi…

qt信号与槽

输入账户密码成功则跳转界面 widget.cpp #include "widget.h" //自己的头文件Widget::Widget(QWidget *parent) //构造函数的定义: QWidget(parent) …

WordPress 网站使用 CDN 后获取访客真实 IP

WordPress 往数据库存 IP 的时候似乎用的是 REMOTE_ADDR&#xff0c;这样一来数据库里面的评论信息就全是从各个 CDN 服务器来的 IP。 在 wp-config.php 文件中增加下面代码就可以获取 CDN 后访客的真实 IP。这个函数的核心是用解析后的 HTTP_X_FORWARDED_FOR 替换 REMOTE_ADD…

django自动创建model数据

目前使用的环境&#xff1a;django4.2.3&#xff0c;python3.10 django通过一些第三方库&#xff0c;可以轻易的自动生成一系列的后台数据。 首先先创建一个数据库&#xff1a; 然后&#xff0c;在setting.py中就可以指定我们新创建的数据库了。 DATABASES {default: {ENGI…

ChatGPT 与前端技术实现制作大屏可视化

像这样的综合案例实分析,我们可以提供案例,维度与指标数据,让ChatGPT与AIGC 帮写出完整代码,并进行一个2行2列的布局设置。 数据与指令如下: 商品名称 销量 目标 完成率 可乐 479 600 79.83% 雪碧 324 600 54.00% 红茶 379 600 63.…

【C语言】循环语句详解

✨个人主页&#xff1a; Anmia.&#x1f389;所属专栏&#xff1a; C Language &#x1f383;操作环境&#xff1a; Visual Studio 2019 版本 目录 1.什么是循环结构&#xff1f; 2.while循环 while流程图 while语句中的break和continue break continue 3.for循环 for流…

头歌MYSQL——课后作业1 数据库和数据表的建立、修改和删除

第1关&#xff1a;建立数据库 任务描述 本关任务&#xff1a;建立数据库 为了完成本关任务&#xff0c;你需要掌握&#xff1a; 如何创建数据库&#xff0c;显示已经建立的数据库 相关知识 创建数据库 创建数据库是在系统磁盘上划分一块区域用于数据的存储和管理。 命令格…

C语言(第三十六天)

4. 位操作符&#xff1a;&、|、^ 位操作符有&#xff1a; & //按位与 | //按位或 ^ //按位异或 注&#xff1a;他们的操作数必须是整数。 直接上代码&#xff1a; #include <stdio.h> int main() { int num1 -3; int num2 5; num1 & num2; num1 | num2; nu…