vue naive ui 按钮绑定按键

这篇具有很好参考价值的文章主要介绍了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 触发按钮

vue naive ui 按钮绑定按键,web,vue.js,ui,javascript

点击触发按钮

vue naive ui 按钮绑定按键,web,vue.js,ui,javascript文章来源地址https://www.toymoban.com/news/detail-683944.html

参考链接

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

到了这里,关于vue naive ui 按钮绑定按键的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Qt UI上的按钮和创建的按钮绑定 click 点击事件

    如果在ui 上 的按钮 绑定点击事件,按钮鼠标右键转到槽,点击clicked(),即可创建函数。 动态创建的按钮需要 用 connect 连接

    2024年02月15日
    浏览(49)
  • 使用@zip.js/zip.js与naive-ui的Tree组件实现在线文件解压预览

    用于压缩和解压缩文件的 JavaScript 库 支持Zip64 格式 支持WinZIP AES和 PKWare ZipCrypto 加密 支持同时读取和写入一个或多个 zip 文件 集成工作池管理器 无第三方依赖 该库依赖于Promise、TypedArray、 Streams API 以及以下可选的 API: Web Workers Compression Streams Web Crypto 该库与最新版本的

    2024年02月19日
    浏览(48)
  • Vue3 UI组件库对比,Naive UI、Element Plus、 Ant Design Vue

    Element Plus Naive ui Ant Design Vue 简介 element-ui Vue3版本,国内使用广泛 Vue作者推荐的Vue3ui 组件库 阿里Ant Design设计规范的Vue实现版 地址 https://github.com/element-plus/element-plus https://github.com/tusen-ai/naive-ui https://github.com/vueComponent/ant-design-vue 社区活跃度 高 中 高 ui库组件主要实现方式

    2024年01月25日
    浏览(43)
  • vue3 ,naive-ui,嵌套modal踩坑

    今天写代码,组合使用了,n-modal,n-datatable和n-select,在n-select组件出问题,无法展开,并且报错 先展示错误的demo代码 ModuleView是抽象出来的组件,问题就出在这个抽象里面,下面是子组件代码; 很明显这是一个嵌套modal的代码。 效果图: 大伙都知道,vue2的时候template里面第一层

    2024年04月10日
    浏览(43)
  • vue按钮绑定回车(键盘事件)

    但是,这种方式只能在该按钮获取到光标之后才能绑定回车键,也就是说你需要先用鼠标点击一下触发绑定回车的操作。

    2024年02月16日
    浏览(51)
  • Vue3+Vite+Pinia+Naive后台管理系统搭建之四:Naive UI 组件库的安装和使用

    前言 如果对 vue3 的语法不熟悉的,可以移步 Vue3.0 基础入门Vue3.0 基础入门快速入门。 UI 组件请参考官网:Naive Ui 官网 为什么选择 naive ui 不继续用 element ui,因为尤大大推荐,可以尝试下,而且 naive ui 更贴近 vue3 的语法,当然易上手还是element ui 好一点。 github 开源库:Vue

    2024年02月07日
    浏览(74)
  • Vue3的几款UI组件库:Naive UI、Element Plus、 Ant Design Vue、Arco Design

    vue3系列的三款ui框架简要对比: 框架 Element Plus Naive ui Ant Design Vue Arco Design 简介 element-ui Vue3版本,国内使用广泛 Vue作者推荐的Vue3ui 组件库 Ant Design 的 Vue 实现,组件的风格与 Ant Design 保持同步 ArcoDesign 主要服务于字节跳动旗下中后台产品的体验设计和技术实现 社区活跃度

    2024年02月03日
    浏览(44)
  • naive-ui NPopconfirm怎么用vue3的h()渲染

    先看效果 然后我先贴代码, 你们看懂的先运行下, 文章后面我教你怎么 添加这种有template,有slot插槽的组件 正文 以提示窗组件为例,官方地址为==》Naive UI 这个部分 就是下图左边部分驼峰写法 然后你vscode 键盘ctrl+鼠标左键 点击他 然后同样的方法查看ButtonProps,你就知道

    2024年02月13日
    浏览(42)
  • Naive UI:一个 Vue 3 组件库,比较完整,主题可调,使用 TypeScript,快有点意思。

    在当今的前端开发领域,Vue 3已成为中后台应用的首选框架。为了满足开发者的需求,各种组件库如雨后春笋般涌现。其中,Naive UI以其独特的优势,成为了Vue 3开发者的得力助手。本文将深入探讨Naive UI的特性、优势以及如何使用它来提高开发效率。 一、Naive UI的特性 组件丰

    2024年04月22日
    浏览(39)
  • vue3 + typescript + vite + naive ui + tailwindcss + jsx 仿苹果桌面系统

    基于 vue3.x + typescript + vite + naive ui + tailwindcss + jsx + vue-router + pinia,项目使用 tsx 作为模版输出,全程没有使用vue提供的SFC, 仿macos桌面前端项目,开源免费模版,希望减少工作量和学习新技术,希望能够帮助大家; 本人主要是后端的开发,对于前端我也是刚入门的小白,有很

    2024年02月07日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包