当前位置： 首页 > news >正文

vue naive ui 按钮绑定按键

news 2025/11/4 16:52:50

使用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

相关文章：

vue naive ui 按钮绑定按键

使用vue (naive ui) 绑定Enter 按键 知识点: 按键绑定Button全局挂载使得message,notification, dialog, loadingBar 等NaiveUI 生效UMD方式使用vue 与 naive ui将vue默认的 分隔符大括号 替换 为 [[ ]] <!DOCTYPE html> <html lang"en"> <head>…...

编程日记 2023/8/30 4:16:20

Viobot基本功能使用及介绍

设备拿到手当然是要先试一下效果的&#xff0c;这部分可以参考本专栏的第一篇 Viobot开机指南。 接下来我们就从UI开始熟悉这个产品吧&#xff01; 1.状态 设备上电会自动运行它的程序&#xff0c;开启了一个服务器&#xff0c;上位机通过连接这个服务器连接到设备&#xff0c…...

编程日记 2023/8/30 4:15:18

《PMBOK指南》第七版12大原则和8大绩效域

《PMBOK指南》第七版12大原则 原则1&#xff1a;成为勤勉、尊重和关心他人的管家 原则2&#xff1a;营造协作的项目团队环境 原则3&#xff1a;有效地干系人参与 原则4&#xff1a;聚焦于价值 原则5&#xff1a;识别、评估和响应系统交互 原则6&#xff1a;展现领导力行为…...

编程日记 2023/8/30 4:14:17

docker 启动命令

cd /ycw/docker docker build -f DockerFile -t jshepr:1.0 . #前面测试docker已经介绍过该命令下面就不再介绍了 docker images docker run -it -p 7003:9999 --name yyy -d jshepr:1.0 #上面运行报错 用这个 不报错就不用 docker rm yyy docker ps #查看项目日志 docker …...

编程日记 2023/8/30 4:13:14

C++ DAY7

一、类模板 建立一个通用的类&#xff0c;其类中的类型不确定&#xff0c;用一个虚拟类型替代 template<typename T> 类template ----->表示开始创建模板 typename -->表明后面的符号是数据类型&#xff0c;typename 也可以用class代替 T ----->表示数据类型…...

编程日记 2023/8/30 4:12:11

Vue2 使用插件 Volar 报错：＜template v-for＞ key should be placed on the ＜template＞ tag.

目录 问题描述 版本描述 问题定位 问题解决 VS Code 插件地址 问题描述 在 VS Code 上使用插件 Volar 开发 Vue3 项目&#xff0c;然后去改 Vue2 项目时&#xff0c;对没有放在<template v-for> 元素上的 :key&#xff0c;会提示 <template v-for> key should…...

编程日记 2023/8/30 4:11:10

启动线程方法 start ()和 run ()有什么区别

在Java中，线程可以通过调用start()方法或者直接调用run()方法来执行。这两种方式有着重要的区别： start() 方法：当你调用线程的start()方法时，它会使线程进入就绪状态，等待系统调度。系统会为该线程分配资源，并在合适的时机执行线程的run()方法。实际上，start()方法会启…...

编程日记 2023/8/30 4:10:07

Java的全排列模板

c有全排列函数&#xff0c;我们Java没有&#xff0c;所以我们只能自己手写了。 模板一&#xff1a;&#xff08;不去重&#xff09; import java.util.ArrayList; import java.util.Random; import java.util.Scanner; public class liyunpeng {public static void main(Stri…...

编程日记 2023/8/30 4:09:05

读书笔记——《万物有灵》

前言 上一本书是《走出荒野》&#xff0c;太平洋步道女王提到了这本书《万物有灵》&#xff0c;她同样是看一点撕一点的阅读。我想&#xff0c;在她穿越山河森林&#xff0c;听见鸟鸣溪流的旅行过程中&#xff0c;是不是看这本描写动物有如何聪明的书——《万物有灵》&#xf…...

编程日记 2023/8/30 4:08:04

面试现场表现：展示你的编程能力和沟通技巧

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…...

编程日记 2023/8/30 4:07:02

34亿的mysql表如何优雅的扩字段长度兵并归档重建

业务背景&#xff1a; 该系统有一张表数据量已达到34亿&#xff0c;并且有个字段长度不够&#xff0c;导致很多数据无法插入。因为业务只要保留近2个月数据即可&#xff0c;所以需要接下来需要做2点&#xff1a;1&#xff0c;扩字段长度 2&#xff0c;只保留近2个月的数据。 …...

编程日记 2023/8/30 4:06:00

C#_进程单例模式.秒懂Mutex

什么是Mutex? 可以定义调用线程是否具有互斥性&#xff0c;程序创建者拥有控制权&#xff0c;相反只能引用程序。 参数1&#xff1a;如果是程序创建者&#xff0c;就获得控制权。 参数2&#xff1a;名称&#xff0c;可使用GUID生成。 参数3&#xff1a;out 返回值&#xf…...

编程日记 2023/8/30 4:04:57

AcWing 5050. 排序 （每日一题）

题目描述 给定一个长度为 n 的由小写字母构成的字符串。 请你按照 a∼z 的顺序&#xff0c;对字符串内的字符进行重新排序&#xff0c;并输出重新排序后的字符串。 输入格式 第一行包含整数 T &#xff0c;表示共有 T 组测试数据。 每组数据第一行包含整数 n 。 第二行包…...

编程日记 2023/8/30 4:03:54

【TypeScript】proxy 和 Reflect

proxy &#xff08;代理&#xff09; 和 Reflect &#xff08;反射&#xff09; 参数一样。 基本用法 let person { name: xx, age: 20} // proxy 支持对象&#xff0c;数组&#xff0c;函数&#xff0c;set&#xff0c;map // 代理对象的常用模式&#xff1a;前面一个对象&…...

编程日记 2023/8/30 4:02:53

STM32f103入门（5）定时器中断

STM32 TIM&#xff08;定时器/计数器&#xff09;模块的中断流程如下&#xff1a; 配置TIM寄存器&#xff1a;首先&#xff0c;通过配置TIM相关的寄存器来设置计时器的基本参数&#xff0c;例如预分频系数、计数模式、计数器周期等。 使能TIM中断&#xff1a;使用TIM_ITConfig函…...

编程日记 2023/8/30 4:01:52

Mybatis查询数据

上一篇我们介绍了在pom文件中引入mybatis依赖&#xff0c;配置了mybatis配置文件&#xff0c;通过读取配置文件创建了会话工厂&#xff0c;使用会话工厂创建会话获取连接对象读取到了数据库的基本信息。 如果您需要对上面的内容进行了解&#xff0c;可以参考Mybatis引入与使用…...

编程日记 2023/8/30 4:00:49

【前车之鉴】: 2023最新教程-将java程序打包到maven私服的正确打开方式,详细流程介绍不怕你掌握不了

文章目录 为什么看这篇整体流程1. 注册账号【首次需要】2. 工单申请【新项目必须】3. 项目配置【新项目必须】4. 授权认证【新项目必须】5. 一键发布 最后也很重要 为什么看这篇 一是当前网络上一些博客有遗漏部分&#xff0c;这里做补充&#xff0c;二是网上思路没错&#xff…...

编程日记 2023/8/30 3:59:48

如何理解IaaS、PaaS、SaaS？盘点受欢迎的八大SaaS平台！

如何理解IaaS、PaaS、SaaS&#xff1f;他们各自的优势在哪里&#xff1f;我们又应该如何选择&#xff1f;本篇将带大家深入浅出的了解IaaS、PaaS、SaaS&#xff0c;并为大家盘点2023最受欢迎的SaaS平台。 通过本文你将了解&#xff1a; IaaS、PaaS、SaaS分别是什么我们该如何理…...

编程日记 2023/8/30 3:58:46

立创EDA专业版的原理图上器件有一个虚线框

立创EDA专业版的原理图上器件有一个虚线框解决方法 问题分析&#xff1a; 在使用立创EDA专业版 设计电路原理图时&#xff0c;中途莫名其妙就给我的元件添加了下面图片所示的虚线外框。看着就很别扭的样子&#xff0c;而且工程大了和器件稍微布局比较密的时候就导致整体很难看…...

编程日记 2023/8/30 3:57:44

JUC并发编程--------基础篇

一、多线程的相关知识 栈与栈帧 我们都知道 JVM 中由堆、栈、方法区所组成&#xff0c;其中栈内存是给谁用的呢&#xff1f;其实就是线程&#xff0c;每个线程启动后&#xff0c;虚拟 机就会为其分配一块栈内存。 每个栈由多个栈帧&#xff08;Frame&#xff09;组成&#xf…...

编程日记 2023/8/30 3:56:43

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/10/24 14:20:29

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

编程新知 2025/9/21 0:49:02

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2025/10/29 18:36:01

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...

编程新知 2025/9/16 21:01:58

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一）

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

编程新知 2025/11/3 1:15:14

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

编程新知 2025/9/22 20:53:03

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

编程新知 2025/10/31 17:24:49

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

编程新知 2025/10/23 13:28:30

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

编程新知 2025/10/19 5:14:05

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

编程新知 2025/10/31 0:51:40