英文:
Is it possible to open Quasar PopUpEdit by pressing Enter key, instead of clicking on it?
问题
尽管 Quasar 文档提到了 show() 事件，以便在程序中打开 QPopUpEdit（而不是通过单击它来实现默认行为），但并没有提供任何示例。在研究后，有人建议使用模板引用，但对我来说，不幸的是它没有起作用。
我已经尝试了使用模板引用，如下所示，但它没有起作用。有人可以帮助我更接近解决方案吗？
<q-popup-edit v-slot="scope" auto-save ref="popUp">
<q-input v-model="scope.value" autofocus/>
</q-popup-edit>
在脚本中：
const popUp = ref()
const enterPressed = () => {
popUp.show()
}
英文:
Though Quasar documentation mentions the show() event, in order to programatically open QPopUpEdit (instead of the default behaviour by clicking on it), but there is no any example. After researching it is suggested by others using a template ref, but for me, unfortunately it is not working.
I have tried with template ref, as follows, but it is not working. Can anybody help me to get closer to the solution?
<q-popup-edit v-slot="scope" auto-save ref="popUp">
<q-input v-model="scope.value" autofocus/>
</q-popup-edit>
In script:
const popUp = ref()
const enterPressed = () => {
popUp.show()
}
答案1
得分: 1
只需使用一个按钮。查看示例。
Quasar似乎会自动执行这个操作。但你也可以将按钮的click设置为@click="enterPressed"
示例
const { createApp, ref } = Vue;
const app = createApp({
setup () {
return { label: ref('Click me') }
}
})
app.use(Quasar)
app.mount('#q-app')
a, label { line-height: 3; }
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/quasar@2.11.5/dist/quasar.prod.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="q-app">
<a href="#focus" autofocus>点击这里聚焦。</a> 然后按：<kbd>TAB</kbd>, <kbd>ENTER</kbd>
<p>
<button type="button" autofocus>PopUp</button><br/>
<label>{{label}}</label>
<q-popup-edit v-model="label" v-slot="scope" auto-save>
<q-input v-model="scope.value" dense autofocus counter @keyup.enter="scope.set"/>
</q-popup-edit>
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.11.5/dist/quasar.umd.prod.js"></script>
</body>
</html>
英文:
Just use a button. See the playground.
Quasar seems to do it automatically. But you could also set button's click to @click="enterPressed"
Playground
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const { createApp, ref } = Vue;
const app = createApp({
setup () {
return { label: ref('Click me') }
}
})
app.use(Quasar)
app.mount('#q-app')
<!-- language: lang-css -->
a, label { line-height: 3; }
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/quasar@2.11.5/dist/quasar.prod.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="q-app">
<a href="#focus" autofocus>Click here to focus.</a> Then press: <kbd>TAB</kbd>, <kbd>ENTER</kbd>
<p>
<button type="button" autofocus>PopUp</button><br/>
<label>{{label}}</label>
<q-popup-edit v-model="label" v-slot="scope" auto-save>
<q-input v-model="scope.value" dense autofocus counter @keyup.enter="scope.set"/>
</q-popup-edit>
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.11.5/dist/quasar.umd.prod.js"></script>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论