graceNvueNumberBox.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <template>
  2. <view class="grace-number-box" :style="{width:width}">
  3. <text class="grace-number-box-doBtn" @tap.stop="reduce"
  4. :style="{
  5. width:btnSize, height:btnSize, fontSize:btnFontSize,
  6. lineHeight:btnSize, color:btnColr}">-</text>
  7. <input class="grace-number-box-input" type="number"
  8. :value="inputNumber" :disabled="disabled" @blur="inputval"
  9. :style="{
  10. backgroundColor:inputBG, height:inputHeight, lineHeight:inputHeight,
  11. fontSize:inputFontSize, color:inputColor, padding:inputPadding,
  12. borderRadius:inputBorderRadius}"></input>
  13. <text class="grace-number-box-doBtn" @tap.stop="add"
  14. :style="{width:btnSize, height:btnSize, fontSize:btnFontSize, lineHeight:btnSize, color:btnColr}">+</text>
  15. </view>
  16. </template>
  17. <script>
  18. export default {
  19. name: "graceNumberBox",
  20. props: {
  21. disabled :{
  22. type : Boolean,
  23. default : false
  24. },
  25. value : {
  26. type : Number,
  27. default : 0
  28. },
  29. index : {
  30. type : Number,
  31. default : 0
  32. },
  33. maxNum:{
  34. type: Number,
  35. default: 999999
  36. },
  37. minNum: {
  38. type: Number,
  39. default: 0
  40. },
  41. datas:{
  42. type: String,
  43. default: ''
  44. },
  45. btnSize : {
  46. type : String,
  47. default : '60rpx'
  48. },
  49. btnFontSize : {
  50. type : String,
  51. default : '36rpx'
  52. },
  53. btnColr : {
  54. type : String,
  55. default : '#666666'
  56. },
  57. inputHeight : {
  58. type : String,
  59. default : '56rpx'
  60. },
  61. inputFontSize : {
  62. type : String,
  63. default : '26rpx'
  64. },
  65. inputColor : {
  66. type : String,
  67. default : '#333333'
  68. },
  69. inputBG : {
  70. type : String,
  71. default : '#F6F7F8'
  72. },
  73. inputPadding : {
  74. type : String,
  75. default : '10rpx'
  76. },
  77. inputBorderRadius : {
  78. type : String,
  79. default : '8rpx'
  80. },
  81. width:{
  82. type : String,
  83. default : '200rpx'
  84. },
  85. step : {
  86. type : Number,
  87. default : 1
  88. }
  89. },
  90. data() {
  91. return {
  92. inputNumber: 0,
  93. callbackNumber:0
  94. }
  95. },
  96. created:function(){
  97. this.inputNumber = Number(this.value);
  98. this.callbackNumber++;
  99. },
  100. watch:{
  101. value :function(val, vo){this.inputNumber = Number(val);},
  102. inputNumber :function(val, vo){
  103. val = Number(val);
  104. if(isNaN(val)){ setTimeout(()=>{this.inputNumber = Number(vo);}, 200); return; }
  105. if(val > this.maxNum){
  106. this.$emit('change', [this.maxNum, this.index, this.datas]);
  107. setTimeout(()=>{this.inputNumber = this.maxNum;}, 200);
  108. return ;
  109. }
  110. if(val < this.minNum){
  111. this.$emit('change', [this.minNum, this.index, this.datas]);
  112. setTimeout(()=>{this.inputNumber = this.minNum;}, 200);
  113. return ;
  114. }
  115. if(val != vo && this.callbackNumber > 0){this.$emit('change', [val, this.index, this.datas]);}
  116. }
  117. },
  118. methods: {
  119. add : function(){
  120. var newVal = Number(this.inputNumber) + Number(this.step);
  121. if(newVal > this.maxNum){return ;}
  122. this.inputNumber = Number(newVal);
  123. },
  124. reduce: function () {
  125. var newVal = Number(this.inputNumber) - Number(this.step);
  126. if(newVal < this.minNum){return ;}
  127. this.inputNumber = newVal;
  128. },
  129. inputval:function (e) {
  130. this.inputNumber = e.detail.value;
  131. }
  132. }
  133. }
  134. </script>
  135. <style scoped>
  136. .grace-number-box{overflow:hidden; flex-direction:row; flex-wrap:nowrap; align-items:center;}
  137. .grace-number-box-doBtn{text-align:center; color:#666666;}
  138. .grace-number-box-input{text-align:center; width:700rpx; flex:1;}
  139. </style>