学员端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

252 lines
7.3 KiB

1 year ago
  1. <template>
  2. <view class="u-code-input">
  3. <view
  4. class="u-code-input__item"
  5. :style="[itemStyle(index)]"
  6. v-for="(item, index) in codeLength"
  7. :key="index"
  8. >
  9. <view
  10. class="u-code-input__item__dot"
  11. v-if="dot && codeArray.length > index"
  12. ></view>
  13. <text
  14. v-else
  15. :style="{
  16. fontSize: $u.addUnit(fontSize),
  17. fontWeight: bold ? 'bold' : 'normal',
  18. color: color
  19. }"
  20. >{{codeArray[index]}}</text>
  21. <view
  22. class="u-code-input__item__line"
  23. v-if="mode === 'line'"
  24. :style="[lineStyle]"
  25. ></view>
  26. <!-- #ifndef APP-PLUS -->
  27. <view v-if="isFocus && codeArray.length === index" :style="{backgroundColor: color}" class="u-code-input__item__cursor"></view>
  28. <!-- #endif -->
  29. </view>
  30. <input
  31. :disabled="disabledKeyboard"
  32. type="number"
  33. :focus="focus"
  34. :value="inputValue"
  35. :maxlength="maxlength"
  36. :adjustPosition="adjustPosition"
  37. class="u-code-input__input"
  38. @input="inputHandler"
  39. :style="{
  40. height: $u.addUnit(size)
  41. }"
  42. @focus="isFocus = true"
  43. @blur="isFocus = false"
  44. />
  45. </view>
  46. </template>
  47. <script>
  48. import props from './props.js';
  49. /**
  50. * CodeInput 验证码输入
  51. * @description 该组件一般用于验证用户短信验证码的场景也可以结合uView的键盘组件使用
  52. * @tutorial https://www.uviewui.com/components/codeInput.html
  53. * @property {String | Number} maxlength 最大输入长度 默认 6
  54. * @property {Boolean} dot 是否用圆点填充 默认 false
  55. * @property {String} mode 显示模式box-盒子模式line-底部横线模式 默认 'box'
  56. * @property {Boolean} hairline 是否细边框 默认 false
  57. * @property {String | Number} space 字符间的距离 默认 10
  58. * @property {String | Number} value 预置值
  59. * @property {Boolean} focus 是否自动获取焦点 默认 false
  60. * @property {Boolean} bold 字体和输入横线是否加粗 默认 false
  61. * @property {String} color 字体颜色 默认 '#606266'
  62. * @property {String | Number} fontSize 字体大小单位px 默认 18
  63. * @property {String | Number} size 输入框的大小宽等于高 默认 35
  64. * @property {Boolean} disabledKeyboard 是否隐藏原生键盘如果想用自定义键盘的话需设置此参数为true 默认 false
  65. * @property {String} borderColor 边框和线条颜色 默认 '#c9cacc'
  66. * @property {Boolean} disabledDot 是否禁止输入"."符号 默认 true
  67. *
  68. * @event {Function} change 输入内容发生改变时触发具体见上方说明 value当前输入的值
  69. * @event {Function} finish 输入字符个数达maxlength值时触发见上方说明 value当前输入的值
  70. * @example <u-code-input v-model="value4" :focus="true"></u-code-input>
  71. */
  72. export default {
  73. name: 'u-code-input',
  74. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  75. data() {
  76. return {
  77. inputValue: '',
  78. isFocus: this.focus
  79. }
  80. },
  81. watch: {
  82. value: {
  83. immediate: true,
  84. handler(val) {
  85. // 转为字符串,超出部分截掉
  86. this.inputValue = String(val).substring(0, this.maxlength)
  87. }
  88. },
  89. },
  90. computed: {
  91. // 根据长度,循环输入框的个数,因为头条小程序数值不能用于v-for
  92. codeLength() {
  93. return new Array(Number(this.maxlength))
  94. },
  95. // 循环item的样式
  96. itemStyle() {
  97. return index => {
  98. const addUnit = uni.$u.addUnit
  99. const style = {
  100. width: addUnit(this.size),
  101. height: addUnit(this.size)
  102. }
  103. // 盒子模式下,需要额外进行处理
  104. if (this.mode === 'box') {
  105. // 设置盒子的边框,如果是细边框,则设置为0.5px宽度
  106. style.border = `${this.hairline ? 0.5 : 1}px solid ${this.borderColor}`
  107. // 如果盒子间距为0的话
  108. if (uni.$u.getPx(this.space) === 0) {
  109. // 给第一和最后一个盒子设置圆角
  110. if (index === 0) {
  111. style.borderTopLeftRadius = '3px'
  112. style.borderBottomLeftRadius = '3px'
  113. }
  114. if (index === this.codeLength.length - 1) {
  115. style.borderTopRightRadius = '3px'
  116. style.borderBottomRightRadius = '3px'
  117. }
  118. // 最后一个盒子的右边框需要保留
  119. if (index !== this.codeLength.length - 1) {
  120. style.borderRight = 'none'
  121. }
  122. }
  123. }
  124. if (index !== this.codeLength.length - 1) {
  125. // 设置验证码字符之间的距离,通过margin-right设置,最后一个字符,无需右边框
  126. style.marginRight = addUnit(this.space)
  127. } else {
  128. // 最后一个盒子的有边框需要保留
  129. style.marginRight = 0
  130. }
  131. return style
  132. }
  133. },
  134. // 将输入的值,转为数组,给item历遍时,根据当前的索引显示数组的元素
  135. codeArray() {
  136. return String(this.inputValue).split('')
  137. },
  138. // 下划线模式下,横线的样式
  139. lineStyle() {
  140. const style = {}
  141. style.height = this.hairline ? '2px' : '4px'
  142. style.width = uni.$u.addUnit(this.size)
  143. // 线条模式下,背景色即为边框颜色
  144. style.backgroundColor = this.borderColor
  145. return style
  146. }
  147. },
  148. methods: {
  149. // 监听输入框的值发生变化
  150. inputHandler(e) {
  151. const value = e.detail.value
  152. this.inputValue = value
  153. // 是否允许输入“.”符号
  154. if(this.disabledDot) {
  155. this.$nextTick(() => {
  156. this.inputValue = value.replace('.', '')
  157. })
  158. }
  159. // 未达到maxlength之前,发送change事件,达到后发送finish事件
  160. this.$emit('change', value)
  161. // 修改通过v-model双向绑定的值
  162. this.$emit('input', value)
  163. // 达到用户指定输入长度时,发出完成事件
  164. if (String(value).length >= Number(this.maxlength)) {
  165. this.$emit('finish', value)
  166. }
  167. }
  168. }
  169. }
  170. </script>
  171. <style lang="scss" scoped>
  172. @import "../../libs/css/components.scss";
  173. $u-code-input-cursor-width: 1px;
  174. $u-code-input-cursor-height: 40%;
  175. $u-code-input-cursor-animation-duration: 1s;
  176. $u-code-input-cursor-animation-name: u-cursor-flicker;
  177. .u-code-input {
  178. @include flex;
  179. position: relative;
  180. overflow: hidden;
  181. &__item {
  182. @include flex;
  183. justify-content: center;
  184. align-items: center;
  185. position: relative;
  186. &__text {
  187. font-size: 15px;
  188. color: $u-content-color;
  189. }
  190. &__dot {
  191. width: 7px;
  192. height: 7px;
  193. border-radius: 100px;
  194. background-color: $u-content-color;
  195. }
  196. &__line {
  197. position: absolute;
  198. bottom: 0;
  199. height: 4px;
  200. border-radius: 100px;
  201. width: 40px;
  202. background-color: $u-content-color;
  203. }
  204. /* #ifndef APP-PLUS */
  205. &__cursor {
  206. position: absolute;
  207. top: 50%;
  208. left: 50%;
  209. transform: translate(-50%,-50%);
  210. width: $u-code-input-cursor-width;
  211. height: $u-code-input-cursor-height;
  212. animation: $u-code-input-cursor-animation-duration u-cursor-flicker infinite;
  213. }
  214. /* #endif */
  215. }
  216. &__input {
  217. // 之所以需要input输入框,是因为有它才能唤起键盘
  218. // 这里将它设置为两倍的屏幕宽度,再将左边的一半移出屏幕,为了不让用户看到输入的内容
  219. position: absolute;
  220. left: -750rpx;
  221. width: 1500rpx;
  222. top: 0;
  223. background-color: transparent;
  224. text-align: left;
  225. }
  226. }
  227. /* #ifndef APP-PLUS */
  228. @keyframes u-cursor-flicker {
  229. 0% {
  230. opacity: 0;
  231. }
  232. 50% {
  233. opacity: 1;
  234. }
  235. 100% {
  236. opacity: 0;
  237. }
  238. }
  239. /* #endif */
  240. </style>