codecook-carnumber.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. <template>
  2. <view class="car-number">
  3. <view class="new-energy">新能源</view>
  4. <view class="wrap" @tap="focusHandler">
  5. <view
  6. :class="[
  7. 'cell',
  8. { last: index === length - 1 },
  9. { 'no-border': index === length - 1 || index === length - 2 },
  10. { active: index === current },
  11. ]"
  12. v-for="(val, index) in fill"
  13. :key="index"
  14. @tap.stop="focusHandler(index)"
  15. >
  16. <view class="val">{{ val }}</view>
  17. <view class="border"></view>
  18. </view>
  19. </view>
  20. <key-board
  21. v-if="focus"
  22. :type="kType"
  23. @on-delete="keyDeleteHandler"
  24. @on-input="keyInputHandler"
  25. @on-hide="keyHideHandler"
  26. ></key-board>
  27. </view>
  28. </template>
  29. <script>
  30. import KeyBoard from "../codecook-keyboard/codecook-keyboard.vue";
  31. export default {
  32. name: "CarNumber",
  33. components: {
  34. KeyBoard,
  35. },
  36. props: {
  37. value: {
  38. type: String,
  39. default: "",
  40. },
  41. length: {
  42. type: Number,
  43. default: 8,
  44. },
  45. },
  46. data() {
  47. return {
  48. focus: false,
  49. current: 0,
  50. fill: new Array(this.length).fill(""),
  51. };
  52. },
  53. computed: {
  54. kType() {
  55. return this.current === 0 ? "provinces" : "areas";
  56. },
  57. },
  58. watch: {
  59. // value(e) {
  60. // if (e.length == 7 || e.length == 8) {
  61. // this.fill = e.split("");
  62. // console.log(this.fill.length);
  63. // }
  64. // },
  65. fill(val) {
  66. console.log(val);
  67. this.$emit("input", val.join(""));
  68. this.$emit("change", val);
  69. },
  70. },
  71. methods: {
  72. setCarNumValue(e) {
  73. this.fill = e.split("");
  74. },
  75. focusHandler(index = 0) {
  76. this.focus = true;
  77. this.current = index;
  78. console.log(this.current);
  79. },
  80. keyDeleteHandler() {
  81. this.$set(this.fill, this.current, "");
  82. if (this.current <= 0) {
  83. return;
  84. }
  85. this.current -= 1;
  86. },
  87. keyInputHandler(key) {
  88. this.$set(this.fill, this.current, key);
  89. if (this.current >= this.length - 1) {
  90. return;
  91. }
  92. this.current += 1;
  93. },
  94. keyHideHandler() {
  95. this.focus = false;
  96. },
  97. },
  98. beforeMount() {
  99. if (this.value) {
  100. this.value.split("").forEach((key, index) => {
  101. if (index >= this.length) {
  102. return;
  103. }
  104. this.$set(this.fill, index, key);
  105. });
  106. this.current = Math.min(this.value.length, this.length - 1);
  107. }
  108. },
  109. mounted() {
  110. // this.focus = true;
  111. },
  112. };
  113. </script>
  114. <style scoped lang="less">
  115. .car-number {
  116. position: relative;
  117. width: 100%;
  118. .wrap {
  119. width: 100%;
  120. height: 100%;
  121. display: flex;
  122. justify-content: space-between;
  123. border: 1rpx solid #e6e6e6;
  124. box-sizing: border-box;
  125. border-radius: 8rpx;
  126. box-shadow: 0rpx 6rpx 6rpx 0rpx rgba(128, 128, 128, 0.1);
  127. padding: 15rpx 0;
  128. }
  129. .new-energy {
  130. font-size: 24rpx;
  131. color: #333232;
  132. margin-bottom: 13rpx;
  133. display: flex;
  134. flex-direction: row-reverse;
  135. padding-right: 5rpx;
  136. }
  137. .cell {
  138. box-sizing: border-box;
  139. padding: 14rpx 0;
  140. flex: 1;
  141. color: #666666;
  142. font-size: 34rpx;
  143. border-right: 1rpx solid #cccccc;
  144. text-align: center;
  145. border-bottom: 1rpx solid transparent;
  146. box-sizing: border-box;
  147. padding: 0 10rpx;
  148. display: flex;
  149. flex-direction: column;
  150. position: relative;
  151. height: 70rpx;
  152. .val {
  153. flex: 1;
  154. display: flex;
  155. align-items: center;
  156. justify-content: center;
  157. }
  158. .border {
  159. flex-shrink: 0;
  160. flex-grow: 0;
  161. height: 2rpx;
  162. background: transparent;
  163. width: 100%;
  164. }
  165. &.active {
  166. .border {
  167. background: #fe8525;
  168. }
  169. }
  170. &.no-border {
  171. border-right: none;
  172. }
  173. &.last:after {
  174. content: "";
  175. width: 100%;
  176. border: 2px solid #00ff00;
  177. border-radius: 8rpx;
  178. margin: -18rpx 0;
  179. position: absolute;
  180. top: 0;
  181. right: 0;
  182. bottom: 0;
  183. left: 0;
  184. box-sizing: border-box;
  185. }
  186. }
  187. }
  188. </style>