输入如此简单
<input ref="input" class="terminal-input" autofocus
v-model="message" type="submit" @submit.prevent="printToConsole"/>
添加后
type="submit"
我无法再输入内容。它只是变成了一个按钮!所以我找到了一个解决方案,只需制作一个表单,添加一个按钮(使其提交)并隐藏按钮。
<form>
<input ref="input" class="terminal-input" autofocus v-model="message"/>
<q-btn type="submit" @click="printToConsole" v-show="false"/>
</form>
我可以以某种方式做到这一点,但只需要输入吗? (所以没有隐藏按钮的东西)
应将
@submit
事件添加到表单元素:
<form @submit.prevent="printToConsole">
<input ref="input" class="terminal-input" autofocus v-model="message"/>
</form>
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data() {
return {
message: ''
}
},
methods: {
printToConsole() {
console.log(this.message)
}
}
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app" class="container">
<form @submit.prevent="printToConsole">
<input ref="input" class="terminal-input" autofocus v-model="message" />
</form>
</div>
如果你有一个文本区域,可以正常使用 Enter,我使用这两个事件来处理
Ctrl+Enter
和 Cmd+Enter
,这是提交表单的一种非常通用的方式。当然,这也适用于输入。
<textarea
@keydown.meta.enter="submit"
@keydown.ctrl.enter="submit"
>
</textarea>