|
带网格的输入框组件,可以用于输入密码、短信验证码等场景,通常与数字键盘组件配合使用。
支持自定义密码长度,支持加密和明文显示。
组件文件password-input.stml
- <template>
- <view class="password-input_container">
- <view class="password-input_security">
- <view class="password-input_item" v-for="(item,index) in codeArr" data-index={index} @click="codeInput">
- <text class="password-input_item-word--hidden" v-if="this.props.passwordCode[index] && !this.props.mask"></text>
- <text class="password-input_item-word--mask" v-if="this.props.passwordCode[index] && this.props.mask">{this.props.passwordCode[index]}</text>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- name: 'password-input',
- props:{
- length:Number,
- passwordCode:Array,
- mask:Boolean
- },
- install(){
- for (let index = 0; index < this.props.length; index++) {
- this.data.codeArr[index]=null;
- }
- },
- data() {
- return{
- codeArr:[]
- }
- },
- methods: {
- codeInput(e){
- this.fire('codeClick','');
- }
- }
- }
- </script>
- <style>
- .password-input_container {
- margin: 10px;
- }
- .password-input_security{
- flex-flow: row nowrap;
- height: 50px;
- }
- .password-input_item{
- display: flex;
- align-items: center;
- flex: 1;
- background-color: #fff;
- height: 100%;
- border: 0.5px solid #eee;
- margin: -0.5px;
- justify-content: center;
- }
- .password-input_item-word--hidden{
- width: 10px;
- height: 10px;
- background-color: #000;
- border-radius: 100%;
- }
- .password-input_item-word--mask{
- font-size: 30px;
- text-align: center;
- }
- </style>
复制代码 使用示例demo-password-input.stml
- <template>
- <view class="page">
- <safe-area></safe-area>
- <text class="title">请输入6位数密码</text>
- <password-input
- :length={codeLength}
- :passwordCode={passwordCode}
- :mask={isMask}
- oncodeClick="openKeyBoard">
- </password-input>
- <button class="btn">确定</button>
- <number-keyboard
- :limitLengh="codeLength"
- :recnetNumber="passwordCode"
- :isRandom="isRandom"
- :isModel="isModel"
- onclose="closeNumberBoard"
- onsetNumber="getNumber"
- ondelNumber="deleteNumber"
- v-if="isShowNUmberBoard">
- </number-keyboard>
- </view>
- </template>
- <script>
- import '../../components/password-input.stml'
- import '../../components/number-keyboard.stml'
- export default {
- name: 'demo-password-input',
- apiready(){
-
- },
- data() {
- return{
- codeLength:6,
- passwordCode:[],
- isRandom:true,
- isShowNUmberBoard:false,
- isModel:true,
- isMask:false,
- passwordCodeStr:'',
- }
- },
- methods: {
- closeNumberBoard(e){
- this.data.isShowNUmberBoard = false;
- },
- getNumber(e){
- // console.log(JSON.stringify(e));
- this.data.passwordCode = e.detail;
- this.data.passwordCodeStr = this.data.passwordCode.join('');
- if(this.data.passwordCode.length==this.data.codeLength){
- this.data.isShowNUmberBoard = false;
- }
- },
- deleteNumber(e){
- this.data.passwordCode = e.detail;
- this.data.passwordCodeStr = this.data.passwordCode.join('');
- },
- openKeyBoard(e){
- this.data.isShowNUmberBoard = true;
- }
- }
- }
- </script>
- <style>
- .page {
- height: 100%;
- background-color: #f0f0f0;
- }
- .title{
- text-align: center;
- font-size: 20px;
- padding: 20px 0;
- }
- .btn{
- margin: 10px;
- background-color: #ff0000;
- color: #ffffff;
- border-radius: 10px;
- font-size: 20px;
- }
- </style>
复制代码 示例展示
|
本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册
X
|