index.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <template>
  2. <demo-section>
  3. <demo-block :title="$t('basicUsage')">
  4. <van-password-input
  5. :value="value1"
  6. :info="$t('info')"
  7. @focus="keyboard = 'value1'"
  8. />
  9. <van-number-keyboard
  10. :show="!!keyboard"
  11. @input="onInput"
  12. @delete="onDelete"
  13. @blur="keyboard = ''"
  14. />
  15. </demo-block>
  16. <demo-block :title="$t('removeMask')">
  17. <van-password-input
  18. :value="value2"
  19. :mask="false"
  20. @focus="keyboard = 'value2'"
  21. />
  22. </demo-block>
  23. </demo-section>
  24. </template>
  25. <script>
  26. export default {
  27. i18n: {
  28. 'zh-CN': {
  29. info: '密码为 6 位数字',
  30. removeMask: '明文展示'
  31. },
  32. 'en-US': {
  33. info: 'Some tips',
  34. removeMask: 'Remove Mask'
  35. }
  36. },
  37. data() {
  38. return {
  39. value1: '123',
  40. value2: '123',
  41. keyboard: 'value1'
  42. };
  43. },
  44. methods: {
  45. onInput(key) {
  46. const { keyboard } = this;
  47. this[keyboard] = (this[keyboard] + key).slice(0, 6);
  48. },
  49. onDelete() {
  50. const { keyboard } = this;
  51. this[keyboard] = this[keyboard].slice(0, this[keyboard].length - 1);
  52. }
  53. }
  54. };
  55. </script>