uniapp密码输入框

uniapp自定义密码输入框

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

效果图

定义组件

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

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 = false
					this.$emit('confirm')
				}
			},
            /**
             * 清空内容
             */
            clearInput() {
                this.password = '';
            }
		}
	}
</script>

scss

使用

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

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>