使用vue (naive ui) 綁定Enter 按鍵
知識(shí)點(diǎn):
- 按鍵綁定Button
- 全局掛載使得message,notification, dialog, loadingBar 等NaiveUI 生效
- UMD方式使用vue 與 naive ui
- 將vue默認(rèn)的 分隔符大括號(hào) 替換 為 [[ ]]
<!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觸發(fā)了按鈕,請(qǐng)稍后",
{
keepAliveOnHover: true
}
);
myButton.click()
}
}
return {
button_name: 'Button',
compareClick() {
loadingBar.start();
disabledRef.value = false;
message.info("您已經(jīng)點(diǎn)擊了按鈕,請(qǐng)稍后",
{
keepAliveOnHover: true
}
);
var timeInterval = 2000;
setTimeout(() => {
loadingBar.finish();
disabledRef.value = true;
}, timeInterval);
}
}
}
}
// 將 默認(rèn)的 分隔符大括號(hào) 替換 為 [[ ]]
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 觸發(fā)按鈕
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-683944.html
點(diǎn)擊觸發(fā)按鈕
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-683944.html
參考鏈接
- https://juejin.cn/post/7188032240775856185
- https://www.naiveui.com/zh-CN/os-theme/components/discrete
到了這里，關(guān)于vue naive ui 按鈕綁定按鍵的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
