请选择 进入手机版 | 继续访问电脑版
帖子
帖子
用户
博客
课程
显示全部楼层
53
帖子
4
勋章
56
Y币

AVM框架 密码输入框组件

[复制链接]
发表于 2022-6-27 14:02:41
​带网格的输入框组件,可以用于输入密码、短信验证码等场景,通常与数字键盘组件配合使用。
支持自定义密码长度,支持加密和明文显示。
组件文件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>
复制代码
示例展示


本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册

X
您需要登录后才可以回帖 登录

本版积分规则