示例

    <template>
    <view>
        <tn-form :model="form" ref="uForm">
        <tn-modal v-model="show" :custom="true">
                <tn-form-item label="姓名" prop="name">
                    <tn-input v-model="form.name" />
                </tn-form-item>
                <tn-form-item label="简介" prop="intro">
                    <tn-input v-model="form.intro" />
                </tn-form-item>
                <tn-form-item label="性别" prop="sex">
                    <tn-input v-model="form.sex" type="select" />
                </tn-form-item>
            <tn-button @click="submit">提交</tn-button>
        </tn-modal>
        </tn-form>
        <tn-button @click="open">
            打开模态框
        </tn-button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                form: {
                    name: '',
                    intro: '',
                    sex: ''
                },
                rules: {
                    name: [{
                        required: true,
                        message: '请输入姓名',
                        // 可以单个或者同时写两个触发验证方式 
                        trigger: ['change', 'blur'],
                    }],
                    intro: [{
                        min: 5,
                        message: '简介不能少于5个字',
                        trigger: 'change'
                    }]
                },
                show: false,
                title: '提示信息',
                content: '提示信息的内容',
                button: [{
                        text: '取消',
                        backgroundColor: '#E6E6E6',
                        fontColor: '#FFFFFF',
                        plain: true,
                        shape: 'round'
                    },
                    {
                        text: '确定',
                        backgroundColor: 'tn-bg-indigo',
                        fontColor: '#FFFFFF'
                    }
                ]
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.$refs.uForm.setRules(this.rules);
            })
        },
        methods: {
            open() {
                this.show = true;
            },
            submit() {
                this.$nextTick(() => {
                        this.$refs.uForm.validate(valid => {
                            if (valid) {
                                console.log('验证通过');
                            } else {
                                console.log('验证失败');
                            }
                        });
                })
                }
        }
    }
</script>

解决措施

将原本拟态框和form表单掉转位置，让页面可以渲染到form表单，而且最后的效果是没有变化的