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
相关文章：
vue naive ui 按钮绑定按键
使用vue (naive ui) 绑定Enter 按键 知识点: 按键绑定Button全局挂载使得message,notification, dialog, loadingBar 等NaiveUI 生效UMD方式使用vue 与 naive ui将vue默认的 分隔符大括号 替换 为 [[ ]] <!DOCTYPE html> <html lang"en"> <head>…...
Viobot基本功能使用及介绍
设备拿到手当然是要先试一下效果的，这部分可以参考本专栏的第一篇 Viobot开机指南。 接下来我们就从UI开始熟悉这个产品吧！ 1.状态 设备上电会自动运行它的程序，开启了一个服务器，上位机通过连接这个服务器连接到设备，…...
《PMBOK指南》第七版12大原则和8大绩效域
《PMBOK指南》第七版12大原则 原则1：成为勤勉、尊重和关心他人的管家 原则2：营造协作的项目团队环境 原则3：有效地干系人参与 原则4：聚焦于价值 原则5：识别、评估和响应系统交互 原则6：展现领导力行为…...
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 …...
C++ DAY7
一、类模板 建立一个通用的类，其类中的类型不确定，用一个虚拟类型替代 template<typename T> 类template ----->表示开始创建模板 typename -->表明后面的符号是数据类型，typename 也可以用class代替 T ----->表示数据类型…...
Vue2 使用插件 Volar 报错：＜template v-for＞ key should be placed on the ＜template＞ tag.
目录 问题描述 版本描述 问题定位 问题解决 VS Code 插件地址 问题描述 在 VS Code 上使用插件 Volar 开发 Vue3 项目，然后去改 Vue2 项目时，对没有放在<template v-for> 元素上的 :key，会提示 <template v-for> key should…...
和 run ()有什么区别)
启动线程方法 start ()和 run ()有什么区别
在Java中，线程可以通过调用start()方法或者直接调用run()方法来执行。这两种方式有着重要的区别： start() 方法：当你调用线程的start()方法时，它会使线程进入就绪状态，等待系统调度。系统会为该线程分配资源，并在合适的时机执行线程的run()方法。实际上，start()方法会启…...
Java的全排列模板
c有全排列函数，我们Java没有，所以我们只能自己手写了。 模板一：（不去重） import java.util.ArrayList; import java.util.Random; import java.util.Scanner; public class liyunpeng {public static void main(Stri…...
读书笔记——《万物有灵》
前言 上一本书是《走出荒野》，太平洋步道女王提到了这本书《万物有灵》，她同样是看一点撕一点的阅读。我想，在她穿越山河森林，听见鸟鸣溪流的旅行过程中，是不是看这本描写动物有如何聪明的书——《万物有灵》…...
面试现场表现：展示你的编程能力和沟通技巧
🌷🍁 博主猫头虎 带您 Go to New World.✨🍁 🦄 博客首页——猫头虎的博客🎐 🐳《面试题大全专栏》 文章图文并茂🦕生动形象🦖简单易学！欢迎大家来踩踩~🌺 &a…...
34亿的mysql表如何优雅的扩字段长度兵并归档重建
业务背景： 该系统有一张表数据量已达到34亿，并且有个字段长度不够，导致很多数据无法插入。因为业务只要保留近2个月数据即可，所以需要接下来需要做2点：1，扩字段长度 2，只保留近2个月的数据。 …...
C#_进程单例模式.秒懂Mutex
什么是Mutex? 可以定义调用线程是否具有互斥性，程序创建者拥有控制权，相反只能引用程序。 参数1：如果是程序创建者，就获得控制权。 参数2：名称，可使用GUID生成。 参数3：out 返回值…...
AcWing 5050. 排序 （每日一题）
题目描述 给定一个长度为 n 的由小写字母构成的字符串。 请你按照 a∼z 的顺序，对字符串内的字符进行重新排序，并输出重新排序后的字符串。 输入格式 第一行包含整数 T ，表示共有 T 组测试数据。 每组数据第一行包含整数 n 。 第二行包…...
【TypeScript】proxy 和 Reflect
proxy （代理） 和 Reflect （反射） 参数一样。 基本用法 let person { name: xx, age: 20} // proxy 支持对象，数组，函数，set，map // 代理对象的常用模式：前面一个对象&…...
STM32f103入门（5）定时器中断
STM32 TIM（定时器/计数器）模块的中断流程如下： 配置TIM寄存器：首先，通过配置TIM相关的寄存器来设置计时器的基本参数，例如预分频系数、计数模式、计数器周期等。 使能TIM中断：使用TIM_ITConfig函…...
Mybatis查询数据
上一篇我们介绍了在pom文件中引入mybatis依赖，配置了mybatis配置文件，通过读取配置文件创建了会话工厂，使用会话工厂创建会话获取连接对象读取到了数据库的基本信息。 如果您需要对上面的内容进行了解，可以参考Mybatis引入与使用…...
【前车之鉴】: 2023最新教程-将java程序打包到maven私服的正确打开方式,详细流程介绍不怕你掌握不了
文章目录 为什么看这篇整体流程1. 注册账号【首次需要】2. 工单申请【新项目必须】3. 项目配置【新项目必须】4. 授权认证【新项目必须】5. 一键发布 最后也很重要 为什么看这篇 一是当前网络上一些博客有遗漏部分，这里做补充，二是网上思路没错ÿ…...
如何理解IaaS、PaaS、SaaS？盘点受欢迎的八大SaaS平台！
如何理解IaaS、PaaS、SaaS？他们各自的优势在哪里？我们又应该如何选择？本篇将带大家深入浅出的了解IaaS、PaaS、SaaS，并为大家盘点2023最受欢迎的SaaS平台。 通过本文你将了解： IaaS、PaaS、SaaS分别是什么我们该如何理…...
立创EDA专业版的原理图上器件有一个虚线框
立创EDA专业版的原理图上器件有一个虚线框解决方法 问题分析： 在使用立创EDA专业版 设计电路原理图时，中途莫名其妙就给我的元件添加了下面图片所示的虚线外框。看着就很别扭的样子，而且工程大了和器件稍微布局比较密的时候就导致整体很难看…...
JUC并发编程--------基础篇
一、多线程的相关知识 栈与栈帧 我们都知道 JVM 中由堆、栈、方法区所组成，其中栈内存是给谁用的呢？其实就是线程，每个线程启动后，虚拟 机就会为其分配一块栈内存。 每个栈由多个栈帧（Frame）组成…...
CLaMP技术深度解析：对比学习如何实现语言与音乐的完美融合
CLaMP技术深度解析：对比学习如何实现语言与音乐的完美融合 【免费下载链接】muzic 这是一个微软研究院开发的音乐生成AI项目。适合对音乐、音频处理以及AI应用感兴趣的开发者、学生和研究者。特点是使用深度学习技术生成音乐，具有较高的创作质量和听觉体…...
MixText+BERT还能这么玩？手把手复现FPMT论文中的‘概率伪混合’黑科技
解密FPMT论文中的概率伪混合：BERT隐藏层的动态插值艺术 在自然语言处理领域，数据增强一直是提升模型泛化能力的关键技术。传统MixText方法通过线性插值在输入层混合样本，但这种"一刀切"的方式忽视了不同样本对模型训练的差异化价值…...
开源TeslaMate：重新定义特斯拉数据监控与分析体验
开源TeslaMate：重新定义特斯拉数据监控与分析体验 【免费下载链接】teslamate teslamate-org/teslamate: TeslaMate 是一个开源项目，用于收集特斯拉电动汽车的实时数据，并存储在数据库中以便进一步分析和可视化。该项目支持监控车辆状态、行驶…...
StructBERT在代码仓库管理中的重复代码检测应用
StructBERT在代码仓库管理中的重复代码检测应用 你有没有遇到过这种情况？在代码审查时，总觉得某段代码似曾相识，但又说不清在哪见过。或者，团队里不同成员为了解决类似问题，各自写了一套逻辑相近但细节不同的代码&…...
HackBGRT：UEFI启动界面定制的极简实施指南
HackBGRT：UEFI启动界面定制的极简实施指南 【免费下载链接】HackBGRT Windows boot logo changer for UEFI systems 项目地址: https://gitcode.com/gh_mirrors/ha/HackBGRT HackBGRT是一款专注于UEFI系统的开源工具，为用户提供安全高效的启动画面…...
nuScenes数据集深度解析：从传感器融合到3D目标检测的完整数据流
nuScenes数据集工程化实战：多传感器时空对齐与3D检测数据流优化 在自动驾驶研发领域，数据是算法迭代的基石。当我们谈论nuScenes数据集时，多数讨论停留在基础功能介绍层面，却鲜有从工程实现角度剖析其数据流设计的精妙之处。本文将…...
libvirt 有哪些命令
除了 virsh 外，还有很多有意思的命令。virt-manager 用于打开 libvirt 交互的界面除了连接本地电脑，也可以访问远程电脑的 libvirtd 服务virt-clone 快速克隆一个虚拟机。在 virt-manager 界面上也集成了这个功能。如下图，就是这么简单快捷&a…...
告别‘Illegal instruction’：为老旧ARM芯片（如鲲鹏920）定制MongoDB 4.4.9的完整避坑流程
为老旧ARM芯片定制MongoDB 4.4.9的完整避坑指南 当你在国产ARM服务器上部署MongoDB时，是否遇到过Illegal instruction错误？这个问题往往源于硬件与软件版本之间的指令集不匹配。本文将带你深入理解ARM架构的版本差异，并提供一套完整的解决方案…...
从手机照片同步到数据去重：用C++ STL set/map搞定‘两个数组交集’背后的真实业务逻辑
从手机照片同步到数据去重：用C STL set/map搞定‘两个数组交集’背后的真实业务逻辑 每次换新手机时，最头疼的莫过于照片和联系人的迁移——那些重复的截图、相似的风景照、多年前的证件照，究竟该如何高效筛选？这背后隐藏的正是计…...
保姆级教程：用BERT微调一个智能家居语音助手的意图识别模型（含完整代码）
智能家居场景下的BERT意图识别实战：从数据标注到模型部署 想象一下，当你对家里的智能音箱说"把客厅灯调暗一点"时，设备能准确理解你的意图并执行操作。这种自然交互的背后，是意图识别技术在发挥作用。不同于通用对话系…...