index.vue 1.6 KB

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