采集做网站北京网站提升排名
使用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