number-keyboard.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. <template>
  2. <view :class="['KeyboarBody','bottomMove', 'bodMove', bodMove]" v-if="KeyboarHid">
  3. <view @tap="close" class="dowmImgBx">
  4. <view class="dowmImg"></view>
  5. </view>
  6. <view class="KeyboarBx">
  7. <view v-for="(num , index) in keyboardNum " :key='index' @tap="clickBoard(num)" hover-class="hover"
  8. :hover-stay-time='20' class="keyboar">
  9. {{num}}
  10. </view>
  11. <view @tap="clickBoard(otherNum)" :class="['keyboar',otherNum==''?'empty':'']" :hover-stay-time='20' hover-class="hover">{{otherNum}}</view>
  12. <view @tap="clickBoard('0')" hover-class="hover" :hover-stay-time='20' class="keyboar">0</view>
  13. <view @tap="deleteKeyboar()" class="keyboar keyboarflex" :hover-stay-time='20' hover-class="hover">
  14. <view class="keyboarDel"></view>
  15. </view>
  16. </view>
  17. </view>
  18. </template>
  19. <script>
  20. export default {
  21. props: {
  22. //限制输入框的长度 空值不限制
  23. psdLength: {
  24. type: [Number, String],
  25. default: ''
  26. },
  27. //键盘码
  28. keyboardNum: {
  29. type: [Array, Object],
  30. default: () => {
  31. return [1, 2, 3, 4, 5, 6, 7, 8, 9]
  32. }
  33. },
  34. //特殊键盘码 .或者X 默空
  35. otherNum: {
  36. type: String,
  37. default: ''
  38. },
  39. //是否在需要打开键盘时隐藏底部tabBar关闭键盘展示tabBar功能
  40. tabBar: {
  41. type: Boolean,
  42. default: false
  43. },
  44. value: {
  45. type: String,
  46. default: ''
  47. }
  48. },
  49. data() {
  50. return {
  51. bodMove: '',
  52. password: '', //要返回的结果
  53. iptNum: [], //输入的内容
  54. KeyboarHid: false, //键盘影藏和显示
  55. }
  56. },
  57. watch: {
  58. iptNum(newVal, oldVal) {
  59. this.$emit('input', newVal.join(''))
  60. },
  61. value(newVal, oldVal) {
  62. this.iptNum = newVal.split('')
  63. }
  64. },
  65. created() {
  66. },
  67. methods: {
  68. open() {
  69. this.KeyboarHid = true;
  70. if (this.tabBar) {
  71. uni.hideTabBar()
  72. }
  73. this.$nextTick(() => {
  74. setTimeout(() => {
  75. this.bodMove = 'moveShow'
  76. }, 30)
  77. })
  78. },
  79. close() {
  80. if (this.tabBar) {
  81. uni.showTabBar()
  82. }
  83. this.bodMove = '';
  84. this.$nextTick(() => {
  85. setTimeout(() => {
  86. this.KeyboarHid = false
  87. }, 300)
  88. })
  89. },
  90. // 密码框
  91. clickBoard(num) {
  92. if (num == '') return;
  93. let iptNum = this.iptNum.filter(item => item != '');
  94. //判断是否限制长度
  95. if (this.psdLength != '') {
  96. if (iptNum.length >= this.psdLength) {
  97. return
  98. };
  99. this.iptNum.push(num);
  100. } else {
  101. this.iptNum.push(num);
  102. }
  103. },
  104. //重置 清空
  105. reset() {
  106. this.iptNum = [];
  107. },
  108. //删除
  109. deleteKeyboar() {
  110. this.iptNum.pop();
  111. }
  112. }
  113. }
  114. </script>
  115. <style scoped>
  116. .bodMove {
  117. transition: all .3s
  118. }
  119. .bottomMove {
  120. bottom: 0;
  121. left: 0;
  122. width: 100%;
  123. transform: translateY(100%)
  124. }
  125. .moveShow {
  126. transform: translateY(0)
  127. }
  128. .KeyboarBody {
  129. position: fixed;
  130. bottom: 0;
  131. left: 0;
  132. right: 0;
  133. z-index: 99;
  134. background-color: #FFFFFF;
  135. }
  136. .KeyboarBx {
  137. display: flex;
  138. flex-wrap: wrap;
  139. text-align: center;
  140. background-color: rgba(3, 3, 3, 0.1);
  141. padding: 10rpx 6rpx 0rpx 6rpx;
  142. margin-left: -12rpx;
  143. }
  144. .keyboar {
  145. width: 20%;
  146. flex-grow: 1;
  147. padding: 3%;
  148. font-size: 40rpx;
  149. background-color: #FFFFFF;
  150. border-radius: 10rpx;
  151. margin-left: 12rpx;
  152. margin-bottom: 10rpx;
  153. box-sizing: initial;
  154. }
  155. .dian {
  156. margin-top: -10rpx;
  157. }
  158. .keyboarBtn {
  159. background: linear-gradient(45deg, rgba(242, 131, 9, 1) 0%, rgba(230, 36, 15, 1) 100%);
  160. color: #fff;
  161. }
  162. .hover {
  163. background: #ebedf0;
  164. }
  165. .bot {
  166. bottom: 0;
  167. }
  168. .empty {
  169. background-color: #EEEEEE;
  170. }
  171. .dowmImgBx {
  172. display: flex;
  173. justify-content: center;
  174. border-top: 1rpx solid A1A1A1;
  175. }
  176. .dowmImg {
  177. width: 35rpx;
  178. height: 35rpx;
  179. margin-bottom: 10rpx;
  180. background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACT0lEQVRYR+2UPWgTYRjH/8/dpdZCpVhU/BoEB8FBEBFt7tJe7i5CbAXhrg6CQ8HBQXAQHBzq5CA4CA4OgoNgr0GQIhQTUkJqCPEDBEEQBAdBQSoVlIakXvLIofmopMnlizjkxuN9nt/v/b/v+xB6/FGP+egL9BPoJ/D/JLC8/Hp33sl9AXDOCMqRbsyH6NLzGwLR7BapuDMQCKy4jHICi5nMNinrpAk4DOC8EZQfdVKiBGemxyHNb5V6bziCaDRxSPT5bAaOCAJd0Cb8DzshUYIT4cnqit+anqZCTQH357NE+qDIhXmAjoJpxtD8D9qRqOwcT538DyscDuer+9W8hNFo8oDok2wGHxcIFzVVvt+KRAkOYDG3NmhNTR3L/ttn01eQTL7cv+6sz4NwkhmXQpp8rxmJ8s6B2NAATFmWf9aqr/sMY7HUHsEHmxkKGJcNTb7rRaKyc1rKZ4vW5KTyfbO6hnMgHo/vYmHQBjBBxFd0VblTT6IC56REjqmq6rd66xsKuMXx+ItRFn/ZYOhMfDWkKrdrNa068xQVJVPXT3xtlJgnAbdJIpEYcViyATpFoGt60H+runkVPCOwYGra2OdG8A2DyMvihYXU8NAwzQF8moDrelC+6daV4YRXcNg0DOWTl35NC7gF6XR661qu6N6JMwzMMrPgjlcw3hCzqevKR6/wlgTcokjk3cDI6KpNRGf/wt6yWDBD4+MfmoG3LPBHIiJu37F3jsH7JAgzqjr2vll4WwKtwJoeRJ2CtD0HuinieQ50S6Iv0E+g5wn8Bo+vyyFXaYw2AAAAAElFTkSuQmCC');
  181. background-repeat: no-repeat;
  182. background-position: center center;
  183. background-size: 100%;
  184. }
  185. .keyboarDel {
  186. width: 50rpx;
  187. height: 36rpx;
  188. margin-bottom: 10rpx;
  189. background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABqUlEQVRYR+2WPUvEQBCGZze1/8DKUnsrEcVaLhvwCgULCy1sLGzFE8RKC0EsBLGwEBRuhmChlTb+hCu0vU4Ff4H3SkKCOS4fezHnNUkXQuZ58s7sbhSN+VJj5lMtUCdglYDrurNKqSMiWqpoaD+IaI6Z3woFjDErRHRJRBMVweMyz8y8mCsQwW8rBtsJjBgeSGQn8A/wbAFbOIBHpdQnEa2ltKijlHoBsJnTvsEEbOFR0SYz37mu21JK7SdAnV6v1wzutdYda4Eh4XHdDWa+Skgk4cHwzlgJlISHtQHsiMhpIAEgXDFa6yL47wx4njcJoPuXpQZgT0QOG43GtCW8fwiNMYFxsOGUucLYAXz7vv+aMhNZNfuHsKRECHcc5wvAAxFdM/OxpUTqKhgmifjLu47j3BPRfDQTWyJyYSGRvhHZJgHgQERanuf5AJaTOQNYFZEbY8wTES1k9CB3JxwmiTJzk78VB09tkyhLzz0L4qIjlig+jkechJ1AJHFGRNt/iHvgVQC7InJS+EeUaMc6gKkqJLTW7+12+zyoZS1QBTitRi1QJzD2BH4AtrHfITKVMwgAAAAASUVORK5CYII=');
  190. background-repeat: no-repeat;
  191. background-position: center center;
  192. background-size: 100%;
  193. margin-top: 11rpx;
  194. }
  195. .keyboarflex {
  196. display: flex;
  197. justify-content: center;
  198. align-items: center;
  199. }
  200. </style>