使用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://www.toymoban.com/news/detail-683944.html
点击触发按钮
文章来源地址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模板网!