所以我試圖捕捉按鍵后或用戶按下回車鍵后輸入的字符。
我使用了這個包：npm i vue-keypress，但我不知道如何捕捉角色。您可以建議除此包之外的任何方法。
<script>
export default {
components: {
Keypress: () => import('vue-keypress')
},
data(){
return {
enteredCode:'',
}
},
methods:{
CaptureKey(){
console.log(this.enteredCode);
}
}
}
</script>
<template>
<v-container>
<Keypress key-event="keyup" v-model="enteredCode" :key-code="13" @success="CaptureKey()" />
</v-container>
</template>
如果可能的話，我真的不想使用輸入欄位。
謝謝
uj5u.com熱心網友回復：
也許可以使用這樣的東西？
這在不使用輸入欄位的情況下偵聽鍵事件，并在按下輸入時將其存盤到文本資料中。
<template>
<div class="text">
<label>Draft: Press enter when done.</label>
<pre>{{ draft }}</pre>
<label>Text:</label>
<pre>{{ text }}</pre>
</div>
</template>
<script>
export default {
data() {
return {
draft: "",
text: "",
};
},
methods: {
onKeyup(event) {
if (event.key === "Enter") {
this.text = this.draft "";
this.draft = "";
} else {
this.draft = event.key;
}
},
},
mounted() {
document.addEventListener("keyup", this.onKeyup);
},
beforeDestroy() {
document.removeEventListener("keyup", this.onKeyup);
},
};
</script>
演示
https://codesandbox.io/s/vue-text-input-without-input-field-d417j?file=/src/App.vue
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/414931.html
標籤：