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.

311 lines
7.9 KiB

3 years ago
  1. <template>
  2. <view class="u-char-box">
  3. <view class="u-char-flex">
  4. <input :disabled="disabledKeyboard" :value="valueModel" type="number" :focus="focus" :maxlength="maxlength" class="u-input" @input="getVal"/>
  5. <view v-for="(item, index) in loopCharArr" :key="index">
  6. <view :class="[breathe && charArrLength == index ? 'u-breathe' : '', 'u-char-item',
  7. charArrLength === index && mode == 'box' ? 'u-box-active' : '',
  8. mode === 'box' ? 'u-box' : '']" :style="{
  9. fontWeight: bold ? 'bold' : 'normal',
  10. fontSize: fontSize + 'rpx',
  11. width: width + 'rpx',
  12. height: width + 'rpx',
  13. color: inactiveColor,
  14. borderColor: charArrLength === index && mode == 'box' ? activeColor : inactiveColor
  15. }">
  16. <view class="u-placeholder-line" :style="{
  17. display: charArrLength === index ? 'block' : 'none',
  18. height: width * 0.5 +'rpx'
  19. }"
  20. v-if="mode !== 'middleLine'"
  21. ></view>
  22. <view v-if="mode === 'middleLine' && charArrLength <= index" :class="[breathe && charArrLength == index ? 'u-breathe' : '', charArrLength === index ? 'u-middle-line-active' : '']"
  23. class="u-middle-line" :style="{height: bold ? '4px' : '2px', background: charArrLength === index ? activeColor : inactiveColor}"></view>
  24. <view v-if="mode === 'bottomLine'" :class="[breathe && charArrLength == index ? 'u-breathe' : '', charArrLength === index ? 'u-buttom-line-active' : '']"
  25. class="u-bottom-line" :style="{height: bold ? '4px' : '2px', background: charArrLength === index ? activeColor : inactiveColor}"></view>
  26. <block v-if="!dotFill"> {{ charArr[index] ? charArr[index] : ''}}</block>
  27. <block v-else>
  28. <text class="u-dot">{{ charArr[index] ? '●' : ''}}</text>
  29. </block>
  30. </view>
  31. </view>
  32. </view>
  33. </view>
  34. </template>
  35. <script>
  36. /**
  37. * messageInput 验证码输入框
  38. * @description 该组件一般用于验证用户短信验证码的场景也可以结合uView的键盘组件使用
  39. * @tutorial https://www.uviewui.com/components/messageInput.html
  40. * @property {String Number} maxlength 输入字符个数默认4
  41. * @property {Boolean} dot-fill 是否用圆点填充默认false
  42. * @property {String} mode 模式选择见上方"基本使用"说明默认box
  43. * @property {String Number} value 预置值
  44. * @property {Boolean} breathe 是否开启呼吸效果见上方说明默认true
  45. * @property {Boolean} focus 是否自动获取焦点默认false
  46. * @property {Boolean} bold 字体和输入横线是否加粗默认true
  47. * @property {String Number} font-size 字体大小单位rpx默认60
  48. * @property {String} active-color 当前激活输入框的样式默认#2979ff
  49. * @property {String} inactive-color 非激活输入框的样式文字颜色同此值默认#606266
  50. * @property {String | Number} width 输入框宽度单位rpx高等于宽默认80
  51. * @property {Boolean} disabled-keyboard 禁止点击输入框唤起系统键盘默认false
  52. * @event {Function} change 输入内容发生改变时触发具体见官网说明
  53. * @event {Function} finish 输入字符个数达maxlength值时触发见官网说明
  54. * @example <u-message-input mode="bottomLine"></u-message-input>
  55. */
  56. export default {
  57. name: "u-message-input",
  58. props: {
  59. // 最大输入长度
  60. maxlength: {
  61. type: [Number, String],
  62. default: 4
  63. },
  64. // 是否用圆点填充
  65. dotFill: {
  66. type: Boolean,
  67. default: false
  68. },
  69. // 显示模式,box-盒子模式,bottomLine-横线在底部模式,middleLine-横线在中部模式
  70. mode: {
  71. type: String,
  72. default: "box"
  73. },
  74. // 预置值
  75. value: {
  76. type: [String, Number],
  77. default: ''
  78. },
  79. // 当前激活输入item,是否带有呼吸效果
  80. breathe: {
  81. type: Boolean,
  82. default: true
  83. },
  84. // 是否自动获取焦点
  85. focus: {
  86. type: Boolean,
  87. default: false
  88. },
  89. // 字体是否加粗
  90. bold: {
  91. type: Boolean,
  92. default: false
  93. },
  94. // 字体大小
  95. fontSize: {
  96. type: [String, Number],
  97. default: 60
  98. },
  99. // 激活样式
  100. activeColor: {
  101. type: String,
  102. default: '#2979ff'
  103. },
  104. // 未激活的样式
  105. inactiveColor: {
  106. type: String,
  107. default: '#606266'
  108. },
  109. // 输入框的大小,单位rpx,宽等于高
  110. width: {
  111. type: [Number, String],
  112. default: '80'
  113. },
  114. // 是否隐藏原生键盘,如果想用自定义键盘的话,需设置此参数为true
  115. disabledKeyboard: {
  116. type: Boolean,
  117. default: false
  118. }
  119. },
  120. watch: {
  121. // maxlength: {
  122. // // 此值设置为true,会在组件加载后无需maxlength变化就会执行一次本监听函数,无需再created生命周期中处理
  123. // immediate: true,
  124. // handler(val) {
  125. // this.maxlength = Number(val);
  126. // }
  127. // },
  128. value: {
  129. immediate: true,
  130. handler(val) {
  131. // 转为字符串
  132. val = String(val);
  133. // 超出部分截掉
  134. this.valueModel = val.substring(0, this.maxlength);
  135. }
  136. },
  137. },
  138. data() {
  139. return {
  140. valueModel: ""
  141. }
  142. },
  143. computed: {
  144. // 是否显示呼吸灯效果
  145. animationClass() {
  146. return (index) => {
  147. if (this.breathe && this.charArr.length == index) return 'u-breathe';
  148. else return '';
  149. }
  150. },
  151. // 用于显示字符
  152. charArr() {
  153. return this.valueModel.split('');
  154. },
  155. charArrLength() {
  156. return this.charArr.length;
  157. },
  158. // 根据长度,循环输入框的个数,因为头条小程序数值不能用于v-for
  159. loopCharArr() {
  160. return new Array(this.maxlength);
  161. }
  162. },
  163. methods: {
  164. getVal(e) {
  165. let {
  166. value
  167. } = e.detail
  168. this.valueModel = value;
  169. // 判断长度是否超出了maxlength值,理论上不会发生,因为input组件设置了maxlength属性值
  170. if (String(value).length > this.maxlength) return;
  171. // 未达到maxlength之前,发送change事件,达到后发送finish事件
  172. this.$emit('change', value);
  173. if (String(value).length == this.maxlength) {
  174. this.$emit('finish', value);
  175. }
  176. }
  177. }
  178. }
  179. </script>
  180. <style scoped lang="scss">
  181. @import "../../libs/css/style.components.scss";
  182. @keyframes breathe {
  183. 0% {
  184. opacity: 0.3;
  185. }
  186. 50% {
  187. opacity: 1;
  188. }
  189. 100% {
  190. opacity: 0.3;
  191. }
  192. }
  193. .u-char-box {
  194. text-align: center;
  195. }
  196. .u-char-flex {
  197. @include vue-flex;
  198. justify-content: center;
  199. flex-wrap: wrap;
  200. position: relative;
  201. }
  202. .u-input {
  203. position: absolute;
  204. top: 0;
  205. left: -100%;
  206. width: 200%;
  207. height: 100%;
  208. text-align: left;
  209. z-index: 9;
  210. opacity: 0;
  211. background: none;
  212. }
  213. .u-char-item {
  214. position: relative;
  215. width: 90rpx;
  216. height: 90rpx;
  217. margin: 10rpx 10rpx;
  218. font-size: 60rpx;
  219. font-weight: bold;
  220. color: $u-main-color;
  221. line-height: 90rpx;
  222. @include vue-flex;
  223. justify-content: center;
  224. align-items: center;
  225. }
  226. .u-middle-line {
  227. border: none;
  228. }
  229. .u-box {
  230. box-sizing: border-box;
  231. border: 2rpx solid #cccccc;
  232. border-radius: 6rpx;
  233. }
  234. .u-box-active {
  235. overflow: hidden;
  236. animation-timing-function: ease-in-out;
  237. animation-duration: 1500ms;
  238. animation-iteration-count: infinite;
  239. animation-direction: alternate;
  240. border: 2rpx solid $u-type-primary;
  241. }
  242. .u-middle-line-active {
  243. background: $u-type-primary;
  244. }
  245. .u-breathe {
  246. animation: breathe 2s infinite ease;
  247. }
  248. .u-placeholder-line {
  249. /* #ifndef APP-NVUE */
  250. display: none;
  251. /* #endif */
  252. position: absolute;
  253. left: 50%;
  254. top: 50%;
  255. transform: translate(-50%, -50%);
  256. width: 2rpx;
  257. height: 40rpx;
  258. background: #333333;
  259. animation: twinkling 1.5s infinite ease;
  260. }
  261. .u-animation-breathe {
  262. animation-name: breathe;
  263. }
  264. .u-dot {
  265. font-size: 34rpx;
  266. line-height: 34rpx;
  267. }
  268. .u-middle-line {
  269. height: 4px;
  270. background: #000000;
  271. width: 80%;
  272. position: absolute;
  273. border-radius: 2px;
  274. top: 50%;
  275. left: 50%;
  276. transform: translate(-50%, -50%);
  277. }
  278. .u-buttom-line-active {
  279. background: $u-type-primary;
  280. }
  281. .u-bottom-line {
  282. height: 4px;
  283. background: #000000;
  284. width: 80%;
  285. position: absolute;
  286. border-radius: 2px;
  287. bottom: 0;
  288. left: 50%;
  289. transform: translate(-50%);
  290. }
  291. </style>