password-input.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <template>
  2. <view class="psdIptBx">
  3. <block v-for="(item , index) in psdIptNum" :key='index'>
  4. <view class="psdTtem">
  5. <text v-if="numLng.length > index" class="psdTtemTxt">
  6. <text v-if="plaintext">●</text>
  7. <text v-else>{{numLng[index]}}</text>
  8. </text>
  9. <text v-if="numLng.length ==index" class="focus_move">|</text>
  10. </view>
  11. </block>
  12. </view>
  13. </template>
  14. <script>
  15. export default {
  16. props: {
  17. //是否明文 默认密文
  18. plaintext: {
  19. type: Boolean,
  20. default: true
  21. },
  22. //键盘输入的val
  23. numLng: {
  24. type: [String, Number],
  25. default: ''
  26. },
  27. //密码框的个数
  28. psdIptNum: {
  29. type: [String, Number],
  30. default: 6
  31. }
  32. },
  33. data() {
  34. return {}
  35. },
  36. created() {},
  37. methods: {
  38. }
  39. }
  40. </script>
  41. <style scoped>
  42. .psdIptBx {
  43. display: flex;
  44. width: 100%;
  45. text-align: center;
  46. /* border-bottom: 1px solid #ccc; */
  47. /* border-top: 1px solid #ccc; */
  48. /* border-right: 1px solid #ccc; */
  49. }
  50. .psdTtem {
  51. flex: 1;
  52. height: 80rpx;
  53. margin: 0 10rpx;
  54. /* border-left: 1px solid #ccc; */
  55. border-bottom: 1px solid #ccc;
  56. line-height: 1;
  57. }
  58. .psdTtemTxt {
  59. text-align: center;
  60. line-height: 80rpx;
  61. font-size: 30rpx;
  62. }
  63. .focus_move {
  64. color: #E6240F;
  65. font-size: 30rpx;
  66. line-height: 80rpx;
  67. animation: focus 0.8s infinite;
  68. }
  69. @keyframes focus {
  70. from {
  71. opacity: 1;
  72. }
  73. to {
  74. opacity: 0;
  75. }
  76. }
  77. </style>