graceNumberKeyboard.nvue 3.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <template>
  2. <view>
  3. <view class="grace-mask" @tap.stop="masktap" @touchmove.stop.prevent="" v-if="show"></view>
  4. <view class="grace-keyboard" v-if="show">
  5. <text class="grace-keyboard-res" v-if="showInputRes"
  6. :style="{color:resultColor, fontSize:resultSize}">{{resVal}}</text>
  7. <view class="grace-keyboard-body">
  8. <view class="grace-keyboard-left">
  9. <text v-for="(item, index) in [1,2,3,4,5,6,7,8,9]" :key="index"
  10. class="grace-keyboard-keys" :class="[tapIndex == item ? 'keydown' : '']" :data-keynumber="item" @tap.stop="inputNow">{{item}}</text>
  11. <text class="grace-keyboard-keys" :class="[tapIndex == 0 ? 'keydown' : '']"
  12. :style="{width: isPoint ? '259rpx':'538rpx'}" data-keynumber="0" @tap.stop="inputNow">0</text>
  13. <text v-if="isPoint" class="grace-keyboard-keys" style="width:259rpx;"
  14. :class="[tapIndex == '.' ? 'keydown' : '']" data-keynumber="." @tap.stop="inputNow">.</text>
  15. </view>
  16. <view class="grace-keyboard-right">
  17. <text class="grace-keyboard-keys grace-icons"
  18. :class="[tapIndex == -3 ? 'keydown' : '']" :data-keynumber="-3" @tap.stop="deleteNow">&#xe623;</text>
  19. <text class="grace-keyboard-keys grace-keyboard-done"
  20. :style="{backgroundColor:confirmBtnColor}" @tap.stop="done">{{doneBtnName}}</text>
  21. </view>
  22. </view>
  23. </view>
  24. </view>
  25. </template>
  26. <script>
  27. export default {
  28. props: {
  29. show : { type : Boolean, default : false },
  30. doneBtnName : { type : String, default : "完成" },
  31. isPoint : { type : Boolean, default : true },
  32. showInputRes : {type : Boolean, default : true},
  33. value : {type:String, default:''},
  34. confirmBtnColor : {type:String, default:'#3688FF'},
  35. resultColor : {type:String, default:'#323232'},
  36. resultSize : {type:String, default:'32rpx'},
  37. closeByShade : {type:Boolean, default:true}
  38. },
  39. data() {
  40. return {
  41. resVal: '',
  42. tapIndex : -1
  43. }
  44. },
  45. created:function(){
  46. this.resVal = this.value+'';
  47. },
  48. methods: {
  49. inputNow : function (e){
  50. var k = e.currentTarget.dataset.keynumber;
  51. this.resVal += k+'';
  52. this.tapIndex = k;
  53. this.$emit('keyboardInput', k);
  54. this.removeClass();
  55. },
  56. deleteNow : function (e){
  57. var k = e.currentTarget.dataset.keynumber;
  58. this.tapIndex = k;
  59. this.resVal = this.resVal.substring(0, this.resVal.length - 1);
  60. this.$emit('keyboardDelete');
  61. this.removeClass();
  62. },
  63. done : function(){
  64. this.tapIndex = -3;
  65. this.$emit('keyboardDone');
  66. this.removeClass();
  67. },
  68. setVal : function (val) {
  69. this.resVal = val;
  70. },
  71. removeClass : function () {
  72. setTimeout(()=>{this.tapIndex = -1;}, 200);
  73. },
  74. masktap : function(){
  75. if(!this.closeByShade){return ;}
  76. this.done();
  77. }
  78. }
  79. }
  80. </script>
  81. <style scoped>
  82. .grace-mask{background-color:rgba(255, 255, 255, 0); position:fixed; width:750rpx; flex:1; left:0; top:0; bottom:0;}
  83. .grace-keyboard{background-color:#F4F5F6; position:fixed; width:750rpx; left:0; bottom:0;}
  84. .grace-keyboard-body{flex-direction:row; justify-content:space-between; padding:10px 0;}
  85. .grace-keyboard-left{width:560rpx; flex-direction:row; flex-wrap:wrap; justify-content:space-between;}
  86. .grace-keyboard-right{width:188rpx; flex-direction:column; justify-content:space-between;}
  87. .grace-keyboard-keys{width:166rpx; height:100rpx; margin:10rpx; background-color:#FFFFFF; text-align:center; line-height:100rpx; border-radius:8rpx; font-weight:700; font-size:50rpx;}
  88. .grace-keyboard-done{height:340rpx; line-height:340rpx; font-size:36rpx; font-weight:400; color:#FFFFFF;}
  89. .grace-keyboard-res{line-height:60rpx; text-align:center; font-size:32rpx; font-weight:bold; padding-top:20rpx;}
  90. .keydown{background-color:#3688FF; color:#FFFFFF;}
  91. </style>