number.vue 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <template>
  2. <view class="fs-keyboard-number" v-if="modelValue">
  3. <fs-grid border>
  4. <fs-grid-item v-for="item in 9" :key="item" class="fs-keyboard-number-item" @click="handleClick(item)">
  5. {{item}}
  6. </fs-grid-item>
  7. <fs-grid-item class="fs-keyboard-number-item fs-keyboard-number-bg"></fs-grid-item>
  8. <fs-grid-item class="fs-keyboard-number-item" @click="handleClick(0)">0</fs-grid-item>
  9. <fs-grid-item class="fs-keyboard-number-item fs-keyboard-number-bg" @click="handleClick('del')">
  10. <fs-icon type="icon-backspace" size="60rpx"></fs-icon>
  11. </fs-grid-item>
  12. </fs-grid>
  13. </view>
  14. </template>
  15. <script setup>
  16. const props = defineProps({
  17. modelValue: Boolean,
  18. index: {
  19. type: Number,
  20. default: 0
  21. }
  22. })
  23. const emits = defineEmits(['update:modelValue', 'update:index', 'change', 'close'])
  24. const handleClick = item => {
  25. emits('change', item)
  26. }
  27. </script>
  28. <style lang="scss">
  29. .fs-keyboard-number{
  30. position: fixed;
  31. bottom: 0;
  32. left: 0;
  33. right: 0;
  34. z-index: 999;
  35. &-item{
  36. font-size: 24px;
  37. }
  38. &-bg{
  39. background-color: #e7e6eb;
  40. }
  41. }
  42. </style>