0

这里我使用了 vue 表单生成器。这是一个使用组件的多步骤表单。在这里，我需要在最后一步制作一个预览页面，就像我们在每个步骤中输入的内容一样，应该在最后一步的预览页面中显示。那么如何实现这一点。如果有人有想法请帮助我。这里我使用了 vueform 生成器链接并执行了

<head>
  <script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
    <script src="https://unpkg.com/vue-form-generator@2.3.4/dist/vfg.js"></script>
    <script src="https://unpkg.com/vue-form-generator@2.3.4/dist/vfg.css"></script>
</head>
<div class="container" id="app">
  <div class="panel panel-default">
    <div class="panel-heading">Form</div>
    <div class="panel-body">
      <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
    </div>
  </div>

      <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>


      <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>

      <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>

<script>

Vue.js

var vm = new Vue({
    el: "#app",

    components: {
        "vue-form-generator": VueFormGenerator.component
    },

    data() {
            return {
        model: {
            id: "",
            name: "",
            password: "",
            age: "",
            skills: "",
            email: "",
            status: ""
        },
        schema: {
            fields: [{
                type: "input",
                inputType: "text",
                label: "ID",
                model: "id",
                readonly: true,
                featured: false,
                disabled: true
            }, {
                type: "input",
                inputType: "text",
                label: "Name",
                model: "name",
                readonly: false,
                featured: true,
                required: true,
                disabled: false,
                placeholder: "User's name",
            }, {
                type: "input",
                inputType: "password",
                label: "Password",
                model: "password",
                min: 6,
                required: true,
            }, {
                type: "input",
                inputType: "number",
                label: "Age",
                model: "age",
                min: 18,
                validator: VueFormGenerator.validators.number
            }, {
                type: "input",
                inputType: "email",
                label: "E-mail",
                model: "email",
                placeholder: "User's e-mail address",
                validator: VueFormGenerator.validators.email
            }, {
                type: "checklist",
                label: "Skills",
                model: "skills",
                multi: true,
                required: true,
                multiSelect: true,
                values: ["HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS"]
            }, {
               type: "switch",
                label: "Status",
                model: "status",
                multi: true,
                readonly: false,
                featured: false,
                disabled: false,
                default: true,
                textOn: "Active",
                textOff: "Inactive"
            }]
        },

        formOptions: {
            validateAfterLoad: true,
            validateAfterChanged: true
        }
            };
    },


});
4

0 回答 0