uniapp密码输入框

uniapp自定义密码输入框

可用于小程序短信验证码输入框、密码数字框…

文章目录

uniapp自定义密码输入框
- 效果图
- 定义组件
- - template
  - js
  - scss
- 使用
- - template
  - js

效果图

定义组件

提示： 这里把输入框定义为组件，其他可根据需求调整

template

<template><view><view class="password-input-warp fcc"><view class="password-input_item fcc" :style="{width: width +'rpx', height: height +'rpx', backgroundColor: backgroundColor}"@click="focus = true" v-for="(item, index) in length" :key="index"><view class="num" :class="txtStatus ? 'txtColor' : ''" :style="{fontWeight : bold ? 'bold' : 'normal'}" v-if="password.length > index">{{ showVal ? password[index] : placeholder }}</view><view class="line animation" v-if="password.length == index">|</view></view><input class="input" type="number" :focus="focus" v-model="password" :maxlength="length" @focus="focus = true"@blur="focus=false" @input="passwordInput" /></view></view>
</template>

js

<script>export default {data() {return {focus: false,password: ''}},props: {width: {type: [Number, String],default: 100,},height: {type: [Number, String],default: 100,},backgroundColor: {type: String,default: "#FFF"},bold: { // 是否加粗type: Boolean,default: true},showVal: { // 是否明文type: Boolean,default: false},placeholder: { // 占位type: String,default: "*"},length: { // 密码框长度type: Number,default: 6},txtStatus: {type: Boolean,default: false}},methods: {/*** 监听input事件*/passwordInput(e) {this.$emit('update:value', this.password);if (e.detail.value.length == this.length) {this.focus = falsethis.$emit('confirm')}},/*** 清空内容*/clearInput() {this.password = '';}}}
</script>

scss

<style lang="scss" scoped>.password-input-warp {position: relative;.password-input_item {margin-right: 10rpx;text-align: center;line-height: 100rpx;@include sc(40rpx, $fc3);border-radius: 14rpx;border: 1rpx solid #EFEFEF;box-shadow: 0px 1px 2px 1px rgba(16, 24, 40, 0.05);&:last-child {margin-right: 0;}.num {@include sc(72rpx, $fc6);}.txtColor {color: #F52622;}.line {font-weight: normal;font-size: 40rpx;height: 80rpx;line-height: 76rpx;}.animation {opacity: 0;animation-name: line;animation-timing-function: linear;animation-iteration-count: infinite;animation-duration: .5s;animation-direction: alternate;}@keyframes line {0% {opacity: 1;}100% {opacity: 0;}}}.input {position: absolute;top: 0;left: -100%;height: 100%;opacity: 0;color: transparent;}}
</style>

使用

这里展示使用组件，其他的请忽略

template

<template><view class="container"><button class="comfirmBtn" @click="withdrawTap">申请提现</button><view class="code-popup-wrap"><uni-popup ref="codePopup" type="center"><view class="popup-content tc"><view class="close fcc bold" @click="closeTap"><text class="iconfont iconclose"></text></view><view>手机验证</view><view class="ft24 fc6 pdt10 pdb20">为了您的资产安全，请输入验证码进行安全验证</view><view class="tel bold">{{mobile | mobileFormat}}</view><!-- 使用组件 --><custom-code-input:value.sync="code" showVal:length="4"@confirm="codeInputTap":txtStatus="isCodeColor"ref="code"></custom-code-input><view class="ft22 fc6 tr code" @click="getCodeTap">{{codeTxt}}</view></view></uni-popup></view></view>
</template>

js

<script>import customCodeInput from '../../components/custom-code-input/custom-code-input.vue'export default {data() {return {code: '',codeTxt: '获取验证码',isCodeColor: false,mobile: '18899998888'}},components: {customCodeInput},methods: {openCodeTap() {this.$refs.codePopup.open();},withdrawTap() {// if(!this.isVerify()) {//     return false// };this.$refs.codePopup.open();this.getCodeTap();},/*** 接收子组件传递值*/codeInputTap() {console.log('获取输入内容', this.code);// 执行 申请提现业务},/*** 清除子组件输入框值*/clearInputValTap() {this.$refs.code.clearInput();},closeTap() {this.$refs.codePopup.close();},getCodeTap() {// 发送请求，执行发送验证码的接口、根据需求处理业务}},filters: {mobileFormat(mobile) {if (mobile) {return mobile.substring(0, 3) + '****' + mobile.substring(7)}return '';}}}
</script>

uniapp密码输入框相关推荐

uniapp写一个登录页面
很高兴为您解答,可以参考以下步骤来写一个登录页面: 创建一个uniapp项目,并在项目中创建一个登录页面: 在登录页面中添加用户名和密码输入框,以及一个登录按钮: 在登录按钮的点击事件中,添加验证用户 ...
uniapp登录页设计
uniapp的登录页设计思路,设计一个用户名输入框,一个密码输入框,一个提交按钮,使用form表单提交.提交后,后台验证用户名和密码,如果正确就返回特定值,uniapp根据结果跳转到另一页面,不正确返 ...
uniapp ios证书申请和上架全流程
目前市场上流行着很多多端开发框架,就拿uniapp和react native来比较,uniapp比react native方便很多,react的编译还需要mac电脑,而uniapp则轻量得多,一台wi ...
5.3.2 表单内数据的获取 -表单的使用- 常用语法【uni-app教程uniapp教程（黄菊华-跨平台开发系列教程）】
5.3.2 表单内数据的获取在表单的组件,我们需要定义name的值,然后我们在提交表单的时候,就可以通过name获取对应的值,获取内容的格式如下: e.detail.value.组件的name 提示 ...
vue 和 uniapp 的密码框小眼睛（通用）
密码输入框的小眼睛适合Vue 或者 uniapp使用步骤1动态绑定:type 步骤2在data里声明 Data(){ Return{ seen:'', pwdType: 'password', // ...
文本输入框、密码输入框
当用户要在表单中键入字母.数字等内容时,就会用到文本输入框.文本框也可以转化为密码输入框. 语法: <form><input type="text/password&quo ...
uniapp 鸿蒙,关于前端:uniapp项目安装运行操作手册
一,装置运行环境 1.下载node.js node.js下载链接node.js 请下载长期反对版. 2.装置node.js 装置教程百度可查这里就不具体阐明了,装置教程地址链接 3.验证node是否装 ...
uniapp 中如何使用echart_uniapp中如何引用echarts
uniapp引用echarts的方法:1.通过uni-app官网直接安装echarts插件生成echarts项目模板:2.创建一个新的hello uni-app项目模板:3.把echarts放到com ...
uniapp移动端H5在线预览PDF等文件实现源码及注解
uniapp移动端H5预览文件实现分为两个场景处理: (这里以预览PDF文件为示例,在线预览就是查看网络文件) 1. IOS客户端预览PDF文件 IOS客户端预览PDF文件可以通过跳转文件地址实现预览 ...
uniapp兼容H5和小程序订阅消息授权开发封装，使用方便
本文使用 uniapp 框架开发,因为H5的订阅消息和小程序的订阅消息的授权流程不一样,但是很多地方需要使用授权,所以我封装了一个兼容H5和小程序订阅消息授权的方法,使用比较方便,希望能够帮助到你,实 ...

uniapp密码输入框

uniapp自定义密码输入框

文章目录

效果图

定义组件

template

js

scss

使用

template

js

uniapp密码输入框相关推荐

最新文章

热门文章