index.vue 1.3 KB

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