index.vue 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <template>
  2. <view>
  3. <view>监听到的内容:{{ inputString }}</view>
  4. <view class="">
  5. --------------------分割线-----------------------------
  6. </view>
  7. <view class="">
  8. {{text}}
  9. </view>
  10. </view>
  11. </template>
  12. <script>
  13. export default {
  14. data() {
  15. return {
  16. inputString: '',
  17. inputCache: '',
  18. text:'',
  19. };
  20. },
  21. methods: {
  22. onConfirm(text) {
  23. alert(JSON.stringify(text))
  24. console.log('拿到的text', text);
  25. // 此处写我们自己的逻辑
  26. this.text = text;
  27. },
  28. keypress(e) {
  29. alert(JSON.stringify(e))
  30. if (e.keyCode === 66 || e.key === 'Enter') {
  31. this.inputString = this.inputCache;
  32. this.onConfirm(this.inputString);
  33. this.inputCache = '';
  34. } else {
  35. this.inputCache += e.key;
  36. }
  37. }
  38. },
  39. mounted() {
  40. // #ifdef APP-PLUS
  41. plus.key.addEventListener("keyup", this.keypress);
  42. // #endif
  43. // #ifdef H5
  44. document.addEventListener("keyup", this.keypress);
  45. // #endif
  46. },
  47. beforeDestroy() {
  48. // #ifdef APP-PLUS
  49. plus.key.removeEventListener("keyup", this.keypress);
  50. // #endif
  51. // #ifdef H5
  52. document.removeEventListener("keyup", this.keypress);
  53. // #endif
  54. },
  55. deactivated() {
  56. // #ifdef APP-PLUS
  57. plus.key.removeEventListener("keyup", this.keypress);
  58. // #endif
  59. // #ifdef H5
  60. document.removeEventListener("keyup", this.keypress);
  61. // #endif
  62. }
  63. };
  64. </script>