uniapp 结合uivew2实现修改密码样式

uniapp yekong

uniapp 结合uivew2实现修改密码样式

<template>
    <view class="changepwd">
        <u--form labelPosition="left" labelWidth="80" :model="model1" :rules="rules" ref="form1">
            <u-form-item label="旧密码" prop="userInfo.oldpwd" borderBottom ref="item1">
                <u--input class="inputx" type="password" placeholder="请输入旧密码" inputAlign="right" v-model="model1.userInfo.oldpwd"
                    border="none"></u--input>
            </u-form-item>
            <u-form-item label="新密码" prop="userInfo.newpwd" borderBottom ref="item1">
                <u--input class="inputx" type="password" placeholder="请输入新密码" inputAlign="right" v-model="model1.userInfo.newpwd"
                    border="none"></u--input>
            </u-form-item>
            <u-form-item label="确认密码" prop="userInfo.newpwdr" borderBottom ref="item1">
                <u--input class="inputx" type="password" placeholder="请再次输入新密码" inputAlign="right" v-model="model1.userInfo.newpwdr"
                    border="none"></u--input>
            </u-form-item>
        </u--form>
        <u-button class="mt50" @click="submit" type="primary">修改</u-button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                model1: {
                    userInfo: {
                        oldpwd: '',
                        newpwd: '',
                        newpwdr: '',
                    },
                },
                rules: {
                    'userInfo.oldpwd': {
                        type: 'string',
                        required: true,
                        message: '请输入旧密码',
                        trigger: ['blur', 'change']
                    },
                    'userInfo.newpwd': {
                        type: 'string',
                        required: true,
                        message: '请再次新密码',
                        trigger: ['blur', 'change']
                    },
                    'userInfo.newpwdr': {
                        type: 'string',
                        required: true,
                        message: '请再次输入新密码',
                        trigger: ['blur', 'change']
                    },
                },
            };
        },
        methods: {
            submit() {

            }
        },
    };
</script>

<style lang="scss" scoped>
    .changepwd {
        width: 690rpx;
        margin: 0 auto;
    }

    .inputx {
        width: 100%;
        text-align: right;
    }

    .mt50 {
        margin-top: 50rpx;
    }
</style>

喜欢