codeInput.nvue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. <template>
  2. <view class="u-page">
  3. <view class="u-demo-block">
  4. <text class="u-demo-block__title">基础使用</text>
  5. <view class="u-demo-block__content">
  6. <u-code-input
  7. v-model="value1"
  8. :maxlength="4"
  9. @change="change"
  10. @finish="finish"
  11. ></u-code-input>
  12. </view>
  13. </view>
  14. <view class="u-demo-block">
  15. <text class="u-demo-block__title">横线模式</text>
  16. <view class="u-demo-block__content">
  17. <u-code-input
  18. v-model="value2"
  19. mode="line"
  20. :maxlength="4"
  21. :bold="true"
  22. ></u-code-input>
  23. </view>
  24. </view>
  25. <view class="u-demo-block">
  26. <text class="u-demo-block__title">设置长度</text>
  27. <view class="u-demo-block__content">
  28. <u-code-input
  29. v-model="value3"
  30. :maxlength="6"
  31. ></u-code-input>
  32. </view>
  33. </view>
  34. <view class="u-demo-block">
  35. <text class="u-demo-block__title">设置间距</text>
  36. <view class="u-demo-block__content">
  37. <u-code-input
  38. v-model="value4"
  39. mode="box"
  40. :space="0"
  41. :maxlength="4"
  42. ></u-code-input>
  43. </view>
  44. </view>
  45. <view class="u-demo-block">
  46. <text class="u-demo-block__title">细边框</text>
  47. <view class="u-demo-block__content">
  48. <u-code-input
  49. v-model="value5"
  50. mode="box"
  51. :space="0"
  52. :maxlength="4"
  53. hairline
  54. ></u-code-input>
  55. </view>
  56. <view
  57. class="u-demo-block__content"
  58. style="margin-top: 10px;"
  59. >
  60. <u-code-input
  61. v-model="value6"
  62. mode="line"
  63. :space="10"
  64. :maxlength="4"
  65. hairline
  66. ></u-code-input>
  67. </view>
  68. </view>
  69. <view class="u-demo-block">
  70. <text class="u-demo-block__title">调整颜色</text>
  71. <view class="u-demo-block__content">
  72. <u-code-input
  73. v-model="value7"
  74. mode="box"
  75. :space="0"
  76. :maxlength="4"
  77. hairline
  78. color="#f56c6c"
  79. borderColor="#f56c6c"
  80. ></u-code-input>
  81. <view class="u-demo-block__content" style="margin-top: 10px;">
  82. <u-code-input
  83. v-model="value10"
  84. mode="line"
  85. size="30"
  86. :maxlength="4"
  87. hairline
  88. color="#3c9cff"
  89. borderColor="#3c9cff"
  90. ></u-code-input>
  91. </view>
  92. </view>
  93. </view>
  94. <view class="u-demo-block">
  95. <text class="u-demo-block__title">点模式</text>
  96. <view class="u-demo-block__content">
  97. <u-code-input
  98. v-model="value8"
  99. mode="box"
  100. dot
  101. :space="0"
  102. :maxlength="4"
  103. hairline
  104. ></u-code-input>
  105. </view>
  106. </view>
  107. <view class="u-demo-block">
  108. <text class="u-demo-block__title">预置内容</text>
  109. <view class="u-demo-block__content">
  110. <u-code-input
  111. v-model="value9"
  112. mode="box"
  113. :space="0"
  114. :maxlength="4"
  115. hairline
  116. fontSize="17"
  117. ></u-code-input>
  118. </view>
  119. </view>
  120. </view>
  121. </template>
  122. <script>
  123. export default {
  124. data() {
  125. return {
  126. value1: '',
  127. value2: '',
  128. value3: '',
  129. value4: '',
  130. value5: '',
  131. value6: '',
  132. value7: '',
  133. value8: '',
  134. value9: '123',
  135. value10: '34'
  136. }
  137. },
  138. methods: {
  139. change(e) {
  140. console.log('change', e);
  141. },
  142. finish(e) {
  143. console.log('finish', e);
  144. }
  145. },
  146. }
  147. </script>
  148. <style lang="scss">
  149. </style>