APICloud AVM框架封装密码输入框组件

带网格的输入框组件，可以用于输入密码、短信验证码等场景，通常与数字键盘组件配合使用。
支持自定义密码长度，支持加密和明文显示。
组件文件password-input.stml

1. <template>

2.         <view class="password-input_container">

3.                 <view class="password-input_security">

4.                         <view class="password-input_item" v-for="(item,index) in codeArr" data-index={index} @click="codeInput">

5.                                 <text class="password-input_item-word--hidden" v-if="this.props.passwordCode[index] && !this.props.mask"></text>

6.                                 <text class="password-input_item-word--mask" v-if="this.props.passwordCode[index] && this.props.mask">{this.props.passwordCode[index]}</text>

7.                         </view>

8.                 </view>

9.         </view>

10. </template>

11. <script>

12.         export default {

13.                 name: 'password-input',

14.                 props:{

15.                         length:Number,

16.                         passwordCode:Array,

17.                         mask:Boolean

18.                 },

19.                 install(){

20.                         for (let index = 0; index < this.props.length; index++) {

21.                                 this.data.codeArr[index]=null;               

22.                         }

23.                 },

24.                 data() {

25.                         return{

26.                                 codeArr:[]

27.                         }

28.                 },

29.                 methods: {

30.                         codeInput(e){

31.                                 this.fire('codeClick','');

32.                         }

33.                 }

34.         }

35. </script>

36. <style>

37.         .password-input_container {

38.                 margin: 10px;

39.         }

40.         .password-input_security{

41.                 flex-flow: row nowrap;

42.                 height: 50px;

43.         }

44.         .password-input_item{

45.                 display: flex;

46.                 align-items: center;

47.                 flex: 1;

48.                 background-color: #fff;

49.                 height: 100%;

50.                 border: 0.5px solid #eee;

51.                 margin: -0.5px;

52.                 justify-content: center;

53.         }

54.         .password-input_item-word--hidden{

55.                 width: 10px;

56.                 height: 10px;

57.                 background-color: #000;

58.                 border-radius: 100%;

59.         }

60.         .password-input_item-word--mask{

61.                 font-size: 30px;

62.                 text-align: center;

63.         }

64. </style>

使用示例demo-password-input.stml

1. <template>

2.         <view class="page">

3.                 <safe-area></safe-area>

4.                 <text class="title">请输入6位数密码</text>

5.                 <password-input

6.                         :length={codeLength}

7.                         :passwordCode={passwordCode}

8.                         :mask={isMask}

9.                         oncodeClick="openKeyBoard">

10.                 </password-input>

11.                 <button class="btn">确定</button>

12.                 <number-keyboard

13.                         :limitLengh="codeLength"

14.                         :recnetNumber="passwordCode"                       

15.                         :isRandom="isRandom"

16.                         :isModel="isModel"

17.                         onclose="closeNumberBoard"

18.                         onsetNumber="getNumber"

19.                         ondelNumber="deleteNumber"

20.                         v-if="isShowNUmberBoard">

21.                  </number-keyboard>

22.         </view>

23. </template>

24. <script>

25.         import '../../components/password-input.stml'

26.         import '../../components/number-keyboard.stml'

27.         export default {

28.                 name: 'demo-password-input',

29.                 apiready(){

30.                        

31.                 },

32.                 data() {

33.                         return{

34.                                 codeLength:6,

35.                                 passwordCode:[],

36.                                 isRandom:true,

37.                                 isShowNUmberBoard:false,

38.                                 isModel:true,

39.                                 isMask:false,

40.                                 passwordCodeStr:'',

41.                         }

42.                 },

43.                 methods: {

44.                         closeNumberBoard(e){

45.                                 this.data.isShowNUmberBoard = false;

46.                         },

47.                         getNumber(e){

48.                                 // console.log(JSON.stringify(e));

49.                                 this.data.passwordCode = e.detail;

50.                                 this.data.passwordCodeStr = this.data.passwordCode.join('');

51.                                 if(this.data.passwordCode.length==this.data.codeLength){

52.                                         this.data.isShowNUmberBoard = false;

53.                                 }

54.                         },

55.                         deleteNumber(e){

56.                                 this.data.passwordCode = e.detail;

57.                                 this.data.passwordCodeStr = this.data.passwordCode.join('');

58.                         },

59.                         openKeyBoard(e){

60.                                 this.data.isShowNUmberBoard = true;

61.                         }

62.                 }

63.         }

64. </script>

65. <style>

66.         .page {

67.                 height: 100%;

68.                 background-color: #f0f0f0;

69.         }

70.         .title{

71.                 text-align: center;

72.                 font-size: 20px;

73.                 padding: 20px 0;

74.         }

75.         .btn{

76.                 margin: 10px;

77.                 background-color: #ff0000;

78.                 color: #ffffff;

79.                 border-radius: 10px;

80.                 font-size: 20px;

81.         }

82. </style>