描述：uni-app + uview 实现自定义交易密码弹框

// EnterTradePwd/index.vue
<template>
    <u-popup
        :show="show"
        :round="20"
        class="key_main"
    >
        <view class="main_title">
            <u-icon
                class="title_icon"
                name="close"
                bold
                @click="hideFun"
            />
            <text>请输入交易密码</text>
            <view
                class="title_forget"
                @tap="forgetFun"
            >
                忘记密码
            </view>
        </view>
        <view class="main_content">
            <view class="content_num">
                <view
                    v-for="item in pwdLen"
                    :key="item"
                    class="content_item"
                >
                    {{ password[item - 1] ? '●' : '' }}
                </view>
            </view>
            <view class="error_text">
                密码错误，还可输入{{ count }}次
            </view>
        </view>
        <view class="main_keyboard">
            <view
                v-for="item in numberLen"
                :key="item"
                class="key_num"
                @tap="inputNumFun({ num: item })"
            >
                {{ item }}
            </view>
            <view class="key_null" />
            <view
                class="key_0"
                @tap="inputNumFun({ num: 0 })"
            >
                0
            </view>
            <view
                class="key_del"
                @tap="delNumFun"
            >
                <image
                    src="/static/images/base/boardDel.png"
                    mode="aspectFill"
                />
            </view>
        </view>
    </u-popup>
</template>

<script>

export default {
    props: {
        show: {
            type: Boolean,
            default: false
        },
    },
    data () {
        return {
            pwdLen: 6, //输入密码的长度
            numberLen: 9, //密码键盘的数字
            password: '', //密码
            count: 6
        };
    },
    computed: {},
    methods: {
        inputNumFun (op) {
            if (this.password.length <= 6) {
                this.password += op.num;
                if (this.password.length !== this.pwdLen) return;
                this.handleSubmit();
            }
        },
        delNumFun () {
            if (this.password.length == 0) return;
            this.password = this.password.substring(
                0,
                this.password.length - 1
            );
        },
        forgetFun () {
            uni.showToast({
                title: '忘记密码操作',
                icon: 'none',
            });
        },
        hideFun () {
            this.$emit('update:show', false);
        },
        async handleSubmit () {
            this.$emit('getPassword', { password: this.password });
        }
    },
};
</script>

<style lang="scss">
.key_main {
    .main_title {
        height: 120rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0px 40rpx;
        .title_icon, .title_forget {
            width: 120rpx;
        }
        text {
            text-align: center;
        }
        .title_forget {
            color: #000;
            font-size: 14px;
        }
    }
    .main_content {
        padding: 20rpx 100rpx;
        .content_num {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .content_item {
                width: 80rpx;
                height: 80rpx;
                background-color: #ccc;
                border-radius: 16rpx;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
        .error_text {
            font-size: 24rpx;
            color: $u-error;
            text-align: center;
            margin-top: 20rpx;
        }
    }
    .main_keyboard {
        height: 500rpx;
        display: flex;
        flex-flow: wrap;
        .key_null,
        .key_del {
            background: #ededed;
        }
        image {
            width: 40rpx;
            height: 30rpx;
        }
        .key_num,
        .key_null,
        .key_del,
        .key_0 {
            width: 250rpx;
            height: 125rpx;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .key_num {
            border-right: 2rpx solid #f1f4f4;
            border-bottom: 2rpx solid #f1f4f4;
            border-top: 2rpx solid #f1f4f4;
            &:nth-child(n + 4) {
                border-top: none;
            }
            &:nth-child(n + 7) {
                border-bottom: none;
            }
        }
        .key_0 {
            border-top: 2rpx solid #f1f4f4;
        }
    }
}
</style>

<!-- 使用 -->
<EnterTradePwd :show.sync="show" />

data () {
    return{
        show: false
    };
},

二次封装来源